他の方々のブログを読んでいると皆さん目次をつけていますね。
あれは記事の内容がひと目でわかって良いなぁとずーっと思っていました。
自分には難しいと思っていたのですが、ググってみると簡単そうだったのでやってみました。
こちらもログに残しておきます。
ちなみにこちら↓がこの記事の目次です。
目次を作るには見出しを使う
はてなブログには「見出し」という機能があります。（今まで知りませんでした。）
私なりの考えですが、まずはブログの目次（見出し）を書いてみてください。
そしてその目次を「見出し」にしていくというやり方が簡単です。
目次にしたい項目を選んで左上の「見出し」という部分をクリックするとドロップダウンリストが出てきます。
ここで「大見出し」「中見出し」「小見出し」のいずれかを選ぶだけです。
「見出し」にすると、ちょっと太字になってくれます。
はてなブログには目次の機能もあります。
この機能を使うと「見出し」を自動で目次にしてくれます。
やり方は本当に簡単。
目次を挿入したい部分にカーソルを合わせて、上部にある、箇条書きのようなボタンをクリックするだけです。
するとその部分に [:contents] というのが挿入されます。
何のこっちゃと思いますが、プレビューで見るとしっかり目次になっています。
見出しをかっこよくカスタマイズ
標準の「見出し」は至ってシンプルです。（使っているテンプレートに依存するかもしれません。）
これでは味気ないので、もっとかっこいい見出しにしたいと思います。
しかーし、私は CSS とか、書くことができません。
コピペで何とかしなければ...という事で、こちらのサイトにお世話になりました。
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
こちらから気に入ったデザインを選んで、そのコードを、
「デザイン」→「カスタマイズ」→「デザインCSS」
にコピーするだけです。
目次をかっこよくカスタマイズ
目次も標準だと味気ないのでカスタマイズ。
以下のサイトから コードを「デザインCSS」にコピーさせて頂きました。↓
はてなブログでブログの目次、字の種類、大きさ、行の間隔、カスタマイズをしたよ - ライターアテナミの頭の中
コピー後、色合いと文字の大きさを微調整し、「中見出し」を非表示化しました。
結構スッキリして、見やすくなったと思います。↓
自分的には目次のカスマイズは結構苦労したので、最終的に修正が少ないコードのコピペのみに落ち着きました。
本当は、文字位置とか、文字色とか、枠の大きさとか、変えたかったんですが。
しっかり勉強して、おいおい直していきたいと思います。
↓ ランキングに参加しています。よろしければポチッとして下さい。
