はてなブログの「見出し」をカスタマイズしてみた。

酔いどれパパです。

徐々にブログもカスタマイズしていきたいと思います。今日は、見出しをカスタマイズしてみました。見出しは記事の構成が整然として見える１つの工夫だと思います。

見出しのデザインについて

［管理］→［デザイン］→［カスタマイズ］→［{}デザインCSS］でCSS編集に移動します。次に、下記のコード追加してください

【コード】

h3 {

background:#eee;
border-left: 5px solid #20b2aa;
border-bottom: 1px solid#20b2aa;
padding: 2px 2px 2px 5px;
margin: 2px 2px 2px 5px
}

h4 {
background:#eee;
border-left: 3px solid #20b2aa;
padding: 2px 2px 2px 5px;
margin: 2px 2px 2px 5px
}

コードを入力したら「変更を保存」をクリックします。記事内で見出しを使用する際は、一時的に「HTML編集」を選択して<h3>や<h4>囲うとその部分が見出しになります。

例えば、<h3>見出し</h3>とすると下記のように表示されます。

見出し

次に、<h4>見出し</h4>とすると、

見出し

のように表示されます。

ちなみに、はてなブログでは<h1>はタイトル、<h2>はブログの説明文に使用されているとのことです。