当サイトではワードプレスのテーマ THE THOR を利用しています。 THE THOR の様々なカスタマイズを記事にしているので是非、いろいろ見ていってください。
今回は目次の文字揃えをします。カスタマイズの出来上がりは以下のようになります。
カスタマイズ前↓
カスタマイズ後↓
※このカスタマイズは THE THOR の標準状態の目次にあわせて行っています。目次をカスタマイズ済みの方は、適用しているカスタマイズに合わせて数値を変更してください。
THE THOR 目次の文字を揃える仕組み
目次を揃える基本的な仕組みは「目次番号の横幅分だけ全体を右にずらし、目次番号の行のみ右にずらした分を左に戻す」というカタチになります。
文章だとわかりづらいので図を見てご確認ください。
目次の文字を揃えるcss
目次の文字を揃える基本は前述の通りとなりますが、設定により文字サイズが異なったりしますので現物合わせで仕上げました。
なお、PC表示には対応していません。PC表示時に二行になることはなかなかないと思うので良いかと思っています。PC表示でも文字サイズが設定により変化するのでそれぞれ対応しなければなりません。気になる人はメディアクリエを使用して設定すると良いかと思います。
以上を踏まえてカスタマイズを行います。
※カスタマイズは自己責任でお願いします。
追加cssにコードを記述します。
外観 → カスタマイズ → 追加css
記述するコードは以下の通り。
/* 目次文頭揃え */
.outline__link {
padding-left:2em;
text-indent: -2em;
}
.outline__number{
text-indent: 0;
}
.outline__list-3 .outline__link {
padding-left:2.85em;
text-indent: -2.85em;
}
text-indentは最初の行のみに適用されるcssです。
数値は現物合わせで決定しているので上手く揃わない場合は、色々と変更してみてください。padding-leftが右に動かしtext-indentで左に戻します。一つ目がh2、二つ目がh3の設定となっています。それぞれのサイトに合わせ数値を変更してください。
別途で目次をカスタマイズしている場合はうまく機能しない場合があります。
※当サイトの目次はカスタマイズしているのでコレとは別の方法で目次の文字揃えをしています。
このカスタマイズは↓この本を参考にしました。
あとがき
見た目で気になるし、揃っていないと可読性が低下します。読めなければクリックもされないわけで目次を表示している意味がなくなってしまいます。
ユーザビリティが上がれば滞在時間が長くなりGoogleの評価も上がるかも知れません。回遊率、クリック回数も上がる可能性も･･･っていう大義名分で見た目重視の自己満足プチカスタマイズでした。おしまい。
