FC2ブログで、目次を簡単に設置する方法

FC2ブログの記事内に、簡単に目次を設置して表示させる方法についてお話をします。

目次を表示させる方法はいくつかありますが、初心者でも簡単に出来る方法になります。

 

FC2ブログの目次の設置方法

 

FC2ブログの記事にコードを記載

①FC2ブログの管理ページから、記事を書く画面を開く

 

② HTMLコードが入力出来る画面で、記事を書いていきます。

 

③目次を設置したい場所で、下記のコードを入力する。

<div style=”text-align:left;padding:10px;border-color:#cccccc;border-width:2px;border-style:solid;width:90%;background:#ffffff;”><b>目次</b>
<a href=”#1″>見出し1</a>
<a href=”#2″>見出し2</a>
<a href=”#3″>見出し3</a>
<a href=”#4″>見出し4</a>
<a href=”#5″>見出し5</a>

</div><h3 id=”1″>見出し1</h3>
見出し1の文章をここに記載していく

<h3 id=”2″>見出し2</h3>
見出し2の文章をここに記載していく

<h3 id=”3″>見出し3</h3>
見出し3の文章をここに記載していく

<h3 id=”4″>見出し4</h3>
見出し4の文章をここに記載していく

<h3 id=”5″>見出し5</h3>
見出し5の文章をここに記載していく

 

【注意事項】
上記をまずコピーして、記事を書く場所に貼り付ける。

見出し1〜5をそれぞれ消して、見出しタイトルの文字をそれぞれに記載していく。

 

例えでお話すると、見出し1に【明日について】という見出しのタイトルにするとする。

<div style=”text-align: left; padding: 10px; width: 90%; background: #ffffff; border: 2px solid #cccccc;”><b>目次</b>
<a href=”#1″>明日について</a>
<a href=”#2″>見出し2</a>
<a href=”#3″>見出し3</a>
<a href=”#4″>見出し4</a>
<a href=”#5″>見出し5</a></div>

<h3 id=”1″>明日について</h3>
見出し1の文章をここに記載していく

<h3 id=”2″>見出し2</h3>
見出し2の文章をここに記載していく

 

こんな感じで、文字を書き換えます。

★★★★★★★★★★★★★★★★★★

 

④全て記載した後、プレビューで確認すると目次は表示されていると思います。

後は、公開するだけです。

 

目次の枠内の背景色をカスタマイズ

目次の枠のコードは、上記に記載した中のこのコードになります。

<div style=”text-align:left;padding:10px;border-color:#cccccc;border-width:2px;border-style:solid;width:90%;background:#ffffff;”><b>目次</b>
<a href=”#1″>明日について</a>
<a href=”#2″>見出し2</a>
<a href=”#3″>見出し3</a>
<a href=”#4″>見出し4</a>
<a href=”#5″>見出し5</a>
</div>

目次の枠内の背景色を変える場合は…

<div style=”text-align:left;padding:10px;border-color:#cccccc;border-width:2px;border-style:solid;width:90%;background:◯◯◯;”><b>目次</b>
<a href=”#1″>明日について</a>
<a href=”#2″>見出し2</a>
<a href=”#3″>見出し3</a>
<a href=”#4″>見出し4</a>
<a href=”#5″>見出し5</a>
</div>

◯◯◯が目次の枠内の背景色を変えるところで、◯◯◯に色のコードを入力すると目次の枠内の背景色が変わります。

 

色コードについて

◎ピンク系     #ffeff9
◎グリーン系  #ccffcc
◎イエロー系  #ffff99
◎水色系        #f0ffff
◎グレイ系     #f5f5f5

 

FC2の色見本

 

上記の色を含む、様々な色コード一覧はこちら…

様々な色の色コードが記載されているページへ行く(ここをclick!)

 

まとめ

基本のコードを貼り付けて、文字を入れ替えたりする作業がメインで…

目次の枠内の背景色を変えたい時は、色コードを入れるだけなので…

初心者やカスタマイズが苦手な方でも、簡単に目次を作ることが可能です。

テンプレートをいじる訳ではないので、サイトが崩れることもなく安心して目次を設置出来る方法になります。

FC2ブロクの記事に目次を付ける方法(FC2ブロク公式ちゃんねる)

 

タイトルとURLをコピーしました