ブログに目次が欲しいなぁ。と思ったのですが、FC2ブログではその機能が提供されていませんでした。※見つけられてないだけかもしれませんが。。
なので、自分で作ってみることにしました。※同じようなことをしてくれるJavaScriptのプラグインとかあるようですが、勉強のため自分で作りました。
作成したJavaScript、CSSの記載方法や、テンプレートなどの設定方法を書きます。
※選択しているテンプレートや、別のJavaScriptと干渉してうまく動かない可能性もあります。この手順を実施される場合は、自己責任でお願いします。また、テンプレートを触りますので、必ずテンプレートのバックアップをとってから作業してください。
目次のメリットは？
記事の最初のほうに目次があると、最後まで読まなくても、記事の全体感がわかります。また、目次をクリックすると、直接その場所に遷移できるのもいいですね。
実際、他のサイトを見ているときに、目次があるとわかりやすいなぁ。と思っていました。
目次の設定方法
では実際に目次を設置していきます。
jQueryをテンプレートに設定する
※すでにjQueryを読み込むようにしている場合はここは対応不要です。
※テンプレートを修正する場合、万が一のため、「複製」をクリックして現状のテンプレートのバックアップをとってから作業することをお勧めします。
まずは、ブログの管理画面を開き、左メニュー内の「設定」＞「テンプレート」をクリックします。
画面右側を少し下に行くと、【[ テンプレート名 ] のHTML編集】があります。そのheadタグ内に下記の記載をします。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script></p>
※headタグ内であれば、とりあえずどこでもいいのですが、私は下記のようにstylesheetを読み込む下に記載しました。
<link rel="stylesheet" href="<%css_link>">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
記載後は必ずプレビューをクリックして、問題ないことを確認してから、更新ボタンをクリックしてください。
テンプレート内に記事のIDを設定する
トップページや、カテゴリ一覧などで、複数の記事が表示される場合に記事を区別できるようにテンプレートを修正します。
上の手順でテンプレートの修正画面へ遷移し、「<!--topentry-->」が記載されている個所を探します。「<!--topentry-->」の直下のタグに「id="entry_id<%topentry_no>"」を追加します。
※すでにid=xxxxの記載がある場合は、それを書き換えます。
※私の場合、すでにidの記載があったので、下記のように修正しました。
目次作成用のJavaScriptを設置する
下記のJavaScriptをテンプレート内の下のほうにある</body>の上に記載してください。
<script type="text/javascript">
function get_index(target,index){
let id_cnt=1,id_str,index_str="",target_tag,n_level="",b_level="",o_tag,i,tmp_str;
target_tag = "h2,h3,h4,h5,h6";
target.find(target_tag).each(function(){
if($(this).attr("id") == undefined){
id_str = "index_"+index+"_" + id_cnt;
$(this).attr("id",id_str);
id_cnt++;
}else{
id_str = $(this).attr("id");
}
tmp_str = '<a href="#'+id_str+'">' + $(this).text() + '</a>';
n_level = $(this).prop("tagName").substr(1,1);
if(n_level > b_level){
index_str += "<ol><li>"+tmp_str;
}else if(n_level < b_level){
for(i=0;i<(b_level - n_level);i++){
index_str += "</li></ol>";
}
index_str += "</li><li>"+tmp_str;
}else{
index_str += "</li><li>"+tmp_str;
}
b_level = n_level;
});
for(i=0;i<(b_level - n_level);i++){
index_str += "</li></ol>";
}
index_str += "</li></ol>";
return index_str;
}
$(function(){
let entry_id;
$('[id^="entry_id"]').each(function(index){
let index_head='<p> 目次 </p>';
entry_id= $(this).attr("id");
$("#"+entry_id+" .nknot_index_area").html(index_head+get_index($(this),index));
});
</script>
※文字色が青の箇所は変更することができますが、後で記載する、cssおよび、記事へ目次を表示するタグの記載も合わせて同じ文字で変更する必要があります。
※h2～h6を対象にしていますが、変更したい場合は、「target_tag=」の箇所で対象としたいタグに変更してください。ただ、稼働テストはh3までしかやっていません。
※hタグに遷移するためidを設定するようにしていますが、すでにidが設定されている場合は、値を変更しないようにしているので安心してください。
目次作成用のCSSを設定する
テンプレートの編集の下のほうに【[ テンプレート名 ] のスタイルシート編集】という箇所があります。
その中を一番下までスクロールし、下記を追加します。
.nknot_index_area{
border: 1px solid;
margin: 30px;
padding: 10px;
background: #f0f8ff;
line-height: 1.3em;
}
.nknot_index_area p {
text-align: center;
font-size: 1.2em;
}
.nknot_index_area ol{
counter-reset: cnt;
padding-left: 0;
}
.nknot_index_area ol li{
list-style: none;
margin-bottom: 8px;
}
.nknot_index_area ol li::before{
content: counters(cnt, ".") ". ";
counter-increment: cnt;
}
.nknot_index_area ol ol{
counter-reset: cnt;
margin-left: 20px;
margin-top: 8px;
margin-bottom: 0;
}
ol.nknot_index_area, ol.nknot_index_area ol, ol.nknot_index_area ol ol, ol.nknot_index_area ol ol ol, ol.nknot_index_area ol ol ol ol{
padding-left: 1em;
}
※JavaScriptで青文字の文字を変更した方は同じ文字で変更してください。
※背景色を変えたい方は「.nknot_index_area」内の「background」を変更してください。※色の数字はGoogleでカラーコードなどで検索し、好きなコードを取得すれば大丈夫です。
記事に目次作成用のタグを書き込む
ここまでで、目次が作成される準備が整いましたので、最後に各記事内に目次を表示するタグを記載します。
目次を表示したい箇所に「<div class="nknot_index_area"></div>」を書いてください。
私の場合、下記のように記載しました。反映した実際の記事はここです。
※JavaScriptで青文字の文字を変更した方は同じ文字で変更してください。
※私の記事はタグがいっぱい書かれていますが、hタグさえあれば動くはずです。
※記事の編集画面直下にある、リアルタイムプレビューには表示されません。プレビューボタンでは表示されます。
