はじめに
ブログを書くからには、読んで下さる方にこちらの意図を正しく伝えたいものです。
また、読んで下さる方には、
「読みやすいな」
「わかりやすいな」
と思っていただきたいものです。
そのためには、正しい日本語でちゃんとした文章を書くことがまず第一なのですが、見出しをつけたり、伝えたい言葉を強調したり、という工夫も必要です。
はてなブログの記事エディタにはこのような機能が用意されていて、ある程度のことはこれで事足りてしまうのですが、もうちょっと自分の色を出したいな、と思った時に、ごく簡単な準備をすればカスタマイズできますので、それを少しばかりお伝えしようと思います。
見出しの装飾
デフォルトの状態では、このリストボックスから「大見出し」「中見出し」「小見出し」を選択することによって、
■「大見出し」を選択
サンプル文章
■「中見出し」を選択
サンプル文章
■「小見出し」を選択
サンプル文章
このように指定した文字のサイズが変わるようになっています。
これに、文字のサイズが変わるだけでなく、背景色をつけたり、下線を加えたりしてオリジナルな見出しになるように変更してみましょう。
理論的には、見出しの種類を選択した時に、
■ 大見出し ： h3
■ 中見出し ： h4
■ 小見出し ： h5
というスタイルが決まります。そのスタイルに、予め「h3は文字サイズ大」といった設定がしてあるので、それに従って文字のサイズが変わるのですが、オリジナルな見出しに変えるためには、そのスタイルの定義を追加してあげればいいことになります。
具体的に定義を追加する場所は、以下です。
PCで見た時のスタイルとスマホで見た時のスタイルは別々に定義されていますので、片方で良い場合は下記のどちらか、両方変えたい場合は下記の両方が変更対象になります。
PCの場合
スマホの場合
ここに定義を追加して、以下のような見出しになるようにしてみましょう。
追加するコードを上で説明した場所にコピペしてみてください。
（注意）
スマホに追加する場合は、下記の「追加するコード」を
<style>
追加するコード
</style>
というように、styleタグで挟んでください。
■「大見出し」を選択
このような矩形を塗りつぶした見出しにします。
サンプル文章
追加するコード
.entry-content h3 {
position: relative;
color: NAVY;
padding: 8px 12px;
background-color: PALEGREEN;
}
■「中見出し」を選択
このような、左端にラインの入った見出しにします。
サンプル文章
追加するコード
.entry-content h4 {
padding: 4px 10px;
color: BLUE;
background-color: WHITESMOKE;
border-left: 8px solid LIGHTPINK;
}
■「小見出し」を選択
このような、２色のアンダーラインを付加した見出しにします。
サンプル文章
追加するコード
.entry-content h5 {
position: relative;
color: BLUE;
border-bottom: 4px solid SILVER;
padding: 8px 10px;
}
.entry-content h5::before {
position: absolute;
top: 100%;
left: 0;
width: 20%;
height: 4px;
background-color: AQUA;
z-index: 2;
content: '';
}
色についてですが、上の追加するコードの「NAVY」「SILVER」といった色の定義部分を変更するだけで、簡単に変えられます。
色の種類については、下記サイトを参考にされると良いでしょう。
文字色を変更したい場合は「color」、背景色を変更したい場合には「background-color」の定義を変更してください。
例えば「大見出し」の文字色がサンプルでは「NAVY」ですが、これを白文字にしたい場合には、
（変更前）color: NAVY
（変更後）color: WHITE または color: #ffffff
とすればOKです。
（色の指定は、名称でも#以下6桁のコードでもどちらでも良いです。私は、文字から色が想像できる名称を使うのが好きですね。）
補足
元からある見出しと連動させたくない場合もあるかと思います。
その場合には、追加するコードの「h4」「h5」「h6」という部分を、他の文字に変えてしまえばOKです。
例えば、「h4xyz」とか、「h4_test」とかですね。
定義だけ追加しておいて、実際に記事で使わないのは全然問題ありませんので、色違いのパターンをいくつか用意しておく、というようなこともできます。
例えば、
「h4_green」背景色が緑色
「h4_yellow」背景色が黄色
「h4_blue」背景色が青色
といった感じです。
ただし、それらを記事に適用させるには、HTMLのコードを直で修正しなければいけません。
次回の説明でその辺りのことを書きますので、参考にして頂ければ、と思います。
まとめ
いかがでしたでしょうか。
諸先輩方のブログでは、もっといろいろなパターンのカスタマイズ方法を書かれている方がおりますので、いろいろと調べてみて、自分なりのオリジナルなカスタマイズに挑戦してみるのも楽しいと思います。
次回は、文章中で強調したい箇所の目立たせ方などをご説明したいと思います。