はるなぴログ

WEBサイト作成技術研究

見出しを見栄えよくするCSS設定

見出しを見栄えよくするCSS設定を備忘録として書いておきます。

はてなブログテーマInnocentを使っています。InnocentはCSS編集をして自分好みに改造することが前提で作られています。

Innocetデフォルトの見出しは、ただ単にフォントサイズが大きくなっただけです。へたをすると太字と間違われる恐れがあります。

ですので見出しの色を緑色に変更していましたが、もっと見出しらしく分かりやすいようにCSSを編集し改造してみたいと思います。

f:id:hal7pi:20180728082809j:plain

はてなブログでCSS設定を変える方は外部CSSファイルを利用するのが楽です。こちらの記事を参考にしてみてくださいね。CSSファイルの上書き一発で見栄えを確認することが可能になります。

www.halu7.com

見出しレベル2(H2)のCSS設定

見出しレベル2(H2)は記事タイトルに次ぐ重要度なのである程度目立たせる必要があると考えました。

以前の見出しレベル2はInnocetの黒色を単に緑色に変えただけでした。こんな感じですね。

f:id:hal7pi:20180728083238p:plain

これだけでも太字と間違われる可能性は大分減ったとは思います。それに何と言ってもCSSが簡単に書けますしね。こんな感じです。簡単です。

