ブログ記事を見やすく！記事内に目次と見出しを設置してみよう☆│ゾノの他力本願ブログ

どうも☆
今日はブログ記事内に
目次と見出しを設置してみよう！
というお話です。

色々なブログ記事をみていると
目次と見出しをうまく使って
読みやすくまとめている記事が
多いなぁと感じたので…(*_*)

ブログサービスによっては
もともと目次と見出し機能があって
簡単に作成できるものもあるようですが
JUGEMブログにはそのような機能は
ないようなので
自分でなんとか作るしかないな～
ということで、色々調べました。

それでできたのが↓です。

さっそく目次＆見出しを使って
記事を書いてみましたよ。

うまく機能するかなぁ？？？

■目次

ブログ記事にページ内リンクで目次を作る方法

見出し付き囲み枠を作る

双方を合体

■ブログ記事にページ内リンクで目次を作る方法

ここは他力本願ブログなので、
さっそくグーグル先生にきいて
こちらのサイトがヒットしました！

2分でできる！ブログ記事にページ内リンクで目次を作る方法／あなたのスイッチを押すブログ

こちらにある
ページ内リンクのテンプレートを
いただいちゃいました。
「ご自由にご利用ください。」と
あったので、ご自由に使ってみます！(笑)

目次にもどる

■見出し付き囲み枠を作る

次はちょっとした装飾を考えました。
先ほどのページ内リンクテンプレートは
まさにいっちばん簡素？なものだったので
ちょっとかっこよく？したくなりました。
そこで参考にしたのがこちら！

すっきりと見やすいシンプルな見出し付き囲み枠

ここのジェネレータを使えば
シンプルな枠ならさくっと
作れちゃいそうです☆

目次にもどる

■双方を合体

で、
さきほどの２つを合体させて
今回のミッション、完了です☆

目次にもどる

ということで
HTMLがブログ記事本文内で
有効なブログでしたら
こんな感じに比較的簡単に設置できますね☆

これで長くなってしまうような記事も
少しは読みやすくできるかな？

ブログを書く方としても
先に枠組みがあったほうが書きやすそうです。

これから使っていってみようっと！

最後にうまく表示できるかは
わかりませんが
テンプレートを置いておきます～。

ブログ内目次＆見出しHTMLテンプレート
（コピペでいけるかな？）

<div style=”padding:0;margin:0;width:auto;max-width:320px;color:#333;background:#fff;border:1px solid #ccc;border-top:3px solid #0000FF;box-shadow:4px 4px 8px #ddd”>
<div style=”padding:6px 9px;font-weight:bold;background:#f7f7f7;border-bottom:1px dotted #ccc;”>
<h3 id=”mokuji”>■目次</h3>
</div>
<div style=”padding:15px”><a href=”#title1″>▶見出し1</a>
<br />
<a href=”#title2″>▶見出し2</a>
<br />
<a href=”#title3″>▶見出し3</a>
<br />
<a href=”#title4″>▶見出し4</a>
<br />
<a href=”#title5″>▶見出し5</a>
</div>
</div>
<br />
<br />
<div style=”padding:0;margin:0;width:auto;max-width:500px;color:#333;background:#fff;border:1px solid #ccc;border-top:3px solid #0000FF;box-shadow:4px 4px 8px #ddd”>
<div style=”padding:6px 9px;font-weight:bold;background:#f7f7f7;border-bottom:1px dotted #ccc;”>
<h3 id=”title1″>■見出し1 </h3>
</div>
</div>
<br />
見出し1本文<br />
<br />
<a href=”#mokuji”>▶目次にもどる</a>
<br />
<br />
<br />
<div style=”padding:0;margin:0;width:auto;max-width:500px;color:#333;background:#fff;border:1px solid #ccc;border-top:3px solid #0000FF;box-shadow:4px 4px 8px #ddd”>
<div style=”padding:6px 9px;font-weight:bold;background:#f7f7f7;border-bottom:1px dotted #ccc;”>
<h3 id=”title2″>■見出し2 </h3>
</div>
</div>
<br />
見出し2本文<br />
<br />
<a href=”#mokuji”>▶目次にもどる</a>
<br />
<br />
<br />
<div style=”padding:0;margin:0;width:auto;max-width:500px;color:#333;background:#fff;border:1px solid #ccc;border-top:3px solid #0000FF;box-shadow:4px 4px 8px #ddd”>
<div style=”padding:6px 9px;font-weight:bold;background:#f7f7f7;border-bottom:1px dotted #ccc;”>
<h3 id=”title3″>■見出し3 </h3>
</div>
</div>
<br />
見出し3本文<br />
<br />
<a href=”#mokuji”>▶目次にもどる</a>
<br />
<br />
<br />
<div style=”padding:0;margin:0;width:auto;max-width:500px;color:#333;background:#fff;border:1px solid #ccc;border-top:3px solid #0000FF;box-shadow:4px 4px 8px #ddd”>
<div style=”padding:6px 9px;font-weight:bold;background:#f7f7f7;border-bottom:1px dotted #ccc;”>
<h3 id=”title4″>■見出し4 </h3>
</div>
</div>
<br />
見出し4本文<br />
<br />
<a href=”#mokuji”>▶目次にもどる</a>
<br />
<br />
<br />
<div style=”padding:0;margin:0;width:auto;max-width:500px;color:#333;background:#fff;border:1px solid #ccc;border-top:3px solid #0000FF;box-shadow:4px 4px 8px #ddd”>
<div style=”padding:6px 9px;font-weight:bold;background:#f7f7f7;border-bottom:1px dotted #ccc;”>
<h3 id=”title5″>■見出し5 </h3>
</div>
</div>
<br />
見出し5本文<br />
<br />
<a href=”#mokuji”>▶目次にもどる</a>
<br />

それでは！！！{entry_permalink}