めんどくさいが口癖、でも効率化のためなら頑張れる！ゆる子です。
ブログ記事を書き進めるなかで、「目次の見にくさ」が気になり改善しました。
特別に難しいことはしていません。
ゆる子のような、初心者でもできる行間を整えるだけのシンプルな方法です。
この記事を読めば、見やすい目次を作る手順がわかりますよ。
目次を見やすくするには行間を広げるといい
「目次が見にくい」ブログ記事を投稿してみて、違和感をかんじました。
文字がぎゅうぎゅうに詰まっているような感じがするんですよね。
ゆる子記事を読みやすくするために置いているのに、これじゃあ先を読む気がなくなってしまいます・・
他の人のブログと比べると、どうも行間が狭いと感じました。
行間ひとつで目次が見やすくなるなら、やらない手はない！実際の手順もカンタンでした。
SWELLの目次の行間を変える方法
私のブログテーマはSWELLを使っています。
「目次の行間を広くして！」という指示を出すために、CSSの追加をしてあげます。
WordPress管理画面から、「外観」＞「カスタマイズ」＞「追加CSS」の順で開きます。
画像左の、白い空白部分がCSSを入力する場所です。
すでに何か入力されている場合は、一番下にコードを入力してください。
はじめてCSSを入力する人はここが真っ白なので、そのまま入力します。
ゆる子この画面にCSSを入力すると、目次一覧の行間が広がり、読みやすさがぐんとあがります！
以下のCSSコードを入力します。
とは言っても手入力では打ち間違えもあります。
右のコピーアイコン（）で簡単にコード全文をコピーできますよ。
行間の微調整をしたいときは、line-height: 2; の数値を変えてみてくださいね。
1.5や2.5など、小数点で入力してもOKです。
追加CSSの入力画面は、実際の変化を確認しながら作業できるので、とても便利です。
「公開」ボタンを押して保存します。
実際の記事でも確認をします。
編集画面では気付かないことや、スマホでの表示も見ておきます。
目次の行間が少し広くなって見やすくなりましたね。
次のビフォーアフターで比べると差がよくわかります。
本をよく読む人ならビフォーでも違和感はないのでしょうが・・
私は活字苦手なので、なるべくストレスは減らしたいんですよね（笑）
窮屈な感じもなくなり、すっきりとまとまって見えるようになりました。
まとめ：初心者でもカスタマイズで見やすさは叶えられる
今回のカスタマイズで、目次の行間を広げることをしました。結果、読みやすさがぐっと改善されました。
目次の行間ひとつで読む気が変わるなんて、実際に体感して調整してみて、はじめて感じられた気がします。
たった一つの小さなカスタマイズでも、読者の読みやすさはかなり変わります。
「読んでみて気になるポイント」をカスタマイズするという視点は、これからのブログを育てていくうえで役に立つはず。
これからも私のつまずきと共に、ブログカスタマイズの紹介もしていきますね。
コメント