【Cocoon】「CSSとか無理」なヒトでも試せる!簡単目次カスタマイズ

初心者目次アイキャッチ
この記事は約3分で読めます。

WordPressをいじるようになって10日程経過しました。楽しい(それはよかった)。

とりあえずこれ使っとけ!と言われる無料テーマ『Cocoon』で挑戦しております。

めっちゃやりやすい。

特にこの文を打っている  ビジュアルエディタ というシステムが助かってます。
サイト運営初心者でも簡単に見やすい記事にしてくれる。いいヤツです。

しかし、一点困った部分が。

目次です。

. .. ... Sponsor Link ... .. .

そもそもの役割を考える

スマートフォン表示だと文字数の多さが合わさり、目次の段階で読みにくい

cocoon 目次 カスタマイズ
検索

と検索してできそうなものを実践してみるも、最終的には自分の好みをカスタマイズしなくてはならず、結局困る。

勿論、サイトを運営していくにはCSSなんか勉強した方が良いだろうけど、記事をアップするのに必死でそこまでの余裕ないですよね。

どうしよう。

で、ふと気付いたこと。


 目 次 っ て な ん だ ? 

目次とは
検索

目次は、その内容を検索する際において利便性を与えるために付与される箇条書き形式のページもしくはその集まりである。
情報処理分野の情報検索においてはインデックス(索引)という考えもあるが… 略
ネット上の文書においては各節・章へのリンクを列記している場合が多い。
https://ja.wikipedia.org/wiki/%E7%9B%AE%E6%AC%A1

へえ。
そうだよ、目次ってもっとシンプルでいいはずだよ。

本文を読んでもらうために使っている機能なのに、目次でブラウザバックさせてどうする、と。
私の親切心が見づらさに繋がってしまったようでしたわ。

ということで、

カスタマイズなし或いは最低限のカスタマイズだけでそれっぽく仕上がるように、目次を洗練していこうと思いますよ~。

文字数を削る

これが、修正前の目次。
ちょこっといじってみましたが、親項目に下線が入ってしまっただけで、そもそもの見づらさは変わりません。


「目次とは何か」を考えながら削りました。
この位ならまぁ見られますね。

文字サイズを小さく、まとまりよく

文字の大きさを小さくできれば目次っぽくなって、なんかいい感じになりそう。
でも、フォントサイズを変えるCSSがよくわからん。

初心者も扱えてすぐ反映できるカスタマイズはないかな、と調べたところ、以下のサイトにあるものが良かったです。

Cocoonの「目次」デザインをシンプルかつオシャレにCSSカスタマイズする
WordPressの無料テーマ「Cocoon」の目次をシンプルかつおしゃれ風にCSSカスタマイズしました。主に目次の位置を中央寄せ、下線を引く、行間の調整などを行っています。コピペ用のCSSコードもあるので自分好みに調整して利用していただければ!

コンパクトになって、ごちゃついた印象は薄くなりました!

「目次」と認識してもらう

全体的に白いので、少しアクセントが欲しいです。
こちらのアニメーションなしのシンプルカスタマイズをお借りしました。

【Cocoon】目次のデザインをカスタマイズしてアニメーションも追加してみた
WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回はCocoonに標準で備わっている「目次」のデザインをカスタマイズしていきたいと思います。開閉させる時にうぃーんとアニメーションさせてみました。完成するとこのようになりま

目次アイコンもついて、結構いい感じになったんじゃないかな。

そんな感じでざっくりでしたが、目次をキレイにする個人的ポイントは以下。

初心者でもチャレンジできる
「目次」まとめ

自分にとって目次とは何か?を考え、整理
後々修正しやすいシンプルなCSSを組み合わせて乗り切る

それすら大変なら文字サイズを小さくすればなんとなくオシャレになる感じがする

19.04.11  追記 

記事内にのせる目次はもうできたよ~というヒト向けですが、
目次をサイドバーにも表示する」に悪戦苦闘した記事を更新しました。
気になるヒトは参考の参考にでもどうぞ…。

【初心者向け】目次をサイドバーにも表示して、お互いを有効活用しよう
みなさん、サイドバーはお好きですか?サイドバーに関して検索してみると「好きか嫌いかは置いといて、サイドバーって見られな......

あの、この記事初期の初期に勢いで書いたので恥ずかしいです。
でも個人的にこの目次好きなので、関連記事も残しておこうと思います。


以上、参考になれば幸いです!

コメント