スポンサーサイト

 

--.--.--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!
-------- | スポンサー広告 | | | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/26-b69b9e2b

「スポンサーサイト」へのトラックバック

- TrackBack -


「スポンサーサイト」へのコメント

- Comment -

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

目次の自動生成 ページ中の見出し(<h>タグ)を読み取って、自動で目次を作ってくれるプラグインを導入してみた

目次があると、その記事の内容がパッと見で分かり易いし、目的の内容がある位置まで移動出来たりするので便利。
そんな便利な目次を “jQueryで自動生成” してくれるプラグインが結構色々あったので、いくつか試してみた結果、自分の思い通りの表示になって、導入やカスタマイズも簡単な下記のプラグインを導入♪
今回導入したプラグイン。(プラグインの概要や詳しい導入方法は下記のページをご確認下さい。)
jQueryで目次を自動生成する「tocプラグイン」 / 小粋空間



【「tocプラグイン」をFC2ブログで利用する方法】


  1. 1.ファイル名を変更する
  2. 2.目次の表示場所について
  3. 3.CSSをテンプレートにコピペする



1.ファイル名を変更する


上記のページで、プラグインをダウンロードすると「jquery.toc_0.0.2.js」と言うファイル名になっており、ページ内の説明では「jquery.toc.js」にリネームしてください。と記載されてるが、FC2ブログではファイル名に「.(ドット)」が入ってるとアップロード出来ないので、「.(ドット)」の部分を「_(アンダーバー)」や「-(ハイフン)」にして、ファイルアップロードを行う。
例:「jquery-toc.js」

また、head要素(<head> ~ </head>の間)への記述は以下のようになります。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="http://~省略~/jquery-toc.js"></script>
<script>
$(function(){
    $("body").toc();
});
</script>
※「"http://~省略~/jquery-toc.js"」の部分はFC2ブログにアップロードしたファイル名をコピペする。

※「$("body").toc();」の部分は、目次を自動生成する為の見出し(<h>タグ)を抽出する範囲で、デフォルトの"body"だと、ページ全体の見出し(<h>タグ)を抽出する事になるので、記事内の見出し(<h>タグ)だけを抽出したい場合は、id属性もしくはclass属性で範囲を指定すればOK  
例:「$('div.entry-body').toc();」
その他オプション設定も可能なので、詳細は上記ページ内でご確認下さい。





2.目次の表示場所について


自動で作成された目次は「<div id="toc"></div>」を記述した場所に表示されるので、記事ページ上部に表示したい場合は、各記事の内容に「<div id="toc"></div>」と記述すればOK

プラグインの「フリーエリア」を追加して目次を表示 毎回記事の内容に記述するのが面倒な場合は、テンプレートのHTMLソース内もしくは、右の画像のようにFC2ブログの「プラグインの設定」から「公式プラグイン追加」で「フリーエリア」を追加して、その中に記述すれば毎回自動で目次をサイドメニューに表示してくれます。

このブログでは、この方法でサイドメニューにも目次を表示してます♪




3.CSSをテンプレートにコピペする


CSSはサンプルで用意されてる下記の内容を、FC2ブログの「テンプレートの設定」から、スタイルシート編集内の任意の場所もしくは、末尾にでもコピペすればOK

#toc:before {
  content: "目次";
  padding-left: 8px;
}
#toc {
  backgound:#f9f9f9;
  border: 1px solid #aaa;
  font-size: 95%;
  display: table;
  margin-bottom: 10px;
  padding: 15px;
  width: auto;
}
#toc ol,
#toc ol li {
  margin: 5px 5px 5px 15px;
  padding: 0;
}
#toc a:hover {
  text-decoration: underline;
}
※この内容を元に、自分のブログに合わせて調整すれば手っ取り早いです♪

以上、簡単でしたが「tocプラグイン」をFC2ブログで利用する方法でした
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!


関連記事
2014-09-26 | プラグイン | コメント(0) | トラックバック(0) | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/26-b69b9e2b

「目次を自動生成してくれるプラグインを導入」へのトラックバック

- TrackBack -


「目次を自動生成してくれるプラグインを導入」へのコメント

- Comment -

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

▼クリックすると配色が変更されます  
このボタンの設置方法は こちら♪

White
Black

プロフィールClick

プロフィール画像

Author:あると♪
ブログ開始: 日目
公開記事数:

Webサイト製作の勉強にと思ってブログのカスタマイズに挑戦してる初心者です♪その他にも気になった事、興味がある事などを気ままに書いてますっ!!

当ブログのご案内は こちら♪

最新記事Click

最新コメントClick

カテゴリClick

月別アーカイブClick

アクセスカウンターClick

設置日
2014.11.19

スポンサーリンクClick

このページの目次Click

人気ランキングClick

ブログパーツ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。