Bloggerの見出しHタグのCSS装飾

2014年5月21日水曜日

Blogger css

t f B! P L

Bloggerのシンプルデザインは見出しが寂しい

Bloggerのフォントを変え、Boostrapを適用してカスタマイズしてきました。今度は見出し部分を装飾しようと思います。Bloggerのシンプルデザインを使用していますが、見出しが寂しい限りで読みにくいので変更します。


見出しを変えるにはどのhタグを変更すればいいのか

見出しを変更する場合、どのhタグを変更すればいいのか調べてみると、詳しく説明されているブログがありました。こちらを参考にしました。

Dishes-Dishes
Blogger:見出し設定(5)どのHタグの見出しを変更するか?

Bloggerでは、hタグは以下の部分に使用されているようです。


  • h1:ブログタイトル
  • h2:日付ヘッダーとガジェットタイトル
  • h3:投稿タイトル、エディター「小見出し」
  • h4:コメントタイトル、エディター「準見出し」
  • h5以下使用なし

今回の変更点は以下の通り。


  • 日付ヘッダーのh2タグの文字サイズを小さく・背景色なしに
  • 投稿タイトルh3の装飾
  • 準見出しh4の装飾
  • ついでに、投稿文の行間を広げる

日付ヘッダーh2の変更

日付ヘッダーh2タグの変更をします。まず、背景色をなくします。こちらは標準の機能で変更できます。テンプレートデザイナーで上級者向けを選択し、日付ヘッダーを選ぶと、背景色を変更できます。こちらをブログの背景色に一致させます。



文字の大きさは標準機能で変更できないので、テンプレートデザイナー/上級者向け/CSSを追加で変更します。


こちらに以下のCSSを追加します。

h2.date-header {

 font-size: 16px;

}

これで、日付ヘッダーの文字サイズを小さくすることができます。
h2.date-headerとしたのは、h2タグはガジェットタイトルでも使用されているので、こちらを変更しないために日付ヘッダーを指定しています。

投稿タイトルh3の装飾

続いて、投稿タイトルh3を装飾します。こちらは標準機能で変更できないため、テンプレートデザイナー/上級者向け/CSSを追加で変更します。こちらに以下のCSSを追加します。

h3 {

 position: relative;

 color: #111;

 background: #ccc;

 background-image: -webkit-linear-gradient(#ccccff, #99ccff);

 background-image: -moz-linear-gradient(#ccccff, #99ccff);

 background-image: -o-linear-gradient(#ccccff, #99ccff);

 background-image: -ms-linear-gradient(#ccccff, #99ccff);

 background-image: linear-gradient(#ccccff, #99ccff);

 font-size: 30px;

 line-height: 1;

 margin: 10px -10px 10px -20px;

 padding: 15px 5px 10px 10px;

}

h3:after {

 content: "";

 position: absolute;

 top: 100%;

 height: 0;

 width: 0;

 border: 5px solid transparent;

 border-top: 5px solid #777;

 left: 0;

 border-right: 5px solid #777;

}

h3:before {

 right: 0;

 border-left: 5px solid #777;

}


インターネット上にはh2タグの装飾サンプルがたくさん掲載されています。今回は、以下のサイトを参考にさせていただきました。

webpark
CSSの擬似要素を使った見出しデザイン


準見出しh4の装飾

続いて準見出しの装飾の変更です。初期設定では文中の見出しが目立ちません。よってブログが読みにくいので、見出しを変更します。私はBloggerのエディタでブログ記事を書いていて、見出しには準見出しを使用しています。この準見出しを設定すると、標準ではh4で出力されるので、そちらのCSSを変更します。追加するCSSは以下の通り。

h4 {
position: relative;
font-size: 24px;
line-height: 1;
margin:30px 0px 30px 0px;
padding: 20px 5px 10px 20px;
border-left: 10px solid #ff66cc;
}
h4:after {
content: "";
position: absolute;
bottom: 0px;
left: 0;
height: 0;
width: 100%;
border-bottom: 1px dashed #555;
}

最後に、投稿文の行間を広げます

標準のデザインでほかに気になっていたのが、投稿文の行間でした。狭いので読みにくいのです。ある程度、行間を広げたいところですよね。そこで、以下のCSSを追加しました。


div.post-body {

 line-height: 180%;

}

.pst-bodyで投稿文のdivを選択し、行間を180%に設定しました。

変更結果

カスタマイズして結果を見てみるとこんな感じです。


色のセンスがどうとかいろいろありますが、とりあえずブログは読みやすくなったかなと思います。ブログのデザイン変更は面倒で、ついつい標準や選択できる既存のデザインでいいやと思ってしまいがちですが、変更がうまくいくと楽しいし、ブログを書く気力も向上するのでおすすめです。

このブログを検索

ブログ アーカイブ

QooQ