渋谷で働く営業本部長のブログ

渋谷で働く営業本部長のブログ

渋谷で働く営業本部長のブログ

はてなブログ:目次の作り方とカスタマイズ方法

f:id:ss17935:20181215144845j:plain

 

他の方々のブログを読んでいると皆さん目次をつけていますね。

あれは記事の内容がひと目でわかって良いなぁとずーっと思っていました。

自分には難しいと思っていたのですが、ググってみると簡単そうだったのでやってみました。

こちらもログに残しておきます。

ちなみにこちら↓がこの記事の目次です。

 

目次を作るには見出しを使う

はてなブログには「見出し」という機能があります。(今まで知りませんでした。)

私なりの考えですが、まずはブログの目次(見出し)を書いてみてください。

そしてその目次を「見出し」にしていくというやり方が簡単です。

目次にしたい項目を選んで左上の「見出し」という部分をクリックするとドロップダウンリストが出てきます。

 

f:id:ss17935:20181215182049p:plain

 

ここで「大見出し」「中見出し」「小見出し」のいずれかを選ぶだけです。

「見出し」にすると、ちょっと太字になってくれます。

 

はてなブログの目次機能

はてなブログには目次の機能もあります。

この機能を使うと「見出し」を自動で目次にしてくれます。

やり方は本当に簡単。

目次を挿入したい部分にカーソルを合わせて、上部にある、箇条書きのようなボタンをクリックするだけです。

するとその部分に [:contents] というのが挿入されます。

 

f:id:ss17935:20181215182236p:plain

 

何のこっちゃと思いますが、プレビューで見るとしっかり目次になっています。

 

f:id:ss17935:20181215182457p:plain

 

見出しをかっこよくカスタマイズ

標準の「見出し」は至ってシンプルです。(使っているテンプレートに依存するかもしれません。)

これでは味気ないので、もっとかっこいい見出しにしたいと思います。

しかーし、私は CSS とか、書くことができません。

コピペで何とかしなければ...という事で、こちらのサイトにお世話になりました。

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

こちらから気に入ったデザインを選んで、そのコードを、

「デザイン」→「カスタマイズ」→「デザインCSS

にコピーするだけです。

 

目次をかっこよくカスタマイズ

目次も標準だと味気ないのでカスタマイズ。

以下のサイトから コードを「デザインCSS」にコピーさせて頂きました。↓

はてなブログでブログの目次、字の種類、大きさ、行の間隔、カスタマイズをしたよ - ライターアテナミの頭の中

コピー後、色合いと文字の大きさを微調整し、「中見出し」を非表示化しました。

結構スッキリして、見やすくなったと思います。↓

 

f:id:ss17935:20181215182934p:plain

 

自分的には目次のカスマイズは結構苦労したので、最終的に修正が少ないコードのコピペのみに落ち着きました。

本当は、文字位置とか、文字色とか、枠の大きさとか、変えたかったんですが。

しっかり勉強して、おいおい直していきたいと思います。

 

↓ ランキングに参加しています。よろしければポチッとして下さい。

にほんブログ村 ブログブログ ブログノウハウへ