こんにちは、お春です。
先日の記事ははじめて目次記法を使ってみました。
その際に四苦八苦したので、学びを振り返ります。
目次
新しいことは試したい
目次を作ることに興味はあったのですが、たまーに自力で番号ふって、見出しを目次っぽくレイアウトしたこともありましたが、手間がかかるので続きませんでした。
自動で目次を作るカスタマイズにチャレンジしないままで、ブログを書いていました。
このタイミングでのせっかくの新機能!
カスタマイズではなく、公式機能なので安心感もありますし、やってみようと思いました!
いざ、公式ブログにそってチャレンジ
公式のはてなブログ開発ブログにはこのようにかかれています。
目次を挿入したい行に、次のように[:contents]と記述します。前後には文字や空白を入れず、1行で指定してください。
で、その通りに「見たままモード」でやってみました。
[:contents]と書きました!。
プレビューしてみよう!!
↓ ↓ ↓ ↓
むむ??
「プレビュー」してみても目次が作成されません。
記事の本文に[:contents]と普通に書いてあるだけです…。
あれ?目次どこ行った?
勝手に作成してくれるんじゃなかったの??
見たままモードでは、見出しにしたい行を選択して、入力補助ツールバーで見出しの大きさを選択します。
見出しの大きさも「大見出し」を指定しているし、方法としては間違っていないはず…。
公式ブログの画像を見ると、「見たままモード」タブで本文に[:contents]と記載してるのだから、これも間違っていないはず…。
さらに読み進めると…
また「HTML編集」タブでh3などのHTMLを直接入力することもできます。その際に、次のようにid属性を直接記述すると、目次のアンカーリンクとして使用されます。
h3?id属性??アンカーリンク???
わけわかめヽ(^0^)ノ
とりあえず私が知ってるのは「HTML編集」タブのところだけ。
試しに「HTML編集」タブの画面にして、目次を挿入したいところに[:contents]と記載。
「プレビュー」タブに切り替えてみると…
できてるううう!(^^)!
まとめ
はてなブログを「見たままモード」で使用している人が目次記法を使用したい場合(私ですw)
- 記事を書く
- 記事を書きながら見出しを付けるのを忘れずに
- 記事が描き終わったら「HTML」タブにする
- 「HTML」タブで、自分が目次を入れたいところに[:contents]と書く
- 「プレビュー」タブにすると、見出しの文が目次となって、4.で[:contents]と書いたところに表示される。
以前に、ランキングバナーやパンくずリストを設定したときの楽しさを思い出しました。
目次記法は長いブログ記事を書くときに重宝しそうな機能です。せっかく使い方も学べたことですし、使用していきたいと思います(*^^*)
私はこの方法で落ち着いたのですが、目次記法について良い使用方法ありましたら、こっそり教えて下さい(^^)
では、また次回に。