こんにちは。
ぽこです。
やりたかったことの一つが!!
ついにできました✌️☺️
昨日のページに入れてみました。
↓これはスクショですが上にある「ページ」をクリックしてもらうと
昨日の記事に飛びます🎵
追記：
もくじ、あれやこれやといじってみまして最初に作成したもの(↓の画像のもの)から少し変更しました。しばらく新しいバージョンを使っていきたいと思います。
目次作成にあたりこちらの記事を参考にさせていただきました。ありがとうございます😀
最難関!!
とまでは言いませんがとにかく難しかったです😭
その分、達成感はすごい😍
もちろん、まだまだ改善の余地はありますが
とかく長くなりがちな記事をある程度ブロックに分けて読んでもらえるようになる🎵😀
この作業を通じて
記事を書くには
「大見出し」→「中見出し」→「小見出し」のブロックに分けながら
構成していくことの大事さを痛感しました。
それでも目次をつけることによって
ただズラズラと上から順番に読んでもらうしかなかった私の長い記事が
◉読みたい箇所、必要な箇所にに飛んでもらいやすくなる♪
ひとまず、はてなブログの中で目次を設定するやり方は
とても簡単でしたのでそれについてここでは触れますね。
はてなブログの記事中に「目次」を設定するには？
まず一番大事なことは
編集の際に「大見出し」→「中見出し」→「小見出し」のブロックに分けながら
記事を構成していくこと
これに尽きると思います。
３つの「見出し」を作る必要はないのかもしれませんが
(すみません、これについてはまだわかりません。
これから順次過去の記事で目次がつきそうなもの、つけた方が読みやすくなるものを編集し直すつもりでいます。
今、設定しているCSSが常に「大見出し」からでないと目次化しないのかはまだ試していません。
はっきりとわかってきましたらまたご報告しますね。)
私はなるべく構成を考えながら
ブロック分けされた記事になるよう努めるようになりましたが
でももちろんいいと思います。
目次を作る上で重要なことは記事が「見出し」に分かれていること です。
昨日の私の記事の編集ページです↓
編集の左上
まず①で「見出し」を作る
見出しに分かれた記事が出来上がったら
目次を入れたい箇所にカーソルを持っていき
(昨日の記事でいうと「大見出しの上」)
↓
カーソルを合わせたら②「目次ボタン」を押す
すると編集画面では↓のような[:contents] という文字が入るはず
これがプレビュー画面で見ると
こうなるのです。
あっ!!
でもこれはCSSに書き加えたのでこうなりました。
管理ページ「デザイン」→「カスタマイズ」→「デザインCSS」のところですね。
目次をカスタマイズするためのCSSのコードを紹介してくださってる方がたくさんいらっしゃいます。本当に感謝です😍
たくさんの方々のコードを参考にさせていただきながら自分の好みの色や線に変えたりしました。
これが一番大変でした!!
ちょこっといじっては「テスト用ページ」で試したり。
でも、目次しかいじってないはずなのに全体が崩れたり
なぜかグローバルメニューが消えたり...
ここ１週間くらいはそんなことの繰り返しでした😭
ひとまずこれ、というものができましたので昨日の記事で試してみました。
最初にお話ししたようにまだまだ改善の余地はありますのでもう少し見やすくしていけたらな、と思っています。
ただ、少し変えるだけで本当に一苦労でしたので
使用させていただいたコードをそっくりそのままこちらで紹介することはしません。
私自身がコードを書くことができないのに
それをしてしまったらやっぱり失礼な気がするのです。
調べると本当にたくさんの方々が細やかに記してくださっていますのでどうぞそれらの方々のコードを参考になさってください。
一苦労でしたが目次が設定できて大満足です🎵
