SimplicityでTOC目次を簡単にカスタマイズする方法

どうも、ぶちくまです。

最近の一番の気晴らしは、自分のブログのCSSをカスタマイズすることですね。

というわけで、今日は目次をカスタマイズしてみました。

Table of Contents Plusで目次を作成

今回は、もうプラグイン使いましょう。

目次の作成といえば、もうこれっきゃないってくらいに有名。

TOC＋こと、Table of Contents Plusですね。

これは、ほとんど設定不要で、とりあえずインストールして有効化すれば、もう目次が設置されているっていう、初心者にも使いやすいプラグインです。

今回はこのプラグインで作られた目次（index）をCSSでカスタマイズしていきます。

Cocoonユーザーなら目次作成もプラグインいらず

Cocoonカスタマイズも参考にしてみてください！

Cocoonカスタマイズは初心者でも簡単にできる【おすすめ一覧】

WordPress無料テーマ「Cocoon」の初心者でもできるカスタマイズ部とその方法をまとめてみました。見出しも本文だけではなく、「サイドバーウィジェット」「コメント」「関連記事」などもデザイン可能。ボタンやバッジ、ボックスデザインやCocoonおすすめ機能のカルーセルのCSS編集などを掲載しています。

buchikuma.xyz

2024.03.22

最低限の設定

TOCを有効化した、という前提から話を進めます。

上級者向けCSSスタイルを利用

管理画面から「設定」タブより、TOC＋っていうのがあります。

ここの下の方にある、「上級者向け」を表示、その中にある、「プラグインのCSSスタイルを読み込まない」やつをチェックすればOK

タイトル次第でクリック率が変わる

あとやることといえば、見出しテキストのタイトルを「目次」や「index」など、好きな文字に変えるくらい。

あと、上級者向けの見出しレベルの設定くらいでしょうかね。

ぶちくまはh2とh3だけ表示するようにしています。h4が、ぶちくまサイトだと長文で起用していることもあるからね。

そうなると、少しインデックスだけで一画面埋め尽くしちゃうから、それ見ると大概の人は離脱するよね。

ちなみに、アドセンスのクリック率を上げたい場合は、目次を閉じておくことをお勧めします。というのも、サイト訪問者が、コンテンツに触れる（タップ、クリック）することに慣れておくことで、広告へのクリック率が上がるからです。

アドセンス収益を増加させた方法についてまとめた記事も参考にしてみてください！

広告をクリックしてもらえるサイトを作る方法【アドセンスCTR施策】

ブログ収益、簡単に増やしたくないですか？ 一番手っ取り早く収益化を目指すなら、「アドセンス広告のクリック数を増やす」のが一番です。 アフィリエイトで少ないPVで高単価を狙う方法もなくはないのですが、これは資産形成には向かない。 アフィリエイ...

buchikuma.xyz

2024.03.22

TOC+用コード公開

Tabel of Contentsは人気プラグインなので、各所でコード公開されています。

基本的には自己責任となりますが、セレクタさえ間違えなければ大丈夫なはずです。

ただし、今回は「箇条書きリスト」についての知識も少し必要になるので、うまくいかない場合は諦めてCocoon利用をお勧めします。

コピペでOK

はい、コードを書いておきましたので、コピペでOKのはずです。

Cocoonにそのまま流用しようとしたら、うまく表示できませんでしたね。Cocoon用は今後公開する予定です。

/*TOC全体設定*/
#toc_container {
  display: block;
  width: 100%;
  background: #fff;
  border: 1px solid #ccc;
  box-sizing: border-box;
	line-height: 1;
	margin: 2em auto;
  padding: 1em 2em;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
    border-top: solid 5px #4a61a9;
}
 
/*目次のタイトル*/
#toc_container .toc_title {
  text-align: center;
	margin: 0 0 0 2px;
  padding: 0.4em 0;
	font-size: 1.4em;
  border-bottom: 2px solid #cce5ff;
}
 
