はてなブログを簡単カスタマイズ！②見出しのデザイン変更編

■始めに

ブログのデザインをあれこれと変更するのは楽しいですね。しかし、正規のメニューとして提供されているカスタマイズ機能の範囲は意外と限定されているので、自由自在というわけにはいきません。
しかしはてなブログでは、適用するスタイルシートを編集することができるので、スタイルシートの知識があれば、相当にマニアックなデザインカスタマイズが可能になります。

■コピペで大丈夫！

そう言われてもスタイルシート？何それ？という方も、安心してください。最初はコピペでも、いろいろ試している間に、どこをどう変えればデザインがどうなるのかは、だんだんと分かってきますので。

ということで、今回は記事にメリハリを付けたり読みやすくするために必須の「見出し」のデザインをカスタマイズする方法をまとめてみます。

なお、本記事の記載内容はPC向け画面での方法です。レスポンシブデザインを適用することでスマホ向けにも同じように表示されます。レスポンシブデザインについては、こちらの記事を参照ください。

■見出しの基本

カスタマイズ方法の前に、まずは「見出し」の基本を整理しておきたいと思います。

はてなブログで普段使う見出しには「大見出し」「中見出し」「小見出し」の３つがあります。

種類	はてな記法	htmlタグ
大見出し	*	h3
中見出し	**	h4
小見出し	***	h5

「h3」～「h5」の意味そのものは、今はあまり深く考えなくても大丈夫です。

■実際にやってみましょう

では、実際にスタイルシートを適用してみましょう。次の文字列（コード）をひとまずコピーしてください。

.entry-content h3{
color: #ffffff;
background: #000080;
border-radius: 5px;
padding: 20px 20px;
}

では次に、ダッシュボードから「デザイン」のメニューを開き、スパナのアイコンを選択してください。「デザインCSS」の欄に、先ほどコピーしたコードを貼り付けます。

貼り付けた後は「変更を保存する」のを忘れないようにしてくださいね。そうすると…次のイメージのように、見出しのデザインが変わりましたでしょうか？

見出し

先ほどのコードをもう一度ご覧ください。「entry-content h3」の「h3」というのが大見出しを意味しています。中見出し、小見出しの場合はそれぞれ「h4」「h5」に対応しているというわけです。
スタイルシートのコードを変えてやると、デザインも変わっていきます。

■色の指定に関して

コード中に「#ffffff」や「#000080」といった記述が登場していますが、これが色の指定を行っているものです。
「カラーコード」などで検索すると、いろいろなサイトが出てくると思います。参考に一つリンクを掲載しておきます。

■応用：デザインのバリエーション

それでは、応用編としてさまざまなデザインのバリエーションを紹介します。

白抜き

.entry-content h3{
color: #ffffff;
background: #000080;
padding: 10px 10px;
}

背景色を指定するとともに、文字の色を白にすると、白抜きの四角い見出しになります。「color」が文字の色、「background」が背景色ですね。「padding」の後ろの数値を変更すると、上下の幅がそれぞれ変わります。

白抜き・角を丸める

.entry-content h3{
color: #ffffff;
background: #000080;
padding: 10px 10px;
border-radius: 10px;
}

「border-radius」を追加すると、角が丸い帯になります。後ろの数値を変更すると丸みを変更することができます。

下線

.entry-content h3{
color: #3f3f3f;
padding: 10px 15px;
border-bottom: 3px solid #000080;
}

下線付きの見出しです。「padding」の値で余白、「border-bottom」の値は太さの調整です。

下線（点線）

.entry-content h3{
color: #3f3f3f;
padding: 10px 15px;
border-bottom: 3px dotted #000080;
}

点線の下線付きです。「dotted」が点線を意味しているわけですね。

下線（二重線）

.entry-content h3{
color: #3f3f3f;
padding: 10px 15px;
border-bottom: 3px double #000080;
}

もうお分かりですね、「double」が二重線の意味です。

上下線

.entry-content h3{
color: #3f3f3f;
padding: 10px 15px;
border-top: 3px solid #000080;
border-bottom: 3px solid #000080;
}

「border-top」をセットにすると、上下に線が付きます。

下線+左線

.entry-content h3{
color: #3f3f3f;
padding: 10px 15px;
border-left: 10px solid #000080;
border-bottom: 3px solid #000080;
}

「border-left」を付けるとこんな感じになります。

■だいたい分かってきましたよね？

最後に、フォントの変更です。
次の一文を入れて、フォントサイズを指定することができます。

font-size: 28px;

何も指定しなければ見出しのフォントは太字ですが、次の一文を入れると普通の文字になります。

font-weight: normal; 

コードと照らしてご覧になると、だいたい分かってくるのではないでしょうか。意外と簡単なものですよね。
ちなみに筆者は、こちらの記事を参考にさせていただきました。ありがとうございます。合わせてご覧になると、さらに理解が深まると思います。

■最後に

いかがでしょうか？見出しが変わるだけで、ずいぶんと印象も違ってきますよね。コピペと少しの手直しだけでも案外簡単にカスタマイズできるので、ぜひ試してみてください。