アフィリエイトで経済的自立を目指す

シリウスの記事中に目次を置く方法

mokuji

 

 

いろいろなサイトでよく見かける「目次」

 

ワードプレスの場合、ブログをカスタマイズすることで、目次を表示させることができます。

 

実は、シリウスでもちょっと手を加えてあげると、下のような目次をつくることができます。

 

 

 

目次

見出し1
 小見出し1
 小見出し2
見出し2
 小見出し1
 小見出し2
見出し3
 小見出し1
 小見出し2
見出し4
 小見出し1
 小見出し2
まとめ

 

 

目次の意味

 

 

目次を作ることで、読者が読みたいと思う情報へ簡単に移動できるようにすることができます。

 

 

例) 下の目次の まとめ をクリックしてみてください。

 

 

目次

見出し1
見出し2
見出し3
まとめ

 

 

 

 

 

見出し1

 

AAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAA

 

 

見出し2

 

BBBBBBBBBBBBBBBBBBBBBBB
BBBBBBBBBBBBBBBBBBBBBBB
BBBBBBBBBBBBBBBBBBBBBBB

 

 

見出し3

 

CCCCCCCCCCCCCCCCCCCCC
CCCCCCCCCCCCCCCCCCCCC
CCCCCCCCCCCCCCCCCCCCC

 

 

まとめ

 

DDDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDD

 

 

まとめが見える画面に移動しました。
これが目次の役割です。

 

 

目次の作り方

 

目次をつくるだけでは、見出しには移動しません。
表示させたい見出しにも仕掛けをすることで、目次から表示させたい見出しに移動することができます。

 

 

・目次部分の構文
<a href="#mokuji1">見出し1</a> ・・・①

 

・記事の見出し部分の構文
<h3 id="mokuji1">見出し1</h3> ・・・②

 

 

①と②はセットです。
①をクリックすると②に移動する、という仕掛けになっています。

 

mokuji1 = 任意の名前

 

あなたがわかりやすい名前をつけましょう。
①と②に同じ名前を入れることで、①に「同じ名前のところに移動してください」という指示を与え、②に移動します。

 

 

レイアウトが崩れた時の対処法

 

②の部分の構文 <h3 id="mokuji1">見出し1</h3> だと下のようにレイアウトが崩れてしまうことがあります。

 

mail-yajirusi

 

 

レイアウトが崩れた場合

 

<div id="mokuji1"><h3>見出し1</h3></div>

 

に変更してみてください。

 

 

その他のレイアウト変更

 

 

目次

見出し1
見出し2
見出し3
まとめ

 

 

目次
見出し1
見出し2
見出し3
まとめ

 

 

上の2つ目次の違いは、「枠幅の長さ」・「目次の位置」・「文字の大きさ」です。

 

 

枠幅・文字の大きさの変更

 

flame

 

赤い部分を選択し、青い部分「ユーザー定義ボックス」を選択します。

 

 

box

 

 

各項目は、お好みにより選べます。
今表示されている内容は、上の目次で下記の構文になります。

 

<div style="border:solid 2px #CCCCCC;background-color:#EEEEEE;color:#000000;font-size:13px;padding:10px;">
目次
<a href="#mokuji1">見出し1</a>
<a href="#mokuji2">見出し2</a>
<a href="#mokuj3">見出し3</a>
<a href="#mokuji4">まとめ</a>
</div>

 

幅を調節するには、赤い部分を追加します。
文字の大きさは、緑の部分で変更できます。

 

<div style="border:solid 2px #CCCCCC;background-color:#EEEEEE;color:#000000;font-size:13px;padding:10px;width:300px;">

 

すると下記のようになります。
枠の幅と文字の大きさが変わりましたね。

 

目次
見出し1
見出し2
見出し3
まとめ

 

 

目次を中央へ表示させる

 

目次を中央に表示させるには、赤い部分を追加します。
これで、目次は中央に表示され、strongにより文字は太くなります。

 

 

<div style="border:solid 2px #CCCCCC;background-color:#EEEEEE;color:#000000;font-size:13px;padding:10px;width:300px;">
<p style="text-align:center;"><strong>目次</strong></p>
<a href="#mokuji1">見出し1</a>
<a href="#mokuji2">見出し2</a>
<a href="#mokuj3">見出し3</a>
<a href="#mokuji4">まとめ</a>
</div>

 

 

目次

見出し1
見出し2
見出し3
まとめ

 

 

まとめ

 

今回の内容をまとめました。

 

目次をつくる意味
目次の作り方
・レイアウトが崩れた時の対処法
・枠幅と文字の大きさを変更する方法
・目次を中央へ表示させる方法

 

いろいろと長くなってしまいましたが、要は「目次の作り方」を実践していただければ目次は作成できます。

 

・目次部分の構文
・見出し部分の構文

 

この2点はしっかりと理解してください。

 

 

 

 


アフィリエイトランキング  <<<ポチッと押していただけると嬉しいです♪

 

 

 

 

 

 

 

 

 

 

 

 



ホーム RSS購読 サイトマップ