こんにちは!今回の土日はけっこうはてなブログの細々としたカスタマイズをすることができたナカムラ (@sys_nakamura) です。カスタマイズした内容については今後新たにはてなブログを作るときの備忘として、私の身近にい流人ではてなブログを始めた人への情報共有として書き残しておこうと思います。
さて、今回実施したはてなブログのカスタマイズは「目次」のレイアウト変更です。
目次記法
はてなブログには記事中の見出しから自動で目次を生成してくれる目次記法というものがあります。目次記法の使い方はとても簡単で挿入したい箇所に[:contents]と記述すれば目次が生成されるようになっています。ちなみに編集モードは問いません。
[:contents] と記載した箇所にはこのような目次が自動で挿入されます。
目次のレイアウトを変更する
この目次記法とても便利なのですが、そのままだと例えばテーブルの中に「目次」や「コンテンツ」といった見出しが入らないので今回は少し目次のレイアウトを変更してみることにしました。
私は現在はてなブログ PRO を使っているので、スマホでの表示についてもスマホデザインのタイトル下に記述することでレイアウトを変更することができます。今回の記事では PC・スマホと貼り付けた CSS が少し異なるのでどちらも紹介したいと思います。
参考にさせて頂いた記事
今回のレイアウト変更にあたって参考にさせて頂いた記事は以下の 2 つです。こちらの情報を基に現在の目次レイアウトを設定しています。
PC で表示される目次のレイアウトを変更する
以下の CSS をはてなブログダッシュボードから「デザイン設定」→「カスタマイズ」→「デザインCSS」の中に記述します。
スマホで表示される目次のレイアウトを変更する
スマホで表示される目次のレイアウトは PC のものとは少しだけ異なる CSS を記述しました。こちらは以下の CSS をはてなブログダッシュボードから「デザイン設定」→「スマートフォン」→「ヘッダー」→「タイトル下」に記述します。 (はてなブログ PRO)
スマホの目次レイアウトは上記の CSS を記述するだけで、このようにけっこうな変化が起きます。
まとめ
以上が目次のレイアウトを変更する手順になります。レイアウトを変更しなくてももちろんデフォルトの目次記法のままで十分に使うことができますが、長文記事では目次を活用する機会も増します。そんな時に少しでも目次が見やすいとブログに機能性を持たせるという意味でも良さそうですね。
それでは！
こんな記事も書いています