どうも、ぶちくまです。
SimplicityでTable of Contents PlusのCSSをカスタマイズしてみました。
アイコンがとても素敵で、シンプルでかっこいいパソナルさんの公開しているCSSを参考にしています。
余白調整だけでなかなかいい感じに仕上がりました。
最近の一番の気晴らしは、自分のブログのCSSをカスタマイズすることですね。
というわけで、今日は目次をカスタマイズしてみました。
Table of Contents Plusで目次を作成
今回は、もうプラグイン使いましょう。
目次の作成といえば、もうこれっきゃないってくらいに有名。
TOC+こと、Table of Contents Plusですね。
これは、ほとんど設定不要で、とりあえずインストールして有効化すれば、もう目次が設置されているっていう、初心者にも使いやすいプラグインです。
今回はこのプラグインで作られた目次(index)をCSSでカスタマイズしていきます。
Cocoonユーザーなら目次作成もプラグインいらず
Cocoonカスタマイズも参考にしてみてください!
最低限の設定
TOCを有効化した、という前提から話を進めます。
上級者向けCSSスタイルを利用
管理画面から「設定」タブより、TOC+っていうのがあります。
ここの下の方にある、「上級者向け」を表示、その中にある、「プラグインのCSSスタイルを読み込まない」やつをチェックすればOK
タイトル次第でクリック率が変わる
あとやることといえば、見出しテキストのタイトルを「目次」や「index」など、好きな文字に変えるくらい。
あと、上級者向けの見出しレベルの設定くらいでしょうかね。
ぶちくまはh2とh3だけ表示するようにしています。h4が、ぶちくまサイトだと長文で起用していることもあるからね。
そうなると、少しインデックスだけで一画面埋め尽くしちゃうから、それ見ると大概の人は離脱するよね。
ちなみに、アドセンスのクリック率を上げたい場合は、目次を閉じておくことをお勧めします。というのも、サイト訪問者が、コンテンツに触れる(タップ、クリック)することに慣れておくことで、広告へのクリック率が上がるからです。
アドセンス収益を増加させた方法についてまとめた記事も参考にしてみてください!
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のカスタマイズ方法
以下のサイトを参考にしました。
というか、多分このサイトのやつでもういいんじゃないかってくらい、シンプルで使いやすい目次が作れます。
しかも、CSSコピペでOK。
はい、Simplicityでは、一部表示がうまくいかないところが出てきましたね。
ここからディベロッパーツールでにらめっこですね。デベロッパーツールの使い方は、Cocoonの見出しカスタマイズで丁寧に解説しました。
今回いじったところ
インデックスタイトルにアイコン
まず、INDEXのところ、見出しタイトルにfontawesomeからアイコンをつけました。
Indexだけで「目次」の意味がさっと読み取れないよね。
アイコンがあると、なんとなく見出しリストが出てきそうだな、っていう感じが出てきますなぁ。
表示/隠すをオンオフに
あと、地味に「表示/隠す」ってやつを「on/off」にしました。
「hide/show」よりも日本人には馴染みがいいかなぁと思いまして。
できれば、ここもスイッチみたいにしてやろうと思いましたが、別にここはクリックして欲しいところじゃないので、カチカチされてても1円も入らないしカロリー消費を考えて割愛。
でも、いつかはやってみたいなぁ。
余白調整
あとは、marginの調整ですね。全体設定のところのmarginは若干幅取りすぎたので切りました。
Border-topをサイトカラーに
プチ変更として、上部にborderを入れて、ブログのテーマカラーを強調してみました。
ちょっと立て看板ぽくなりましたね。
なので、影も入れて浮いてるような感じに。
影は、全体設定のCSSに、box-shadowを入れて調整。
アイコン設定を微調整中
アイコンはいつも何を使うか悩みますね。
今回はスペースシャトルと紙飛行機にしてみました。
リンク先の見出しに飛んでいくイメージですね。
鉛筆とか、地図関連のアイコンでもいいかなぁと思っています。矢印や記号形はもちろん相性バッチリですね。色々試してみます。
コメント
「election groups denial」に関する最新情報です。
2024年の選挙を混乱させるために計画を立てている選挙否認グループについての内部情報が明らかになっています。True the VoteやMichael FlynnのAmerica Projectなどのグループは、選挙不正に関する根拠のない主張を広め、新しいテクノロジーを導入してトランプ支持者を組織しようとしています。これらのグループは、投票所や投票箱を監視し、有権者登録を大量に異議申し立てし、有権者や選挙関係者を威圧・嫌がらせする方法についてのトレーニングセッションを開催しており、新しいテクノロジーを導入する準備をしています。これらの努力は、2024年の選挙に大きな影響を与える可能性があり、有権者を不利にし、米国の選挙が不正であるという誤った認識を広める可能性があります。
https://www.wired.com/story/election-denial-groups-november-2024/
「交際 交際 隠す 隠す」に関する最新情報です。
大谷選手の妻である真美子さんの扱いが日米で異なる。日本では交際を隠し、周囲にも秘密にしていたが、アメリカでは堂々と夫婦として行動し、公表したことでアメリカの野球ファンの間で話題になった。現在も日本では妻のニュースが話題だが、アメリカでは落ち着いている。
https://toyokeizai.net/articles/-/742316?utm_source=rss&utm_medium=http&utm_campaign=link_back