月は魚に日は乙女タイトル画像

livedoorブログに目次を作りたい。[ブログ初心者の遅すぎる歩み]

livedoorブログ作業のアイキャッチ画像

【2018年8月に書き直しました】

目次を作りたいけどライブドアブログには元々目次用ツールはないから、検索して探してみた。

目次のコードが書いてあるブログが見つかったから、今迄リンクを張っていたんだけど、そのブログがいつの間にか見られなくなっていたので、自分の使っていたコードをここで出すことにした。

※今表示されている折り畳み目次はWordプレスのプラグインの自動生成です。

ざっくり目次のしくみ

目次は”クリックすると目的の見出しに飛ぶ仕組み”で、飛び先の見出しとワンセットで機能している。

対する見出しは”見た目”をそれらしくするだけでなく、“コード上でも見出し”となっていてそれを目印にして飛んで行っている。

HTMLタグ編集画面との画面比較

ライブドアブログに目次を作るの画像2 ライブドアブログに目次を作るの画像1

h2というのが見出しの事で、title1とかitle2とかが各見出しの番号になってる。

※見出しにもh2h3と種類があるけど、その説明はここでは省略。

コードを張り付ける

  1. [HTMLタグ編集]ボタンをクリック
  2. コードをペースト
  3. [HTMLタグ編集]をクリックして普通の表示に戻す

<div style=”background:#f9f9f9;padding:15px;border:3px dotted #999999;border-radius:10px;”>
<h2 id=”mokuji”>■目次</h2>
<a href=”#title1″>見出し1</a>
<br /><a href=”#title2″>見出し2</a>
<br /><a href=”#title3″>見出し3</a>
</div>

-コピペOK-

以下は飛び先である「見出し」に使うコード。

<h2 id=”title1″>見出し1</h2>
<h2 id=”title2″>見出し2</h2>
<h2 id=”title3″>見出し3</h2>

-コピペOK-

この目次と見出しコードは増やしていく事ができるので、同じコードでtitleの次の数字を順次足していく。(例でいくと次は”title4″)

目次と見出しコードをセットで増やすのを忘れないように。

 

問題点

  • 記事の書きはじめはHTML編集画面でする。

記事画面で見出しから改行して中身を書き始めると、見出し以外も勝手に太字になるしアンダーラインがでてきて困った。

コードを見てみると、どうも見出しの一部となってしまっているみたい。

いくらやり直してもどうにもならなかったので、HTML画面で見出しコードの下から記事を書くことにした。

でも全文書く必要はなく、数文字書いたら記事画面に戻って続ければ大丈夫。

 

【結論】目次がいらない記事だった

当初は目次設置作業が困難で、肝心の中身記事が書けずに目次がいらないほど短い記事になってしまった。

初心者すぎて知識が限界だったけど、これでもHTMLはなんとなくでも知っていた方なので、純粋な初心者は結構苦労するはず。

結局、これ以降Wordプレスに引っ越すまで、目次を使わなくても読める程度の短い記事で逃げ通した。

ちなみにこういったコードは、Wordプレスに来たら勝手が違うので全部削除する事になったから、引っ越し予定のある人はコードを使って作り込み過ぎない方がいいと思うよ。

livedoorブログ作業のアイキャッチ画像
ライブドアブログのツールにある[定型文]機能。 定型"文"じゃなくて"コード"でもいいので ブログでよく使うコードを登録して ...