失敗談です。はてなブログの記事には目次を入れられます。下に書いてあるものがそれ。
目次を入れた後の目次の上に「目次」と見出しをつけたいと思い、「HTML編集」でCSSのスタイルを入力しました。
目次
はてなブログの記事に目次を入れる方法
そもそも、はてなブログの記事に目次を入れる方法はどうやるの?
その方法は至って簡単です。記事作成&編集画面で、ツールバー上段の右から3番目「目次」のボタンを押すだけで、記事内に自動的に目次が挿入されます。
手入力もできます。記事内のお好きな場所に「「:contents」」と入力するだけです。実際には、「」を含めた全ての赤字を半角で入力します。これで目次が表示されるようになります。
下に方法を書いた当ブログの過去記事↓がありますので参考になさってください。
はてなブログの目次に「目次」と入れたい
はてなブログの記事に目次を入れて、です。先ほど紹介した目次を入れる方法は、本当に目次しか表示されないんですよね。
それだとどこか寂しいので、目次の上に「目次」のテキストを入れて、見てくださっている方にここが目次ですよ、とわかりやすくしたいところです。
以前、私は目次の目次表示にも大見出しのh3タグをつけていました。見出しはツールバーの上段左端のボタンからつけられます。HTMLでタグを手入力してももちろんOK。
しかし、見出しタグをつけるやり方では、目次に「目次」のリンクが生成されてしまって、こちらも見栄えがあまり良くありません。微妙なむず痒さがあります。
そこで私は「<p><span style="font-size: 120%; font-weight: bold;">目次</span></p>」と表示することにしました。目次にスタイルを指定したのです。
「」内の「font-size: 120%;」は目次の文字サイズを120%にしますよ、「font-weight: bold;」は目次の文字を太字にしますよ、という指定です。
これを、最近書いたブログ記事と、他にもよく読まれているブログ記事に、目次のスタイルを書き加える作業を最近していたのです。手作業で。
当ブログは全3000記事以上ありますから全てはさすがに無理でした。
今、私が紹介した方法を行うと画像のように目次の上に目次のテキストがつきます。
これはこれで良いのですが……しかし、です。
目次の上に目次の文字を自動で入れる方法があった
多くの記事に手入力でスタイルを指定しました……しかし、です。
上記記事リンク『小粒ログ』さんによると、その目次の上に目次の文字を入れる方法は自動化できるみたいなんです……。
PCサイズは、はてなブログのダッシュボード→「デザイン」→「PC」→「カスタマイズ」→「デザインCSS」の順に選択します。
スマホは、はてなブログのダッシュボード→「デザイン」→「スマートフォン」→「記事」→「記事上」の順に選択します。
「.table-of-contents:before {
content: "目次";
font-size: 20px;
font-weight: bold;
}」
そして上記「」内赤文字のCSSを指定してあげると、目次を入れた直前に「目次」のテキストが自動的に挿入されるようになるとのことでした。その手があったかと。
値は自分のブログに合うように好きに変えると良いかと思います。私のようにfont-sizeを120%にするなど、ですね。
ちなみに先ほど私のやり方(手入力)をやった上で『小粒ログ』さんの方法をしてしまうと、画像のように目次の文字が2つ表示されてしまいますので注意してください。誰もやらないでしょうけど。
私はCSSを多少いじれるのですが、どうも技術を活かす術を知りません……頭が固いというか弱いというか。このCSSを見て、なるほど擬似要素はこういうときに使うのかと目が覚める思いがしました。
おわりに
私がやってしまったことは、冒頭に書いたように失敗です。反面教師の事例として捉えてください。より良い方法はあくまで『小粒ログ』さんの方ですからお間違えないようお願い致します。
今回良い教訓を得ました。
得た教訓は、私が思いつくようなことは皆さんがとっくに気がついているのだから、思いつきのまま行動を起こすより何よりまずネットで調べよう、ということです。
そうすれば私が考えつくよりずっと優れた方法が見つかることでしょう。問題は、私の場合得た教訓を活かせないところなのですが……。
私はもうこれからずっと目次を手入力します。皆さんは自動で表示されるように設定してください。