読みやすさアップに必須!はてなブログの見出しを変える方法
ブログでアフィリエイトをする場合、ブログの見た目も重要な要素です。そこで引き続き、「ブログ初心者こそ、絶対に変えておきたいもの」を見ていきます。
「変えるべき度1位」のヘッダーの画像の続く第二位は「見出し」です。「一度コードを貼り付けるだけ」という簡単な操作で、ブログの見た目をグッとアップできます。
前後を見比べて効果をチェック
文章に区切りを設けて読みやすくできる見出しは、多くのブログサービスで簡単に挿入できます。はてなブログでも例外ではなく、見出しにしたい段落内をクリックして、画面左上から見出しを選ぶだけで設定できます。
ただしこの見出しは、必ずしも最初から見栄えの良いものになっているとは限りません。特にシンプルなテーマ(デザイン)は、利用者自身がある程度手を加えることが前提となっているため、最初に設定されている見出しも非常にシンプルな場合も多くあります。
ちなみに以下は、見出しを使って作成したテスト記事です。テーマの初期設定の状態で「大見出し」と「中見出し」を使っているのですが、見分けがつきにくくあまり読みやすいとは言えない状態です。
一方こちらは、大見出し、中見出しのそれぞれを変えた状態です。見出しを変えただけですが、見た目の印象がかなりアップすることがわかります。
はてなブログで見出しを変更する
見た目の印象が良くなるように見出しを変えていきましょう。はてなブログには、コピーするだけで見出しの設定を変えられる便利なコードを公開しているWebサイトがたくさんあります。
私自身もお世話になった便利なWebサイトを紹介しつつ、変更時に注意したいポイントを紹介します。
※2019年3月追記
この記事の書いた際、見本のサイト作成に参考にさせていただいたサイトは残念ながらリンクが切れてしまったので、私が他のブログでお世話になっている見出しの変更に便利なサイトを紹介します。
コードの使用時のポイントも丁寧に書いてあるので、ブログに不慣れな人でも無理なく利用できる点もありがたいサイトです。
コードをコピーして貼り付ける
上記のWebサイトには、見出しの見本と一緒にコードが掲載されているので、使いたい見出しのコードをコピーして、ブログの編集画面で貼り付けましょう。
貼り付け場所は、ブログのデザイン設定画面(表示方法はコチラで紹介)にある「デザインCSS」です。
「デザインCSS」内にすでに何かしらの文字がある場合、それを消さないようにして上または下に貼り付けましょう。下図の場合、「デザインCSS」の赤で囲んだ部分が見出しのコードです。大見出しと中見出しの2種類を変えるため、2つのコードを貼り付けています。
見出しの大きさは、下の図の緑の囲み部分でわかります。上の方は「h3」(大見出し)、下の方は「h4」(中見出し)に変更しています。
コードを貼り付けたら、画面上部の「変更を保存する」をクリックして保存するだけで見出しの変更は完了です。
◆色の変更もできる
図の例では色は変更していませんが、必要であれば色の変更もできます。上記のサイトのコードには、色を変えたいときの変更箇所も詳しく書いてあります。一度コードを表示してみるとすぐにわかります。
以下のような色番号を紹介しているサイトで番号をチェックして、見出しのコード内の色部分を変更しましょう。
見出しはプレビューでチェックする
なお、こうして変更した見出しのデザインは、記事作成時の「編集見たまま」画面では反映されません。「プレビュー」をクリックして、プレビュー表示してみると、見出しが変更されていることがわかりますので確認してみましょう。
見出しデザインは他にもある
コピーで使える見出しのコードを提供しているWebサイトは多くあります。それぞれのサイトで、異なるデザインの見出しが紹介されているので見出しのデザインにこだわりたいときは、いろいろなサイトをチェックしてみるのもおすすめです。