follow us in feedly  ツイッターでも更新情報配信中

コピペでOK!bloggerで記事内に目次を作る

公開日: 2015年12月28日月曜日 bloggerカスタマイズ


★読み進めると目次に戻ってジャンプできる目次を作ろう★


目次を作って記事を載せているサイトは多く見かける。
しかも、読み進めるとワンクリックで目次に戻る。
自動生成できるコードとやらも存在するが、
初心者うさどんには使いこなせるはずもなかったので、
いろんなサイトを参考に、コピペで済むようなコードを作成した。




それがこちらである。


<h2>入れたい小見出し</h2>
<h3 id="mokuji">目次タイトル</h3>
<ol>
<a href="記事のURL#title1"><li>目次内容1</li></a>
<a href="記事のURL#title2"><li>目次内容2</li></a>
<a href="記事のURL#title3"><li>目次内容3</li></a>
</ol>
<h3 id="title1">目次内容1と同じ文字</h3>
<a href="記事のURL#mokuji">目次に戻る</a>
<h3 id="title2">目次内容2と同じ文字</h3>
<a href="記事のURL#mokuji">目次に戻る</a>
<h3 id="title3">目次内容3と同じ文字</h3>
<a href="記事のURL#mokuji">目次に戻る</a>



表示するとこうなる。

入れたい小見出し

目次タイトル

  1. 目次内容1
  2. 目次内容2
  3. 目次内容3

目次内容1と同じ文字



目次に戻る

目次内容2と同じ文字



目次に戻る

目次内容3と同じ文字



目次に戻る

使い方


メモ帳にそのままコピーし、それを雛形として使うと便利である。
bloggerには投稿の雛形を作成できる機能があるが、
それを使用したところ記事のURLがおかしくなる怪奇現象が起きた。

なので、記事のURLをひとつづつ入力するという作業が生じる。

記事のURLは、投稿画面を開くと右にパーマリンクという項目があるので、
それを開くと出てくる。

※2016/05/06追記
注:パーマリンクの日付表示部分(20**/01)は、下書き中に月が替わると翌月に表示が変わってしまう(20**/01→20**/02)のでリンクの訂正が必要になる。※

いちいち入力するのは大変なので、
メモ帳の置き換え機能を使うとよい。


まとめ

おそらく目次に関してはもっと要領のいい方法が存在する。
しかしblogger初心者がコピペでぱっと使える方法はこれしか思いつかなかった。
とりあえずジャンプ機能が付いた目次が欲しい、という場合には十分使える。