今日の記事は、目次をカスタマイズしようと思い立ってから辿った過程についてです。
今まで目次機能をほとんど活用してこなかったのですが、記事が長くなる時などはやはり必要だと思うことがあります。
そこで、目次を使って書いてみた記事もあるのですが、見た目がいまいち。
他の方のブログを見ると、いろいろと工夫されているようで、目次をカスタマイズすることに。
ところで、目次機能を使うということは、大なり小なり見出しをつけることになります。 そうすると、今度は見出しが気になり始めます。
目次同様、見出しも特にカスタマイズしていないので、デフォルトのまま。 これも、見た目がいまいちです。
となると、まずは見出しをカスタマイズする必要がでてきました。
見出しのデザインは、コピペするだけですぐカスタマイズできてしまうという、とても人助けに貢献しているようなサイトさんがたくさんあります。 そんなサイトをあちこち見てまわった結果、見出しの頭にアイコンを表示したデザインにすることにしました。
cssを書き込むページを開き、コピーしたコードを張り付け、「さあ、どうだ！」と思いきや、あるべきアイコンがきちんと表示されません。
ここで、ようやくスタートラインに立った感じです。 はい、まずはFont Awesomeを使えるようにする必要があったわけです。 ということで
Webアイコンフォントを使えるようにする
Font Awesomeを使えるようにする手順や実際の使い方を詳しく説明してくれているサイトさんがこちら（↓）。
上記サイトにはコピーして貼り付けるだけのコードが出ているので、その通りにすればFont Awesomeを使う準備は完了です。
見出しをカスタマイズ
見出しのデザインを決める
見出しのデザインを考えます。 考えると言っても、いろいろなパターンを紹介してくれているサイトがあるので、まずは好みのデザインを選び、コピペして見てみることをお勧めします。 デザインが決まった後、色などを修正すればいいので。
実際にコードをcssに書き込む
上のサイトを参考にして、実際にcssにコードをコピペ或いは書き込みます。ちなみに、上記サイト内でも説明されていますが、はてなブログの場合、大見出し：h3、中見出し：h4、小見出し：h5になります。 h3, h4, h5を書き換えることによって、それぞれの見出しをカスタマイズすることができます。
実際にやってみて
ここまで、実際にやってみました。 その結果、
Font Awesomeについて
サルワカさんのサイトにあるコードをheadに書き込んだわけですが、そのコードを書き込む際に、headに既に似たようなコードがありました。 それを消して、新たにコードをコピペした結果、見出し用のアイコンはちゃんと表示されました。
「できたー」と喜んでいたのですが、自分のブログをよく見ると、記事下に設置した５個のシェアボタンアイコンの内３個が消えています。
さっき消したコードはFont Awesomeの旧バージョンだったらしい。 自分で書き込んでおきながら、すっかり忘れていたようです。
旧バージョンにすると見出し用のアイコンが使えず、新バージョンにするとシェアボタンアイコンが使えない、ということになってしまいました。 使いたいアイコンフォントを探せばいいのでしょうが、それも面倒。 ならばと、旧バージョンと新バージョン両方のコードをheadに書き込みました。 両方書き込む場合ですが、新バージョンコードを上に、次に旧バージョンコードを書き込むと、どのアイコンもちゃんと表示されました（逆のパターンで、旧バージョンコード、その下に新バージョンコードを記入したら、表示されないアイコンがあったので）。
大見出し・中見出し・小見出し
まず大見出しのデザインを決め、設定。 ただ記事によっては中見出しや小見出しも使う場合があり、大見出しをカスタマイズしただけだと、どうも様になりません。 中見出しや小見出しのデザインも合わせてカスタマイズしようとした結果、当初のデザインとはだいぶ異なるものになりました。
最終的にコピペさせて頂いたサイトさんがこちら（↓）。
中見出しのデザインもコピペして使わせて頂きました。 感謝です。
大見出しはボックス系、中見出しはアイコン＋下線使用とし、小見出しは何もせずにデフォルトのままにしました。 但し、記事編集画面上で、小見出しにした箇所を太字にしました（このブログでは、太字にするとアンダーラインが自動で付くようにcssに書き込んであるので、小見出しはアンダーライン付きとなります）。
目次のカスタマイズ
ここまできて、ようやく目次のカスタマイズです。
目次デザインを決める
目次をカスタマイズする方法や目次のデザインを提供してくれているサイトさんが幾つもあるので、まずは気に入ったデザインをcssにコピペしてみましょう。
細かい部分を修正する
今回使わせて頂いたサイトさんがこちら（↓）
あちこちのサイトを参考にさせて頂いたのですが、コピペした後かなり調整してもなかなかうまく表示できず、最終的にこちら（↑）で紹介されているものをcssに貼り付け、微調整しました。
最後に
見出しのカスタマイズから始まり、目次のカスタマイズまでやったので、疲れました。本当は目次内の行間をもっと狭くしたかったのですが、それはまた時間のある時にでもやりたいと思います。
