この記事はFC2ブログのデフォルトのテンプレートbasic_whiteで行ったものなので、他のテンプレートについてはわかりません。
ちょっとFCブログで記事を書いてみました。
FCブログははてなブログと違い、自分でプラグインやCSSをいじらないと目次を付けることができません。
単純に目次用のHTMLをコピペする方法もありますが、FCブログのHTMLは、これ又はてなブログと違い洗練されてない。
はてなブログは段落毎に分けられて見やすいですが、FCブログはひたすら文字が連なっています。
見にくくて仕方がない。
まあ、それは置いといて目次の出し方。
必要なプラグインは、tocプラグインでこちらのサイトからダウンロードできますが、一応上のサイトのやり方の方がわかりやすいので目を通してみた方が良いと思います。
こちらのブログの通り、
プラグインをダウンロード。
プラグインをリネーム。
プラグインを書き換え。
プラグインをFCブログにアップロード。
HTMLとスタイルシートをいじって目次の設置。
ここまではできました。
所が、問題が発生。
記事本文の目次だけでなく、なぜかサイドバーのコンテンツまで目次に載っている。
これではいけない、と思い、上のブログで又調べるが大苦戦しました。
上のブログだとちょっと分かりにくいですね。
サイドバーのタイトル等に”h”タグを使用している場合の注意点
コメントで指摘されて気づいたのですが、記事本文以外の場所、例えばサイドバーなどのタイトルに”h”タグを使用していると、サイドバーのタイトルまで目次に含まれてしまいます。使用しているFC2ブログのテンプレートが記事本文以外の場所で”h”タグを使用してる場合はスクリプトの記述を変更する必要があります。
ほとんどのブログテンプレートは、記事タイトルを含む記事本文部分を”div”タグを使用したブロックで囲んでいるはずですので、まず自分の使用しているブログテンプレートで記事本文を囲んでいるブロック要素を探してください。
chromeブラウザの”タグを検証”機能を使用して自分のブログをデバック表示させると簡単に見つけられます。
例えばこのブログで使用しているテンプレートでは、記事タイトルを含む記事本文部分は、<div class=”article2″>という指定をして、記事をブロックで囲んでいます。
この記事を囲っているブロック要素部分の記述を使用してスクリプトの”body”部分の記述を以下のように変更します。
ここで詰まりました。
イマイチ分かりにくい。
ようは、
例えばこのブログで使用しているテンプレートでは、記事タイトルを含む記事本文部分は、<div class=”article2″>という指定をして、記事をブロックで囲んでいます。
<div class=”article2″>に当たるワードをみつけて、それを
変更前 $("body").toc({
↓
変更後 $("div.article2").toc({
こんな感じで書き換えてやればいいわけです。
一応、書いておきますが、このプラグインはHTMLの部分にあります。
スタイルシートの方ではありません。
CTRL+Fボタンで検索ボタンを開き、検索してください。
一行一行見ていく必要はありません。
検索窓にワードを貼り付ければみつけられます。
自分は、 <div class=か<div で検索しました。
どちらでやったか覚えていない。
で、テンプレートbasic_whiteのワードは何か？
それは entry_body
でした。
これを
$("body").toc({
↓
$("div.entry_body").toc({
と書き換えてやります。
このentry_bodyを$("div.ここに貼り付ける").toc({
やればいいんですね。
自分はこれで目次が記事本文だけの綺麗な目次になりました。
やり方さえ、分かれば簡単なんですけどね。
気づくまでに、かなりの時間がかかりました。
何度もいいますが、これはテンプレートbasic_whiteの方法なので、他のテンプレートで上手くいくかどうかはわかりません。
ちなみに、HTMLをコピペしてひたすら力技でヤる方法はこちら。
この方法は始めるのは簡単ですが、やり続けるのは大変だと思う。
ライブドアブログでもこちらの方法でやりましたが面倒でした。
