普段使っているプラグインについて
基本的にランクエストのコラム内では、【Table of Contents +】という
プラグインを使用し、コラムに目次を設置しています。
手打ちで目次を作成する場合
ただ、クライアントの状況によって、
CMSの都合や、Verの都合により、
プラグインを入れられないケースは出てくると思います。
その場合は、手打ちで入力せざるを得ません。
やり方
回りくどく話しましたがやり方をご紹介しましょう。
(言ってしまえば、これをコピペすれば完成しますが、
サイトによっては余計なCSSがかかってしまう、デザイン的に合わないので、
変更したら何が変わるかも合わせて記載しておきます。)
目次を作成したい場所に下記コードをコピペしてみましょう。
<div id=”Column_tableContentBox” style=”width: 30%;”>
<p style=”text-align: center;”>目次</p>
<ul id=”column_tableContent” style=”list-style-type: none;”>
<li class=”TableContent” style=”padding: 5px”><a href=”#見出しのID”>テキスト</a></li>
<li class=”TableContent” style=”padding: 5px”><a href=”#見出しのID”>テキスト</a></li>
<li class=”TableContent” style=”padding: 5px”><a href=”#見出しのID”>テキスト</a></li>
<li class=”TableContent” style=”padding: 5px”><a href=”#見出しのID”>テキスト</a></li>
<li class=”TableContent” style=”padding: 5px”><a href=”#見出しのID”>テキスト</a></li>
</ul>
</div>
上記をコピペすると基本的な目次が表示されます。
ここからサイトにあったデザイン(文字色とか背景色)を追加していきましょう。
変えたい部分のstyle=” ここ ”にcssを追加するとデザインが変わります。
例えば、
目次の色を赤に設定し、文字サイズを32pxに設定したい場合…
「<p style=”text-align: center;”>目次</p>」
を
「<p style=”text-align: center; color: #ff0004; background-color: #0000ff; font-size: 32px; background-color: #0000ff;”>目次</p>」
に変更したら、文字色は赤、背景色は青、文字サイズは32pxになります。
※文字色のcss color: #●●●;
※背景色のcss background-color: #●●●;
※文字サイズのcss font-size: ●●px;
(色に関しては「HTML カラーコード」で検索すると見つかります！)
これ以外に枠線などを付けたい！みたいな時は…
「html border」で検索すると見つかります！
また、
「<li class=”TableContent” style=”padding: 5px”><a href=”#見出しのID”>テキスト</a></li>」
ここの部分でいつもと違うaタグの使い方(外部リンクを指定していない)をしていると思うのですが、
これは飛びたい場所へのリンクを付けていることになります。
例）<li class=”TableContent” style=”padding: 5px”><a href=”#seo1″>テキスト</a></li>
と設定した場合、下記記事の背景色水色の部分に飛びます。(idでseo1と名前を付けているから)
<p id=”seo1″>SEOの基本</p>
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
<p id=”seo2″>SEOの基本２</p>
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
<p id=”seo3″>SEOの基本３</p>
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
※idとclassは簡単に言うと名前を付けています。
違いはidはそのサイト内で１回だけ使うものclassはサイト内で何回も使えるもの
目次でいう<ul>は一回しか使わないのでidで指定<li>は何回も使っているのでclassで指定してあります。
まとめ
細かいcssなどに関しては、記事投稿個所で設定するのは難しいですが、
最低限で出来る事は多いので是非いい目次を作ってみてください！！
