ブログ見出しと普通の見出し

Jimdoのブログの見出しは「見出し1」であり、色は「リンク」で指定した色が適用されます。

CSSはどこに書く?」で紹介したように、「ヘッダー部を編集」のCSSで普通の見出し(本文中の見出し1)のスタイルを変更しようとすると、意図せずにブログの見出しも変わってしまいます。

今回は見出しのスタイル変更しつつ、ブログの見出しについてはデフォルトのままにする方法を紹介します。

 

 

CSS

早速CSSの説明です。「ヘッダー部を編集」に次のCSSを記述します。

<style type="text/css">
/*<![CDATA[*/
<!--
 
/* 本文の見出し1のスタイル */
#content h1
{
    background-color: #006701;
    color: white;
    line-height: 35px;
    padding-left: 10px;
}                
 
/* ブログの見出しのスタイルを元に戻す */
#content .blogselection h1,
#content .post-title
{
    background: none;
    line-height: normal;
    padding-left: 0px;
}
 
-->
/*]]>*/
</style>

"#content h1" が普通の見出しのスタイルです。

背景を深緑にして、フォントを白にしています。あとは位置とサイズの調整を行っています。

 

今回のポイントは"#content .blogselection h1"と"#content .post-title"です。

"#content .blogselection h1" はブログの一覧表示をしているときの見出しです。

"#content .post-title" はブログの1つの記事を表示しているときの見出しです。 

この2つを選択して、見出し1のスタイルで設定した"background-color"と"padding-left"を元に戻しています。

 

ブログの見出しはリンクになっており、フォントの色などは子孫セレクタ<a>で決まりますので、そちらは操作する必要はありません。

 

表示サンプル

ということで、このようになりました。

普通の見出し1はフォント色が白で背景が緑になりました。ブログの見出しは元のままです。

 

応用すれば、記事の一覧表示と単独表示で別々のスタイルを指定することも出来ますね。