ここから【wordpressで「記事を書いてみよう②ーカテゴリとタグの設定ー」】で公開した投稿記事の見た目をなおしていきます。
ここでは「スタイルシート（style.css)」を使います。
管理画面・メニューの「外観」＞「テーマの編集」を開きます。「スタイルシート（style.css）」が開かれている事を確認（画面エディタ上部）して下さい。
これまででスタイルシートに記述したのは以下の通りです。
[css]
/* 基本の設定 */
body {font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif}
a{text-decoration: none;color: #0c8bcd}
div#container {width: 980px;margin: auto}
/* ヘッダー */
div#header {font-family: 'Trebuchet MS', sans-serif;
margin-bottom: 20px}
div#header h1 {font-size: 3em;margin: 0}
div#header h1 a {color: #282f33}
div#header p#desc {font-size: 1em;
font-weight: bold;
color: #999999;margin: 0 0 5px}
/* ナビゲーションバー */
div#nav {font-size: 0.75em;
height: 30px;
background-color: #6c8446;
border-radius: 3px;
border: solid 1px #000000;
margin-bottom: 3px}
div#nav ul{margin: 0; padding: 0}
div#nav li{list-style-type: none; float: left}
div#nav li a {display: block;
width: 162px;
line-height: 30px;
border-right: solid 1px #000000;
color: #ffffff;
text-align: center}
div#nav li a:hover {background-color: #a6d8f6}
/* フッター */
div#footer {border-top: solid 1px #aaaaaa;
padding: 6px 0;
clear: both}
div#footer p {font-size: 0.75em;
font-style: normal;
font-family: Verdana, sans-serif;
margin: 0}
[/css]
今回は記事のスタイル指定ですので
[css]
color: #ffffff;
text-align: center}
div#nav li a:hover {background-color: #a6d8f6}
/* フッター */
div#footer {border-top: solid 1px #aaaaaa;
[/css]
の/*フッター/の一行上、div#nav li a:hover {background-color: #a6d8f6}の一行下に新しいスタイルを記述します。
内容は以下の通りです
[css]
/* 記事 */
div.post {margin-bottom: 30px; overflow: hidden}
div.post h2 {background-color: #4b5c31;
border-radius: 3px;
border-top: solid 1px #aaaaaa;
border-bottom: solid 1px #aaaaaa;
font-size: 1.2em;
padding: 10px 18px;
margin: 0}
div.post h2 a {color: #ffffff}
div.post p {font-size: 1.2em;
line-height: 1.6}
/*カテゴリ表示*/
div.post p.postcat {margin: -10px 0px 10px 0;
background-color: #9bd4a3;
border-radius: 3px;}
div.post p.postcat a {margin: 0 -40px 0 50px;
font-size: smaller;
color: #ffffff;
background-color: #7a592f;
border-radius: 5px; }
/* 記事の画像 */
.aligncenter {display: block;
margin-left: auto;
margin-right: auto}
.alignleft {float: left;
margin-right: 10px;
margin-bottom: 10px}
.alignright {float: right;
margin-left: 10px;
margin-bottom: 10px}
.wp-caption {border: solid 1px #aaaaaa;
text-align: center;
padding-top: 5px}
[/css]
です。これをコピーして/*フッター*/の一行上に貼り付けてみて下さい。
全体では
[css]
/*
Theme Name: denpakudou
Theme URI: http://gm-moja.com
Description: テーマ作成の練習
Author: MOJA
Author URL:http://moja-asia.check-xserver.jp
Version:00
Tags:free,two-columns
*/
/* 基本の設定 */
body {font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif}
a{text-decoration: none;color: #0c8bcd}
div#container {width: 980px;margin: auto}
/* ヘッダー */
div#header {font-family: 'Trebuchet MS', sans-serif;
margin-bottom: 20px}
div#header h1 {font-size: 3em;margin: 0}
div#header h1 a {color: #282f33}
div#header p#desc {font-size: 1em;
font-weight: bold;
color: #999999;margin: 0 0 5px}
/* ナビゲーションバー */
div#nav {font-size: 0.75em;
height: 30px;
background-color: #6c8446;
border-radius: 3px;
border: solid 1px #000000;
margin-bottom: 3px}
div#nav ul{margin: 0; padding: 0}
div#nav li{list-style-type: none; float: left}
div#nav li a {display: block;
width: 162px;
line-height: 30px;
border-right: solid 1px #000000;
color: #ffffff;
text-align: center}
div#nav li a:hover {background-color: #aacf7c}
/* 記事 */
div.post {margin-bottom: 30px; overflow: hidden}
div.post h2 {background-color: #4b5c31;
border-radius: 3px;
border-top: solid 1px #aaaaaa;
border-bottom: solid 1px #aaaaaa;
font-size: 1.2em;
padding: 10px 18px;
margin: 0}
div.post h2 a {color: #ffffff}
div.post p {font-size: 1.2em;
line-height: 1.6}
/*カテゴリ表示*/
div.post p.postcat {margin: -10px 0px 10px 0;
background-color: #9bd4a3;
border-radius: 3px;}
div.post p.postcat a {margin: 0 -40px 0 50px;
font-size: smaller;
color: #ffffff;
background-color: #7a592f;
border-radius: 5px; }
/* 記事の画像 */
.aligncenter {display: block;
margin-left: auto;
margin-right: auto}
.alignleft {float: left;
margin-right: 10px;
margin-bottom: 10px}
.alignright {float: right;
margin-left: 10px;
margin-bottom: 10px}
.wp-caption {border: solid 1px #aaaaaa;
text-align: center;
padding-top: 5px}
/* フッター */
div#footer {border-top: solid 1px #aaaaaa;
padding: 6px 0;
clear: both}
div#footer p {font-size: 0.75em;
font-style: normal;
font-family: Verdana, sans-serif;
margin: 0}
[/css]
となります。
左がスタイル適用前。文字が画像に回り込んでおらず、タイトルとカテゴリ表示も装飾無しの状態でした。
右のスタイル適用後は記事内の画像を指定し文字の回り込み、タイトルとカテゴリに背景をつけています。