/*ul全体の設定*/
#toc_container ul {
    list-style: none;
    margin-bottom: 0;
}
 
/*li全体の設定*/
#toc_container ul li {
    margin: 0;
    padding-left: 0;
    text-indent: 0;
}
 
/*小見出し*/
#toc_container ul a {
 display: inline-block;
 text-decoration: none;
 color: #444;
 border-bottom: 1px dotted #ccc;
 font-size: 14px;
}
 
/*大見出し*/
#toc_container .toc_list > li > a {
 border-bottom: 1px solid #ccc;
 font-size: 16px;
}
 
/*大見出しのアイコン*/
#toc_container .toc_list > li > a:before {
    font-family: FontAwesome;
	content: 'f0a7';
    color: #454545;
    font-size: 100%;
    padding-right: 5px;
}
/*INDEXのアイコン*/
p.toc_title:before {
    font-family: FontAwesome;
	content: 'f0cb';
    color: #454545;
    font-size: 100%;
    padding-right: 5px;
}
/*小見出しのアイコン*/
#toc_container li li > a:before {
    font-family: FontAwesome;
	content: 'f13a';
    color: #454545;
    font-size: 100%;
    padding-right: 5px;
}
 
#toc_container ul ul {
	padding: none;
}
 
#toc_container li {
 margin-bottom: 0.8em;
 padding-bottom: 0.2em;
}

CSSのカスタマイズ方法

以下のサイトを参考にしました。

記事の目次【Table of Contents Plus】をオシャレにカスタマイズ！ – パソコン生活サポート Pasonal

pasonal.com

というか、多分このサイトのやつでもういいんじゃないかってくらい、シンプルで使いやすい目次が作れます。

しろくまさん

しかも、CSSコピペでOK。

はい、Simplicityでは、一部表示がうまくいかないところが出てきましたね。

ここからディベロッパーツールでにらめっこですね。デベロッパーツールの使い方は、Cocoonの見出しカスタマイズで丁寧に解説しました。

【Cocoonカスタマイズ】超初心者でも自分好みに「見出し」を変える！

今回は無料のWordPressテーマで国内最高峰のクオリティの「Cocoon」を使った見出しのカスタマイズ方法を、これでもかってくらいに画像を使って説明してみました。ほぼ何もできない状態の初心者の方でも、きっと自由にカスタマイズできるくらいのわかりやすさを目指したつもりです。まずはその第一段階、Google Chromeのデベロッパーツールの使い方も説明しました。

buchikuma.xyz

2024.03.22

今回いじったところ

インデックスタイトルにアイコン

まず、INDEXのところ、見出しタイトルにfontawesomeからアイコンをつけました。

ぶちくま

Indexだけで「目次」の意味がさっと読み取れないよね。

アイコンがあると、なんとなく見出しリストが出てきそうだな、っていう感じが出てきますなぁ。

表示/隠すをオンオフに

あと、地味に「表示/隠す」ってやつを「on/off」にしました。

「hide/show」よりも日本人には馴染みがいいかなぁと思いまして。

できれば、ここもスイッチみたいにしてやろうと思いましたが、別にここはクリックして欲しいところじゃないので、カチカチされてても1円も入らないしカロリー消費を考えて割愛。

でも、いつかはやってみたいなぁ。

余白調整

あとは、marginの調整ですね。全体設定のところのmarginは若干幅取りすぎたので切りました。

Border-topをサイトカラーに

プチ変更として、上部にborderを入れて、ブログのテーマカラーを強調してみました。
ちょっと立て看板ぽくなりましたね。

なので、影も入れて浮いてるような感じに。

影は、全体設定のCSSに、box-shadowを入れて調整。

アイコン設定を微調整中

アイコンはいつも何を使うか悩みますね。

今回はスペースシャトルと紙飛行機にしてみました。

リンク先の見出しに飛んでいくイメージですね。

鉛筆とか、地図関連のアイコンでもいいかなぁと思っています。矢印や記号形はもちろん相性バッチリですね。色々試してみます。