Bloggerに目次を作る
Bloggerで作成するブログに目次を表示させます。
表示させるようにする方法は、見出しタグにidを追加して記事内でリンクするだけです。
リンクなしの目次を作って、そこに記事内リンクをしていくことでBloggerのブログにリンクありの目次を作ります。
リンクなしの目次を作る
リンクありの目次を作る前にリンクなしの目次を作る必要があります。
作り方は、普段記事を書く方法と同じで見出しに入力した文字を、標準で書いていきます。
このとき、目次の前に英数字を付ける場合は全角にしましょう。半角では、うまくリンクしてくれません。
目次
１．Bloggerに目次を作る
２．リンクなしの目次を作る
３．見出しタグにidを付ける
４．目次にリンクする(記事内リンク)
５．目次を囲むコード
これで、リンクなしの目次は完成です。
後は、目次の内容に記事内リンクを付けます。
見出しタグにidを付ける
まずは、見出しタグにidを付けるので、記事の作成をHTMLに切り替えます。
記事作成画面のブログ名の下に 作成｜HTML と書いてあるのでHTMLを押して切り替えます。
そして、目次に表示したいテキストを見つけて、テキスト前にある見出しタグ<h2>を<h2 id="英数字">にします。
これを目次に入れたい見出しのidを全て違う英数字にしてください。
この記事では見出しのidを以下のようにしました。
<h2 id="no1">Bloggerに目次を作る</h2>
<h2 id="no2">リンクなしの目次を作る</h2>
<h2 id="no3">見出しタグにidを付ける</h2>
<h2 id="no4">目次にリンクする(記事内リンク)</h2>
<h2 id="no5">目次を囲むコード</h2>
これで、見出しにidを付けることができたので、記事をHTMLから作成に戻します。 作成｜HTML の作成の方を押してください。
目次にリンクする(記事内リンク)
目次はリンクして作ります。
まずは、作成記事のパーマリンク(URL)を用意します。
作成している記事の右側に投稿の設定にパーマリンクがあるので、そこを開いてください。
自動パーマリンクにしていると記事公開前は、パーマリンクが定まっていません。
なので、カスタムパーマリンクにチャックを入れて、パーマリンクを自分で決めて完了を押して記事公開前にパーマリンクを定めます。
リンクなしの目次の中から、見出しと同じ文字列を選んで反転させます。
リンクボタンを押して「リンク先のURL」に「#見出しのid」を入力します
このリンクを新しいウィンドウで開くからチェックを外してOKを押せば完了です。
この作業を目次に入れる見出し分、すべてに行います。この記事では計5回行いました。
これで目次の完成です。
目次を囲むコード
目次を囲んでいるブログも多いので、囲むためのコードを用意しました。
<div style="background-color: #f3f3f3; border: solid 1px #888888; padding: 20px;">
ココに、目次を入れる
</div>
このコードを使うと以下のような目次になります。
背景色を消したいときは、background-color:#f3f3f3;を削除してください。
背景色を変えるときはf3f3f3を変更してください。
枠線を消したいときは、border:solid 1px #888888;を削除してください。
枠線を太くするときは1pxの数字を大きくすると太くなります。
枠線の色を変えるときは888888を変更してください。
