laglog

勉強した事のメモ代わりに使ったり、日々の思った事を綴ったり〜らぐろぐ〜

はてなブログのはてな記法モードでの目次リンクのつけ方

はてな記法モードで一瞬で目次を生成する
f:id:lag-o:20160914143505j:plain
はてなブログでブログを書くようになり、もうすぐで3年目を迎える。3年目と言っても初めて記事を書いてから3年経っているだけで放置期間も含めなので記事数的にも少なく継続期間もすぐにゼロになってしまうがこうしてたまに書いて一応なんとか自分なりに継続できている。と思っている!記事数もなんだかんだで70記事を超えて過去の記事をちょこちょこ見漁ってたら先日アップしたさばき方の動画まとめ記事がとてつもなく長いことに気づき急いで目次を追加しようとしたら、目次のつけ方を知らないことに気づいた。HTMLなら簡単にできるが、はてな記法での目次リンクのつけ方がまったくわからなくて試行錯誤していろいろとやってみたがさっぱりだったので調べてみるとはてなの開発ブログに超簡単な方法が書いてありました!なので忘れないうちにメモ


目次リンクの自動生成

目次リンクの作り方は
f:id:lag-o:20160913172036p:plain
と記事中の書くだけです。
「目次」という部分は普通に打ち込んでその下にあるタグを打つだけで見出しの部分が自動で目次のリンクとして生成されます。ちなみにこのタグはどの編集モードでも使うことができ、はてな記法に限らず自動で目次リンクを生成してくれるのでとても便利です。
f:id:lag-o:20160913172314p:plain
上記のように「大見出し」「中見出し」「小見出し」のすべてが自動で目次リンクになります。

最後に

この目次記法のタグはとても便利な機能ですが、目次より上のに見出しがあると目次の部分からトップへ戻ってしまうので今まで最初の一行目で大見出しを使っていた自分の記事の書き方を見直す必要がでてきました…目次を付けなければならないほど長い記事になりそうな時は目次より上ではフォントサイズで調整し、目次以降で見出しタグを使うように気をつけなければなりません。これまでの記事を編集する気にはなりませんが以後、気をつけよう。それでは

目次のデザイン (レイアウトスタイルシリーズ)

目次のデザイン (レイアウトスタイルシリーズ)

■関連記事

laglog.hatenablog.com

■LINEスタンプリリース中!

↓販売ページはコチラ↓
store.line.me
store.line.me

ブログ村に登録してます!良かったらクリックお願い致します。

ブログランキング・にほんブログ村へ
にほんブログ村