コピペで目次と見出しをカスタマイズ～自分好みのブログをつくろう～
ブログの記事を読みやすくするシリーズ第３弾！
「目次と見出しのカスタマイズ」
それでは初めていきましょう～！
目次の作成方法
まず、そもそも目次や見出しを作るメリットですが、
- 単純に見やすい！記事が自分にとって有用かどうかの判断基準ができる
- 読みやすさが上がるので、サイトのリピーターが増える（アクセスアップ）
- 結果として滞在時間が増え、サイトの評価UP。google検索順位があがる
ブログを始めたばかりなので、2 と 3 はまだまだ実感できてないですが、読みやすさが増えるというのは間違いないです！なので是非活用してください！
見出しを作成
「はてなブログ」の目次は「見出し」で作られています。
なので、見出しを冒頭の目次で一覧化することで、記事の内容を予想しやすくなります。また、興味がある目次をクリックすると記事の該当部分に飛んでくれる、という機能もついてます！
※心理学的に、「内容を予想させる」というのはより文章に意識を向けさせるのに重要です。予想したからこそ結果が気になる。アニメの予告を見て次回の放送が待ちきれなかったことはありませんか？
はてなブログでは
- 大見出し
- 中見出し
- 小見出し
の3種類があります。
この3種類を全部使わなくてはいけない、わけではないです。
僕は基本的には、大見出しと中見出しを使っています。
まず初めに
やり方は2つあります。
- 記事を作成しながら見出しを追加していく
- 見出しを作ってから、それに沿った記事を作成する
僕は最初に見出しを作ってから記事を書き、途中途中で見出しも変えていくスタイルでやってます。
まず、やり方は
といった具合で、見出しを書いていきます。
そのあとに、見出し予定の文章を選択し、それぞれ左上の「見出し」で大・中・小の選択を行っていきます。
全てに見出しを割り振ったら、試しにプレビューで確認してみましょう。
僕の場合は、見出しをカスタマイズしていますので、こんな感じです。
初期設定のままだと単調なので変えたい、って方はその方法も後程説明します。
あとは簡単
この後は、簡単。2点のみです。
- 目次を入れたい場所を選択
- 目次のアイコンをクリック
選択したところに、contentsという文字が入力されると思います。
ここでプレビューを見てみましょう。完成です。
目次のカスタマイズ
今回は3つのポイントをお伝えします。
- 目次にタイトルを入れる方法
- 目次に番号を入れる方法
- 目次の背景色を変える方法
目次にタイトルを入れる方法
上記の自分のIDをクリックし、「デザイン」を選択し「カスタマイズ」のページへ行き、一番下の「デザインCSS]をクリックします。
赤い枠のところにコードを追加していくことで、ブログのカスタマイズができていきます。
.table-of-contents:before{
content: “目次”;
font-size: 120%;
font-weight: bold;
}
content: “目次”;
font-size: 120%;
font-weight: bold;
}
「目次」のところは好きな言葉にしましょう！
これを貼り付けして保存すればOKです＾＾
目次に番号を付ける
目次に番号を付ける場合のコードです。これもデザインCSSに追加して保存すればすぐ反映されます！
.table-of-contents li,
.table-of-contents ul{
list-style-type: decimal;
}
.table-of-contents ul{
list-style-type: decimal;
}
※「目次にタイトルを入れる」のコードとは2行ほど行間を開けましょう
背景色を変える
デフォルトの目次はちょっと地味な色が使われています。
やはり目次は一番最初に視野に入るところ。目立つ色に変えたい方もおおいはずです！
backgroundというのが背景色のことです。
- 黄色➡#ffff00
- 青色➡#0000ff
- 緑色➡#008000
もっと他に色を検討したい方は
WEB色見本 原色大辞典 - HTMLカラーコードにて100種類以上のってますので
参考にしてください！
見出しのカスタマイズ
デフォルトだとやっぱり味気ない・・
そう思われた方向けのデザインです！
ただ、これは色々種類があって、のせるとかなりの
ボリュームかつ見づらくなってしまうので、
いいサイトをご紹介します
➡が大事？コピペで使える見出しデザイン19選！【はてなブログ】 - deCo..boCo..
スタイリッシュなデザインも多いので是非参考にしてください！
※大見出しと中見出しそれぞれ導入する必要があります。
「大見出し➡h3」「中見出し➡h4」「小見出し➡h5」全て一緒でもバラバラでもいいので登録してください＾＾
まとめ
色々なサイトを見て回ると、カスタマイズの際のhtmlは色や線の種類など自力で変えられれば、あとはコピペで大体いけるな、といった印象でした。
なので、どちらかといえば、コンテンツ（記事）の質に力を入れるほうがいいなと思います。まだまだ全然僕もアクセスが集まってないんですけどね・・・（笑）
がんばっていきましょう！
カスタマイズ記事はほかにもあるので、もしよかったら参考にしてください！
もし参考になったら「はてなブックマーク」のクリックお願いします！＾＾
えいと
