Notice: Undefined offset: 0 in /home/moja26/moja.asia/public_html/wp-content/themes/jin-child/single.php on line 20

Notice: Trying to get property 'cat_ID' of non-object in /home/moja26/moja.asia/public_html/wp-content/themes/jin-child/single.php on line 20

Notice: Undefined offset: 0 in /home/moja26/moja.asia/public_html/wp-content/themes/jin-child/single.php on line 21

Notice: Trying to get property 'cat_name' of non-object in /home/moja26/moja.asia/public_html/wp-content/themes/jin-child/single.php on line 21

Notice: Undefined offset: 0 in /home/moja26/moja.asia/public_html/wp-content/themes/jin-child/single.php on line 22

Notice: Trying to get property 'category_nicename' of non-object in /home/moja26/moja.asia/public_html/wp-content/themes/jin-child/single.php on line 22

wordpress「個別記事へのデザインの指定」

ここから【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]
となります。
左がスタイル適用前。文字が画像に回り込んでおらず、タイトルとカテゴリ表示も装飾無しの状態でした。
記事を投稿 記事スタイル適用


右のスタイル適用後は記事内の画像を指定し文字の回り込み、タイトルとカテゴリに背景をつけています。

ABOUT ME
moja
昭和47年生まれ。生まれた時からカープファン。 姫路生まれ姫路育ち。現在は相生市矢野町榊。 パソコン販売・修理・組立、出張サポート、ホームページ制作・WEBデザインなど。 奥さん1人と4男の父 真宗門徒
にほんブログ村 地域生活(街) 関西ブログ 姫路情報へにほんブログ村 子育てブログへにほんブログ村 野球ブログ 広島東洋カープへ