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