WordPressをいじるようになって10日程経過しました。楽しい（それはよかった）。
とりあえずこれ使っとけ！と言われる無料テーマ『Cocoon』で挑戦しております。
めっちゃやりやすい。
特にこの文を打っている ビジュアルエディタ というシステムが助かってます。
サイト運営初心者でも簡単に見やすい記事にしてくれる。いいヤツです。
しかし、一点困った部分が。
目次です。
そもそもの役割を考える
スマートフォン表示だと文字数の多さが合わさり、目次の段階で読みにくい。
と検索してできそうなものを実践してみるも、最終的には自分の好みをカスタマイズしなくてはならず、結局困る。
勿論、サイトを運営していくにはＣＳＳなんか勉強した方が良いだろうけど、記事をアップするのに必死でそこまでの余裕ないですよね。
どうしよう。
で、ふと気付いたこと。
目 次 っ て な ん だ ？
目次は、その内容を検索する際において利便性を与えるために付与される箇条書き形式のページもしくはその集まりである。
情報処理分野の情報検索においてはインデックス（索引）という考えもあるが… 略
ネット上の文書においては各節・章へのリンクを列記している場合が多い。
https://ja.wikipedia.org/wiki/%E7%9B%AE%E6%AC%A1
へえ。
そうだよ、目次ってもっとシンプルでいいはずだよ。
本文を読んでもらうために使っている機能なのに、目次でブラウザバックさせてどうする、と。
私の親切心が見づらさに繋がってしまったようでしたわ。
ということで、
カスタマイズなし或いは最低限のカスタマイズだけでそれっぽく仕上がるように、目次を洗練していこうと思いますよ～。
文字数を削る
これが、修正前の目次。
ちょこっといじってみましたが、親項目に下線が入ってしまっただけで、そもそもの見づらさは変わりません。
「目次とは何か」を考えながら削りました。
この位ならまぁ見られますね。
文字サイズを小さく、まとまりよく
文字の大きさを小さくできれば目次っぽくなって、なんかいい感じになりそう。
でも、フォントサイズを変えるＣＳＳがよくわからん。
初心者も扱えてすぐ反映できるカスタマイズはないかな、と調べたところ、以下のサイトにあるものが良かったです。
コンパクトになって、ごちゃついた印象は薄くなりました！
「目次」と認識してもらう
全体的に白いので、少しアクセントが欲しいです。
こちらのアニメーションなしのシンプルカスタマイズをお借りしました。
目次アイコンもついて、結構いい感じになったんじゃないかな。
そんな感じでざっくりでしたが、目次をキレイにする個人的ポイントは以下。
初心者でもチャレンジできる
「目次」まとめ
自分にとって目次とは何か？を考え、整理
後々修正しやすいシンプルなＣＳＳを組み合わせて乗り切る
それすら大変なら文字サイズを小さくすればなんとなくオシャレになる感じがする
19.04.11 追記
記事内にのせる目次はもうできたよ～というヒト向けですが、
「目次をサイドバーにも表示する」に悪戦苦闘した記事を更新しました。
気になるヒトは参考の参考にでもどうぞ…。
あの、この記事初期の初期に勢いで書いたので恥ずかしいです。
でも個人的にこの目次好きなので、関連記事も残しておこうと思います。
以上、参考になれば幸いです！
コメント