キャンプブログのナチュログについてカスタマイズする方法について解説したいと思います。シリーズ化するかわかりませんが第１回目として見出しのデザインのカスタマイズ方法を紹介することにします。
見出しを使ってブログを読みやすく
ブログ記事を書くときに↑にあるような見出しをよく使うようにしています。本や小説では節目ごとに見出しタイトルがあって読みやすくなっていますよね。仕事先の報告書なんかでも同じように文書の区切りとして見出しが使われています。見出しによって文章が整理されるので読みやすいばかりでなく読み返しやすくもなります。
ブログについても同じように読み物と考えると節目ごとに見出しを付けるだけでずいぶんと読みやすいものになります。キャンプブログの場合だとずっと同じ調子で文章が続くよりも例えば文章の区切りとして「１日目」「２日目」といった見出しがあるだけで読み手には状況がわかりやすくなります。
かといってあまりに細かすぎる見出しの配置は逆に読みにくくなりますが、バランスよく配置された見出しがある記事は読みやすいなーと思うのでそんなブログを目指して見出しを付けるようにしています。
本サイトとしてブログを書く時にメインで使っているWordPressでは見出しを付けやすいような実装がされているので付けたい見出しの大きさを選ぶだけで簡単に記事中に見出しを配置することができます。見出しデザインについても有料テーマ「DIVER」だと好きなデザインを選ぶことができるようになっていてカスタマイズが簡単にできるようになっています。
それに対して無料ブログのナチュログでは見出しの配置やカスタマイズをしようとすると手作業が必要になります。どのような作業が必要になるのかを詳しく紹介してみることにします。
見出しを配置するには
見出しは本文に対して文字の大きさやデザインが異なっていれば十分その機能を発揮します。
ナチュログのPC上での記事作成画面では文字を大きくしたり太くしたりカラーを変えたりするコマンドがあるのでこれらのコマンドを使って見出しに使いたい文章（ここでは見出し１）を装飾することができます。
この方法でも本文とデザインが異なっていれば見出しになるでしょう。けれどこれはあまりオススメしない方法です。
視覚的にわかりやすいデザインモードからHTML記述モードに切り替えると「見出し１」の文章の周りには長い記述が付いています。< >の中にあるアルファベット等は「見出し１」に対しての文字の大きさやカラーを表したものでこの記述はブログには表示されないので長くても見た目上は問題ありません。
しかし、これだと見出しを付ける際に毎回コマンドで文字の大きさや太さ、カラーを設定しなければなりません。あとで見出しのデザインを変えようと思ったら全てのこの記述に対して変更していかなければならなくなるし、スマホで記事を書く場合だとこういったコマンド自体がありません。
ナチュログだけに限らずブログ記事に見出しを付けようと思ったら下記のように記述するのが一般的です。
見出し文章の前に<h1>という記述を付けて終わりに</h1>という記述を付けるようにします。hの後に付ける数字は１にすると文字が最も大きくてそれ以降はだんだん小さくなっていきます。
<h1>は記事タイトルになるので特に記述する必要はありません。
記事中の区切りのいいところで<h2>の大見出しを付けるようにし、その中でさらに細かく見出しを付けたい場合に<h3>の中見出しを付けるようにします。
具体的な記述にするとこのようになります。文章の前に<h○>タグ、文章の後に</h○>タグを付けることでブログ上では見出しとして表示されるようになります。簡単な記述なので毎回書いてもいいですが単語登録をしておくとさらにラクに記述できるようになるでしょう。
見出しをカスタマイズするには
<h>タグを付けることで見出しとしての意味を持たせることができたらその見出しのデザインはテンプレートのスタイルシートに記述されているとおりに表示されます。見出しデザインについてはPC上で一度ここを設定しておくだけです。
ナチュログではブログデザインのテンプレートがいくつか用意されていて好きなデザインのものを選ぶことが出来ます。見出しのデザインを変えようと思うとテンプレートページにある「カスタマイズ」をクリックします。
するとそのテンプレートのデザインを決めるスタイルシートが表示されます。かなり長い記述がされていますがその中からh1、h2、h3といった見出しのデザインについて記述されている箇所を探します。
{ }に囲まれた中に書いてある記述がその見出しのデザインについて記述したものです。
上記の場合だとh1（記事タイトル）のデザインはフォントサイズ10pxでフォント太さはnormal、h2（大見出し）h3（中見出し）は特にデザインの指定がありません。
この記述がどういったデザインになるのかを確認してみると、
特に見出しについての記述が無くてもh2、h3はその意味からフォントサイズや太さが付けられていて見出しに見えるようになっています。けれどこれではデザイン的に少し寂しい感じがしますね。なので次にこの見出しにカラーを付けたりラインを引いたりして見やすくデザインするための方法を解説します。
見やすい見出しにデザイン
見出しに背景色や下線が付いたりしてデザインが加わるとよりはっきりと見出しとして理解できるようになり読みやすくなります。
この見出しの場合のスタイルシートの記述をみてみると、
このようになっています。{ }内の文字や行が増えていてそれぞれがデザインを決める記述になっていてかなり自由度の高いカスタマイズが出来るようになっています。
ナチュログの場合はPCテンプレートだけでなくスマートフォンテンプレートに対しても同様のカスタマイズが必要になります。
これらの記述を一から書いたりするのは慣れてないと大変ですよね。何を書けばいいのかわからないし。そんな時は下記サイトがオススメです。サイト内にある見出しデザインの中から好きなものを選んでその記述を自分のスタイルシートにコピペしちゃいましょう。
このサイトにあるものをそのまま使うだけでもかなりわかりやすい見出しになります。それよりさらにオリジナルな見出しを作りたい場合はより詳しい下記サイトを参照してみるといいでしょう。
カラーコードはこちらのサイトに一覧で記載されています。カラーは#のあとに6文字のアルファベットまたは数字で表されます。（例：#000000 → black）
ひとりごと
見出しがあると文章が読みやすくなるので書籍には必ず付いているものです。短文や自分だけが読む日記なら見出しは無くてもいいかもしれませんが同じ日記でも多くの人が読むブログとなれば少しでも読みやすい工夫があってもいいでしょう。
ブログに見出しは無くても構いませんが、今や多くのブログに見出しが付いていて見出しを付けるのが主流になっているので自分好みのデザインの見出しを付けてみるといいかもしれませんね。
↓この記事が参考になったらいいねのクリックをお願いします↓
