Bloggerの本文見出しをカスタマイズする

読みやすいブログ記事には、見出しが欠かせません。そこでBloggerでオリジナルの見出しを作成する方法について紹介します。CSSを利用していますが、それほど難しくはありません。値を少し変えるだけで、色やサイズなどを変更可能です。

利用できるhタグを探す

見出しには通常hタグを使います。ただし利用しているテーマによっては、h1やh2など比較的若い数字のタグがほかの要素に割り当てられていることもあります。クラスを利用すれば無理やり利用することもできますが、管理が面倒なので利用されていないタグを使ったほうがいいでしょう。

まずはページのソースを表示し、検索機能（Ctrl＋Fキー）を使ってh1～h6あたりまで調べてみましょう。このブログでは「シンプル」というテーマを使っていますが、hタグは以下のように割り当てられていました。

タグ	割り当て箇所
h1	ブログタイトル
h2	日付
h3	記事タイトル
h4	未使用
h5	未使用
h6	未使用

ブラウザの検索機能を使って、hタグが使われている場所を探します

このテーマではh4タグ以降が使われていないようです。そこで、本文見出しにはh4タグを使うことにします。

h4タグのCSSを修正する

つぎにh4タグのCSSを修正して、見出しの見栄えを変更しましょう。ちなみに標準のままでは、h4タグやh5タグは以下のように表示されます。


標準状態のh4タグ

hタグを見出しとして利用する場合は、編集画面をHTMLモードに切り替えて、以下のように入力してください。

<h4>見出しのテキスト</h4>

CSSの利用には、Bloggerのテンプレートデザイナーを使います。サイドメニューの「テンプレート」をクリックしてテンプレート選択画面を開き、「カスタマイズ」をクリック。


サイドバーから「テンプレート」をクリックし、「カスタマイズ」をクリック

カスタマイズ画面が表示されたら、メニューから「アドバンス」→「Add CSS」とクリックして、CSS編集画面を開きます。


メニューから「アドバンス」→「Add CSS」とクリック

CSS編集画面に以下の内容を追加し、「ブログに適用」をクリックします。

h4{
border-left: 8px #777 solid;
font-size: 18px;
font-weight: bold;
margin: 5px 0;
padding: 5px 0 5px 10px;
}

上のCSSを追加し「ブログに適用」をクリック

これで、h4タグによる見出しが以下のようになります。


見出しの先頭に四角が描かれた

四角の色を変えたい場合は「border-left」の「#777」の値を変えます。RGB値やカラーネームで指定してください。また「8px」の数字を変えることで、四角形の横幅を調整できます。文字の大きさは「font-size」で変更しましょう。そのほかの部分については、CSSの資料を参照してください。

見出しの装飾パターンを追加する

さきほど作成した見出しを元に、ほかのパターンを作ってみましょう。記事や見出しの役割によって使い分けると便利かもしれません。

まずはCSS編集画面を開き、以下のCSSを追加してブログに適用してください。

.dottedline{
border-bottom: 1px #777 dotted;
}
.rect{
border-top: 1px #777 solid;
border-bottom: 1px #777 solid;
border-right: 1px #777 solid;
}
.fill{
background: #eee;
}
.fillrect{
background: #eee;
border-top: 1px #777 solid;
border-bottom: 1px #777 solid;
border-right: 1px #777 solid;
}

記事作成画面においてHTMLモードでh4タグを記述する際、上記で作成したクラスを追加します。

<h4 class="dottedline">破線の見出し</h4>
<h4 class="rect">矩形囲みの見出し</h4>
<h4 class="fill">矩形塗りつぶしの見出し</h4>
<h4 class="fillrect">罫線付き矩形塗りつぶしの見出し</h4>

これで見出しが以下のように装飾されます。

 
追加された見出しのバリエーション

ポイントは、最初に設定したh4タグをベースにしている点です。上下左右の空きや四角の色などがそのまま使われているのがわかりますね。h4タグのCSSを修正すると、ほかのバリエーションにも修正が反映されます。これにより、見出しのバリエーションを増やすことが可能です。

ただ実際には見出しのバリエーションを使うことはそれほどなく、よく使うデザインをh4タグにまとめておいたほうが便利でしょう。たとえばこのブログで使っている見出しは、以下のような感じです。

h4{
font-size: 18px;
font-weight: bold;
margin: 5px 0;
padding: 5px 0 5px 10px;
background: #eee;
border-top: 1px #777 solid;
border-bottom: 1px #777 solid;
border-left: 8px #777 solid;
border-right: 1px #777 solid;
}

バリエーションについては、あくまでも「こんなやり方もある」程度にとどめておいてください。

スポンサードリンク