ヒビコレ

iPhone使いの携帯・スマホ関連の雑記ブログ

2717930.jpg

FC2ブログで利用できる目次表示方法を2つを紹介

カスタマイズ』カテゴリの関連記事

スポンサードリンク

このFC2ブログに目次を導入しました。

とは言ってもまだ一記事だけなので、前から導入を検討していた物ではあるが、私自身が他サイトであまり利用しないため、保留していた。

そんな中、私が契約しているMVNOのmineoのキャンペーン等の年間スケジュールををまとめている記事が予想以上のボリュームになってきたこともあり、取りあえず以下の記事で目次機能を導入しました。

mineoの2017年キャンペーン・増強・改定等の年間スケジュールをまとめてみる


ネットで情報を探した所、FC2ブログでの目次導入で簡単に出来そうなのを2つ発見。一つは記事中に仕込む方法、もう一つはテンプレート内に仕込む方法。

今回はその2つをメモ代わりに記事にしました。

記事中にタグを挿入で目次


まずは今回導入した目次方法で、記事中にタグを挿入し作成する方法。

先ほどの記事では、以下のようにしました。○月をクリックすると該当月まで飛びます。

fgfdghdhj.png

こちらのコードを紹介されているのが以下のサイト様。

2分でできる!ブログ記事にページ内リンクで目次を作る方法 | あなたのスイッチを押すブログ


上記を分かりやすくテンプレまで用意してくれているのが以下のサイト様。

ブログの中に目次、表、枠などを入れる方法【テンプレートつき】 : 世界一周 絶景めぐり


上記サイト様では h◯ がh3になってますので、各々の設定で状況で変更を。私はh3で使用。

h◯のタグはこの記事でも記事中の見出しで使ってますが、見た目や印象が変わりますから、こだわり始めると面白い。

私はh3タグは以下の設定にしています。

h3 {
color: #fff;
font-size:20px;

border-bottom:1px #FF69B49;
padding:5px 0px 5px 16px;
background: #228FC9;
}


テンプレートによって全然違うと思いますので、スタイルシートにある設定を自分ごのみで変更を。

JQueryを利用した目次設定


今回は一記事だけ設定したかったので、上記の方法を取りましたが、も記事が必要な記事が多い場合はJQueryを利用した目次表示が良いかと思います。

設定はしていないので、紹介サイト様だけ紹介。

jQueryで目次を自動生成する「tocプラグイン」: 小粋空間


ブラウザがChromeだと、jqueryファイルのダウンロードが出来なかったので、IEで右クリックでダウンロードしました。

先述の通り、目次が必要な記事が増えてくるとこちらを導入すると思います。

まとめ


という事で目次に関しては今後、導入する記事も増えるかもしれません。

効果に関しては懐疑的。それと結構導入している記事を見かけるので、同じ様に見られるのもなぁと思ったりも。

見てくれている方が快適に見えるならいいのですが。

 カスタマイズ

 ブログ FC2 カスタマイズ 目次

スポンサードリンク

今日の人気ページ

Fireタブレットが4,000円OFF-

0 Comments

コメント *クリック