はてなブログの目次をカスタマイズしてみた。

はてなブログ無料版でもなるべくかっこよく読みやすいブログサイトにするために、今回は『目次』機能をカスタマイズしていこうと思います(^-^)/

私の場合経験も浅いですし自分の記事が整理できない不安もあるので、まず始めに目次から考えます。

私にとっては目次があることによって効率が上がります。

自分の記事なのに路頭に迷うことがありますので(´Д` )

f:id:koromor:20200219120520j:plain

目次の必要性
- メリット
- アンカーリンクとしての機能
はてなブログの見出し
デザインCSSを編集（コピペでOK）
完成！
さいごに

目次の必要性

メリット

目次があることによって単純にその記事の概要がわかるようになります。

何よりも整理された文章で読みやすく感じるかと思います。

それと検索エンジンで検索した際、はてなブログで目次を設定しておくと設定していない場合と比べて検索結果に表示されやすくなることもあるようです。

アンカーリンクとしての機能

アンカーリンクとはページ内リンクのことです。はてなブログの目次機能では、アンカーリンクでそのページ内での特定の見出しへ即時に移動することができるため、見る側からすると、とても便利ですね。

はてなブログの見出し

見出しを選ぶ

見出しにしたい文字、文章を選んでからどの見出しにするか決定します。

f:id:koromor:20200219123216p:plain

f:id:koromor:20200219123350p:plain

大見出し

大見出しは記事の内容を大きくまとめた見出しに当たります。

中見出し

中見出しは大見出しの下に挿入する、大見出しを細分化する見出しです。

小見出し

小見出しは中見出しの下に挿入する、見出し（目次に表示される文章）としては一番細く細分化する見出しです。

標準

標準は文章として使います。

目次の設置場所

記事中の目次を設置したいところにカーソルを合わせておいて目次のアイコンをクリックすると ” [:contents]” というコードが表示されます。

f:id:koromor:20200219124703p:plain

大見出し、中見出し、小見出しにしている文章は全て拾ってくれます。

ちなみに目次は記事中のどこにでもいくつでも設置できます。

ここまでははてなブログ無料版のデフォルト機能です。

デザインCSSを編集（コピペでOK）

はてなブログの目次機能の使い方がわかったところで、次は少しだけその機能をカスタマイズしたいと思います。

f:id:koromor:20200219152604p:plain — ダッシュボードから

③をクリックするとCSSを書き込む欄が開きます。

もともと記載されている部分には触れず、改行しても構いません。

今後のことも考えて、綺麗にわかりやすく並べましょう。

f:id:koromor:20200219155620p:plain

CSS編集にあたっての注意点

元から記載されているCSSは消さない、いじらない。
必ずバックアップ（PCのメモ帳などにコピー）を取っておく。
何があっても自己責任で。

上記は必ず守ってください！

今後ブログサイトをより一層良いものにしたいと思っているので、デザインCSSの変更、改良などが増えてくると思います。

私も他探りなので、いつも恐る恐るコピー取りながら編集しています（笑）

CSS内の /*○○○○○*/ のところの ○○○○○ は自分の分かりやすいように書き換えても問題ありません。

目次のデザイン関連

.entry-content .table-of-contents {

position:relative;

margin-left: 0;

padding: 15px 10px 15px 55px; /* 枠内の余白(上右下左) */

font-size: 100%; /* 文字の大きさ */

font-weight:bold;

list-style-type:decimal; /*数字以外が良ければ変更 */

background:#fff;

border-top:40px solid #87cefa; /* 「この記事の目次」周りの色 */

border-left:2px solid #87cefa; /* 線の太さ */

border-right:2px solid #87cefa;

border-bottom:2px solid #87cefa;

line-height: 200%; /* 行間 */

border-radius: ６px; /* 角丸にしない場合は不要 */

color:#444; /* 数字（マーク色変更） */

}

目次を目立たせる

.entry-content .table-of-contents::before {

font-family: 'blogicon';

content: "\f039 もくじ";

display: block;

font-size: 130%;

font-weight: bold;

position: absolute;

top: -40px;/*上からの位置調整*/

left: 20px; /*左からの位置調整*/

color: #fff !important;

}