ブログ移転作業中!           レ(゚Д゚#)ヘ=З=З=З

ブログ記事を見やすく!記事内に目次と見出しを設置してみよう☆

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

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

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

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

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

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

 

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

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

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

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

目次にもどる
 

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

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

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


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

目次にもどる
 

■双方を合体

で、
さきほどの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 />

それでは!!!

最新情報を配信しています★ @zono_tariki
>

ゾノの他力本願ブログ