お春日和

日々を綴るブログ。2019年3月再始動。

【はてなブログ】見たままモードで目次記法【使い方】

こんにちは、お春です。

 
先日の記事ははじめて目次記法を使ってみました。
その際に四苦八苦したので、学びを振り返ります。
 

f:id:hchocolatier:20150918121805p:plain

 
目次
 
 

新しいことは試したい

目次を作ることに興味はあったのですが、たまーに自力で番号ふって、見出しを目次っぽくレイアウトしたこともありましたが、手間がかかるので続きませんでした。
自動で目次を作るカスタマイズにチャレンジしないままで、ブログを書いていました。
 
このタイミングでのせっかくの新機能!
カスタマイズではなく、公式機能なので安心感もありますし、やってみようと思いました!
 
 

いざ、公式ブログにそってチャレンジ

公式のはてなブログ開発ブログにはこのようにかかれています。
目次を挿入したい行に、次のように[:contents]と記述します。前後には文字や空白を入れず、1行で指定してください。
 
で、その通りに「見たままモード」でやってみました。
 

f:id:hchocolatier:20150918121121p:plain

[:contents]と書きました!。
プレビューしてみよう!! 
 ↓ ↓ ↓ ↓

f:id:hchocolatier:20150918121154p:plain

 
むむ??
「プレビュー」してみても目次が作成されません。

記事の本文に[:contents]と普通に書いてあるだけです…。

 

あれ?目次どこ行った?

勝手に作成してくれるんじゃなかったの??

見たままモードでは、見出しにしたい行を選択して、入力補助ツールバーで見出しの大きさを選択します。

見出しの大きさも「大見出し」を指定しているし、方法としては間違っていないはず…。

公式ブログの画像を見ると、「見たままモード」タブで本文に[:contents]と記載してるのだから、これも間違っていないはず…。

 

さらに読み進めると…

また「HTML編集」タブでh3などのHTMLを直接入力することもできます。その際に、次のようにid属性を直接記述すると、目次のアンカーリンクとして使用されます。

h3?id属性??アンカーリンク???

 

わけわかめヽ(^0^)ノ

 

とりあえず私が知ってるのは「HTML編集」タブのところだけ。

試しに「HTML編集」タブの画面にして、目次を挿入したいところに[:contents]と記載。

f:id:hchocolatier:20150918121425p:plain

 

「プレビュー」タブに切り替えてみると…

f:id:hchocolatier:20150918121448p:plain

できてるううう!(^^)!

 

 

 

まとめ

はてなブログを「見たままモード」で使用している人が目次記法を使用したい場合(私ですw)
 
  1. 記事を書く
  2. 記事を書きながら見出しを付けるのを忘れずに
  3. 記事が描き終わったら「HTML」タブにする
  4. 「HTML」タブで、自分が目次を入れたいところに[:contents]と書く
  5. 「プレビュー」タブにすると、見出しの文が目次となって、4.で[:contents]と書いたところに表示される。
 
 
以前に、ランキングバナーやパンくずリストを設定したときの楽しさを思い出しました。

 

 
目次記法は長いブログ記事を書くときに重宝しそうな機能です。せっかく使い方も学べたことですし、使用していきたいと思います(*^^*)
私はこの方法で落ち着いたのですが、目次記法について良い使用方法ありましたら、こっそり教えて下さい(^^)
 
 
 
では、また次回に。