FC2ブログで利用できる目次表示方法を2つを紹介 - ブログ/カスタマイズ

mineoおすすめ契約方法

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

2017.03.02 | カテゴリ:ブログ/カスタマイズ

この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ブログ カスタマイズ検証]関連記事の位置と新着順かランダム順
FC2ブログ タグ別の関連エントリー記事一覧設置修正
ブログパーツ「feedwind」がリニューアル!差し替えの必要がなくなった
人気記事ランキングに画像を付けて表示する 再考
ブログパーツ Zenback導入

関連タグ:

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

Fire7hklk.png   Fire7HD8300x250.jpg  

この記事へコメントする・コメントを見る (0)

今日の人気ページ

fire600.jpg

新着記事

iPhoneのバッテリー診断アプリ「Battery Doc」と「Battery Care」 を紹介!AppStoreから削除される前に入手を [08月19日]
iPhoneのバッテリー診断アプリの決定版 「Battery Life」【悲報 再削除】 [08月18日]
Googleが警告を出すので早期のFC2ブログのSSL化を求む [08月18日]
セブンスター仕様1935レプリカZippoが当たるQRコードキャンペーンに挑戦[2017年8月1日-10月31日] [08月15日]
JTが電気加熱型たばこ『Ploom TECH』の抽選販売受付を開始【第5回目】 [08月11日]
mineo SIM発行手数料請求開始【2017年9月より】 [08月10日]

mineo紹介キャンペーン
最新記事
2016年人気記事ランキング
Apple公式のiPhoneのバッテリー診断方法 [2017年最新版] dsgre.jpg
iPhoneのバッテリー診断アプリの決定版 「Battery Life」 rank20160605 (3)
iPhoneのホーム画面のアイコンの位置を自由に変更する裏ワザthdth.jpg
クリックポストの配達日数を実際に体験した日数と目安の調べ方を紹介rank20160605 (10)
iPhoneのバッテリーの劣化を調べるiOSアプリ 「coconutBattery」hjkh.jpg
PHILIPS(フィリップス) ソニックケアーを修理に出す60409121432820.jpg
FREETEL Simple2はまさかの3種類展開と1年間無料キャンペーン開始FREETE.jpg
iPhoneのバッテリー診断アプリ「Battery Doc」と「Battery Care」を紹介dndeth.jpg
あのiPhoneのバッテリー診断アプリ「coconutbattery」がAppStoreに復活!→【再削除】→iOS10でアプリも起動せずhjkh.jpg
ドコモ「Xiパケ・ホーダイ for iPhone」を解約(廃止)rank20160605 (6)
Amazonのタブレット Kindle Fire HDで自炊漫画を読むblog-entry-1037.jpg
iPhone最強の広告ブロックアプリ 「AdBlock」 がiOS10で復活yfyfghjv.png
docomo契約SIMカードは差し替え注意201620.jpg
メルカリ 返金までの流れを実体験 その5 「返金(取引キャンセル)編」23131.jpg
ドコモ Xiパケ・ホーダイ for iPhoneを解約(廃止)の注意点201615.jpg
mineo紹介キャンペーンの甘い罠→【再延長】2017年1月31日まで→【仕様変更】一部条件で特典がEJOICAセレクトギフトに201616.jpg
ドコモのパケットサービスを解約しようとするが問題発生201617.jpg
iPhoneバッテリー診断アプリの信憑性gufddcrt.jpg
メルカリ 返金までの流れを実体験 その1 「商品破損編」rank20160605 (9)
docomo iPhone契約SIMをガラケーに挿す201613.jpg
記事を探す
サイト内検索
  • iPhone/全般(50)
  • iPhone/アプリ(53)
  • iPhone/アイテム(39)
  • MVNO(54)
  • MVNO/mineo(124)
  • MVNO/NifMo(18)
  • MVNO/0SIM(10)
  • FREETEL/Simple/Simple2(43)
  • タブレット(29)
  • ケータイ/スマホ雑記(29)
  • ケータイ/スマホNEWS(233)
  • NM705i/6120c(2)
  • 705NK/N73(94)
  • Nokia E51(42)
  • 雑記(95)
  • ブログ記事録(105)
  • ブログ/アクセス数公開(30)
  • ブログ/カスタマイズ(34)
  • プリペイド/プリモバイル(13)
  • デジカメ(4)
  • LINE(14)
  • IQOS/PloomTECH/Zippo(23)
  • アンケート(3)
  • MVNO2台持ち用 通話専用機種(30)
  • NOKIA その他(3)

  • 月別一覧を開く

    関連ワード一覧を開く

    全記事一覧表示
    Author
    ペンギンのアイコン素材管理人:705んk
    @musiatui | Twitter

    iNoWBh.png

    管理人利用中アイテム
    カテゴリ別記事一覧