見出しを修飾してみた ～Blogger テンプレートを作るよ！ (13)～

こんにちはー！

前回の投稿から風邪をひいてしまいまして、しばらく制作日誌を休んでおりました。未だに風邪が完治しないワタクシですが、パソコンする余裕ができてきたので少しずつ再開していこうと思います！

見出しお披露目

前回は見出しのデザインの要件をまとめましたね。まとめるとこうなります。

• 本文との違いを明確にする
• 同じ階層の見出しは同じデザインで統一する
• 上位は印象を強く、下位は印象を弱くする
• 上位と下位のデザイン差を明確にする
• <h2>見出しはそれ以外と明らかに違うデザインにする

それをふまえて、前回からずっと、熱に浮かされながらも考え続けていた見出しのデザインをご覧に入れましょう。

こちらです！

変更した箇所は投稿日時、投稿のタイトル、見出し、小見出し、準見出し、ウィジェット名

その前のデザインと比べてみましょう！

それまでのデザイン

良し悪しは素人の自分だけじゃどうにも判断が付かないので、他の人に見てもらって感想をいただけるなら意見を取り入れていきたいですし、しばらく自分で使っているうちに修正したくなったらまた修正します。

真似したい人向け howto

まず、ブログの設定画面から [テンプレート] を選択し、 [カスタマイズ] ボタンを押します。

テンプレートデザイナーの画面になりますので、その左端で [上級者向け] と書かれているところを選び、さらにその右側の選択肢を一番下の [cssを追加] を選択します。

出現したテキストボックスに以下のコードをコピペします。

.date-header {
}
.date-header span {
color: black;
padding: 0.5em 1em 0.5em 0.5em;
background: #e0e0e0;
border-left: 2px solid #c0c0c0;
border-radius: 0 1em 1em 0;
font-weight: bold;
}
html .post-title {
margin: 0.68em 0 0.5em 0;
padding: 0.5em 0 0.3em 0;
font-size: 1.6em;
font-weight: bold;
border-bottom: 1px dashed #c0c0c0;
}
.post-title a {
font-size: 1em;
font-weight: bold;
}

.post-body h1 {
margin: 1.5em 0 0.5em 0;
padding: 0.2em 0.4em;
font-size: 1.6em;
border-top: 6px double #53a624;
border-bottom: 6px double #53a624;
}
.post-body h2 {
margin: 1.5em 0 0.5em 0;
padding: 0.2em 0.4em;
background: #53a624;
border-top: 3px double white;
border-bottom: 3px double white;
color: white;
font-size: 1.5em;
}
.post-body h3 {
margin: 1.5em 0 0.5em 0;
padding: 0.2em 0.4em;
font-size: 1.4em;
}
.post-body h3:before {
content: "";
display: block;
height: 0.6em;
margin-top: -0.8em;
margin-left: -0.4em;
margin-right: -0.4em;
background: -moz-linear-gradient(left, #53a624, rgba(255,255,255, 0));
background: -webkit-gradient(linear, left top, right top, from(#53a624), to(rgba(255,255,255, 0)));
background: linear-gradient(left, #53a624, rgba(255,255,255, 0));
}
.post-body h3:after {
content: "";
display: block;
height: 0.2em;
margin-bottom: -0.4em;
margin-left: -0.4em;
margin-right: -0.4em;
background: -moz-linear-gradient(left, #53a624, rgba(255,255,255, 0));
background: -webkit-gradient(linear, left top, right top, from(#53a624), to(rgba(255,255,255, 0)));
background: linear-gradient(left, #53a624, rgba(255,255,255, 0));
}
.post-body h4 {
margin: 1.5em 0 0.5em 0;
padding-left: 0.4em;
border-left: 4px solid #53a624;
border-bottom: 1px dotted #53a624;
font-size: 1.3em;
}
.post-body h5 {
margin: 1.5em 0 0.5em 0;
padding-top: 0.2em;
padding-left: 0.4em;
font-size: 1.2em;
background: rgba(0, 0, 0, 0.05);
border-bottom: 1px dotted #c0c0c0;
}
.post-body h6 {
margin: 1.5em 0 0.5em 0;
padding-left: 1.5em;
font-size: 1.1em;
}
.post-body h6:before {
content: "";
display: block;
height: 0em;
width: 0em;
margin-bottom: -1.1em;
margin-left: -1.2em;
border: 0.5em solid transparent;
border-left: 0.75em solid #c0c0c0;
}

html .widget > h2 {
padding: 0.2em 0.4em;
background: #53a624;
border: 3px double white;
text-align: center;
color: white;
font-weight: bold;
font-size: 1em;
}

実は、<h1> や <h5>、<h6> も変更してます。

適宜、色（#53a624になってるところ） とかを書き換えていって、自分好みに変更してください。

せっかくテンプレートを作る気なら

実は、同じ色の設定を使いまわしているところがあります。さらに言えば、テンプレートの設定を上書きしているところもあったりします。このデザインも込みで人様に配布できるテンプレートにするなら、テンプレート内の css を変更してみましょう。

……ということを次回やっていこうと思います。それではまた次回！