FC2blogの着せ替えブログ

以下は、カスタマイズしたい場所を探そう（２）で、見つけた「記事タイトル」のＨＴＭＬ部分です。

<!--topentry-->

<h3><a id="<%topentry_no>" name="<%topentry_no>"><%topentry_title></a></h3>
<div class="body">

この事により、記事タイトル＝<%topentry_title>の表示に関わるタグは＜ｈ３＞というタグだ、という事がわかりましたので、次は、テンプレートのスタイルシート内で、＜ｈ３＞のタグに関する記述場所を探す事になります。

では、スタイルシート（ＣＳＳ）内に、「ｈ３」に関する記述箇所があるかどうか、探してみましょう。
※＜ｈｎ＞の見出しタグについては、スタイルシート内で、特別に記述されていない場合もあります。
その場合は、新たに自分で書き足します。

どうですか？見つかりましたか？
「ｈ３」の文字を含む箇所は、２箇所ありませんでしたか？

/* メニューの見出し*/
#right h3 ｛
color:#666;
font-size: 14px;
letter-spacing: 0.1em;
margin: 1.7em 0 0 0;
text-decoration: underline;
｝


/* 記事の見出し(タイトル) */
#left h3 ｛
font-size:14px;
border-left: 7px solid #999;
border-bottom: 1px dashed #999;
padding: 0.1em 0.7em;
margin: 0 0 1.7em 0;
｝

いったいどちらなのでしょう？
って、ちゃんとコメントが書いてありますよね(^^;)
/* 記事の見出し（タイトル）*/と、書いてあるほうです。

では、もし、コメントが付いていなかったら、どうやって判断しますか？

ＨＴＭＬからは、この、記事の見出し「ｈ３」の親要素を調べると、見つける事が出来ますし、スタイルシート（ＣＳＳ）からは、この２つの「ｈ３」のスタイルの違いから、判断する事ができるでしょう。

でも、そんなの、わかんな〜い！！という方の為に、簡単に判断する方法を。

カスタマイズしたい場所を探そう（２）では、ＨＴＭＬに目印となる文字を入れて、ブラウザで確認しました。
今度は、スタイルシート（ＣＳＳ）のほうに、目印（わかりやすいバックグラウンドカラー）を入れて、ブラウザで確認します。

[default]テンプレートのスタイルシート（ＣＳＳ）で、最初に出て来た【#right h3】に対して、目印（バックグラウンドカラー）を着けてみましょう。
追加した場所が、後になってすぐにわかるように、以下の場所に追加します。
色は何色でもかまいませんが、下記では、バックグラウンドカラーは、黄色になります。

/* メニューの見出し*/
#right h3 ｛background-color: #FFFF00;
color:#666;
font-size: 14px;
letter-spacing: 0.1em;
margin: 1.7em 0 0 0;
text-decoration: underline;
｝

上記の場所にbackground-color: #FFFF00;を追加したら、更新ボタンを押しますと、修正されて保存されます。
そして、最初にブラウザで開いておいた、[default]のプレビュー画面を表示させ、ブラウザの更新（リロード）ボタンを押します。

どうですか？記事タイトルではなく、別の場所に黄色のバックグラウンドカラーが着いたのがわかります。
これで、記事タイトルではなかった事が、証明されました。
※違うという事が確認されたら、スタイルシート（ＣＳＳ）の追加部分は、削除して元に戻しておきます。

同様に、もう一方の【#left h3】に対して、目印（バックグラウンドカラー）を着けてみます。
どうですか？今度は、記事タイトルのほうに、黄色いバックグラウンドカラーが着きましたよね？

この事から、記事タイトル＜ｈ３＞は、【#left h3】で、記事タイトルに関してのスタイルの記述場所は、【#left h3】の｛ から ｝までの間、という事がわかりました。
場所がわかったら、後はお好みにカスタマイズできますよね！

※ご注意※
スタイルに、背景画像【background: url(http://ｘｘｘ.gif) repeat-y 0px 0px;】や、もう既に、バックグラウンドカラーが入っている場合は、その既存の行を/*と*/とで括って、コメント扱いにして休ませておいてから、新たにバックグラウンドカラーを追加します。
そして、確認作業が終わったら、確認の為に追加した行と、/*と*/の印を削除すると、もと通りになりますから、安心ですね！