h1, h2, h3, h4, h5, h6 {color:#2d8c3c}

今回は本格的に見出しに見えるように変更します。まずボックス風にして文字を白抜きにしてみましょう。背景色は紺色ベースにしてみました。CSS設定は以下のようにします。

h2 {
color: #fafafa;
background: #1e50a2;
line-height: 1.3;
font-weight: 700;
position: relative;
display: block;
box-sizing: border-box;
margin: 0 0 30px -40px;
padding: 10px 15px 10px 45px
}

結果は…アレ?ヘッダー画像の下のサブタイトルがH2タグで囲われていたんですね。

f:id:hal7pi:20180728083313p:plain

これはダメです。CSSを書き換えます。

.entry-content h2 {
color: #fafafa;
background: #1e50a2;
line-height: 1.3;
font-weight: 700;
position: relative;
display: block;
box-sizing: border-box;
margin: 0 0 30px -40px;
padding: 10px 15px 10px 45px
}

entry-contentの子要素のH2タグに限ることでヘッダー画像下のH2タグにはCSSが効かないようになります。

f:id:hal7pi:20180728083355p:plain

このままでもいいのですが今回は更に吹き出し風の下側三角マークが表示されるようにCSSを書き換えてみましょう。以下のCSS設定を追加します。

.entry-content h2:before, .entry-content h2:after {
position: absolute;
bottom: -10px;
left: 50px;
border-top: 10px solid #1e50a2;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
content: ""
}

これで吹き出しが下側に表示されるようになります。

f:id:hal7pi:20180728083404p:plain

うん、最初に比べればすごく見出しらしくなりました!

表示確認はスマホ、タブレットでも行いましょう

CSSを変更した時はPCだけでなく、スマホやタブレットでも表示を目視して確認するようにしましょう。

前にも書きましたが、日本でのスマホ、タブレットのシェアはiPhoneとiPad(iPad Pro)が圧倒的です。なので、個人ブロガーがスマホやタブレットをひとつだけ持つとしたらiPhone、iPadがお勧めです。

もしiPhoneやiPadの実機を持っていない場合はChromeブラウザのデベロッパーツールを使いましょう。使い方はこちらの記事でも紹介していますのでご参照ください。

www.halu7.com

見出しレベル3(H3)のCSS設定

見出しは見出しレベル2(H2タグ)と見出しレベル3(H3)タグまでが非常によく使われることになると考えています。

なので、見出しレベル3のCSS設定もよく考えましょう。見出しレベル4(H4タグ)以降(特にH5タグやH6タグ)は使用頻度がかなり下がると思います。

あ!ちなみに文字の大きさを変えるために見出しを使うのは止めましょうね。(見出しレベル2の下にいきなり見出しレベル4を使わないなど)

見出しはあくまで文書の構造に沿って入れ子にして設定していきます。SEOの観点からも大切なことです。

h3はチェックボックス画像を頭に置いた見出しとしてみます。まずチェックボックス画像をはてなフォトライフに登録します。

はてなフォトライフを選択します。

f:id:hal7pi:20180728084240p:plain

用意しておいたチェックボックス画像をアップロードします。

f:id:hal7pi:20180728084328p:plain

ファイルを選択します。

f:id:hal7pi:20180728084409p:plain f:id:hal7pi:20180728084420p:plain

アップロードボタンを押すのを忘れずに!

f:id:hal7pi:20180728084451p:plain

チェックボックスにチェックを入れ「ブログに貼り付ける」をクリックします。

f:id:hal7pi:20180728084550p:plain

HTMLタグをコピーアンドペーストします。

f:id:hal7pi:20180728084650p:plain

<a href="http://f.hatena.ne.jp/hal7pi/20180710180137"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/h/hal7pi/20180710/20180710180137.png" alt="20180710180137"></a>

この中からsrc以下のURLを抜き出します。

https://cdn-ak.f.st-hatena.com/images/fotolife/h/hal7pi/20180710/20180710180137.png

これを使ってチェックボックス画像をCSSに記述します。

h3 {
color: #002177;
border-bottom: 1px dotted #6d9ab7;
line-height: 1.4;
font-weight: 700;
margin: 0 0 20px;
display: block;
box-sizing: border-box;
padding: 15px 10px 10px 50px;
background: url("https://cdn-ak.f.st-hatena.com/images/fotolife/h/hal7pi/20180710/20180710180137.png") left center no-repeat
}

背景画像を指定するURLに先ほどの画像ファイルを指定します。

background: url("ここに画像のURLを入力します") left center no-repeat

さて表示を確認してみましょう。

f:id:hal7pi:20180728084720p:plain

うん、いい感じですね。iPhoneやiPadもOKです。

f:id:hal7pi:20180728084733p:plain

見出しレベル4(H4)のCSS設定

見出しレベル4(H4タグ)は使用頻度が下がるとは思います。しかし全く使われないことはないでしょう。

うすい青の背景色に濃い文字のボックス表現としてみました。また角はborder-radius: 5pxで丸めてみました。

h4 {
color: #002177;
background: #e5ecf1;
border-radius: 5px;
padding: 8px;
margin: 0 0 20px;
display: block;
box-sizing: border-box;
font-weight: 700;
line-height: 1.4;
font-size: 1.3rem
}

こんな感じです。

f:id:hal7pi:20180728085243p:plain

まとめ

今回追加したCSS設定をまとめておきますね。

.entry-content h2 {
color: #fafafa;
background: #1e50a2;
line-height: 1.3;
font-weight: 700;
position: relative;
display: block;
box-sizing: border-box;
margin: 0 0 30px -40px;
padding: 10px 15px 10px 45px
}

.entry-content h2:before, .entry-content h2:after {
position: absolute;
bottom: -10px;
left: 50px;
border-top: 10px solid #1e50a2;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
content: ""
}

h3 {
color: #002177;
border-bottom: 1px dotted #6d9ab7;
line-height: 1.4;
font-weight: 700;
margin: 0 0 20px;
display: block;
box-sizing: border-box;
padding: 15px 10px 10px 50px;
background: url("https://cdn-ak.f.st-hatena.com/images/fotolife/h/hal7pi/20180710/20180710180137.png") left center no-repeat
}

h4 {
color: #002177;
background: #e5ecf1;
border-radius: 5px;
padding: 10px;
margin: 0 0 20px;
display: block;
box-sizing: border-box;
font-weight: 700;
line-height: 1.4;
font-size: 1.3rem
}

文字色や背景色などカスタマイズしてご自由にお使いくださいませ。

チェックボックス画像は直リンクしないで使ってくださいね!