Cocoonで記事に目次を表示してみたら、
「あれ？目次って意外と大きい……？😂」
と、ちょっと気になりました。
目次があると記事の内容がひと目で分かって便利なのですが、できればもう少しコンパクトにして、記事の邪魔をしない感じにしたい。
そこで今回は、Cocoonの目次の文字サイズや余白をCSSで調整して、少し小さくスッキリ表示してみました♡
あわせて、Cocoonで目次を表示する設定や、「開く・閉じる」の切り替えについても紹介します。
「目次を表示してみたけど、ちょっと大きいかも？」と思っている方の参考になれば嬉しいです😊
まずはCocoonで目次を表示してみました
これまでHanya-memoでは、目次を表示しない設定にしていました。
でも記事が少しずつ長くなってきて、「目次があった方が読みやすいのかな？」と思い、今回初めて表示してみることに😊
Cocoonには最初から目次機能が用意されているので、プラグインを追加しなくても設定だけで表示できます。
設定する場所は、
「Cocoon設定」→「目次」
です。
ここで「目次を表示する」にチェックを入れると、記事内に目次が表示されるようになります♡
Cocoonの目次設定を見てみます
「Cocoon設定」→「目次」を開くと、目次の表示について細かく設定できます。
私は今回、こんな感じに設定しました😊
・目次を表示する
・投稿ページに表示
・見出しが3つ以上あるときに表示
・目次に表示する見出しはH3まで
・「開く・閉じる」の切り替えを表示
Cocoonでは、目次を最初から開いて表示することも、閉じた状態にしておくこともできます。
私は記事を開いたときにスッキリ見せたかったので、最初は閉じておいて、読みたい方が「開く」を押せる設定にしました♡
このあたりはブログの好みに合わせて選べるので、「こんな機能もあるんだな」くらいで大丈夫です😊
目次を表示してみたら、ちょっと大きい…？
設定ができたので、さっそく記事を確認してみました。
ちゃんと目次が表示されて、「おお、できた♡」と思ったのですが……
「あれ？ちょっと大きいかも😂」
目次自体はとても便利なのですが、私のブログではもう少しコンパクトな方が、記事全体の雰囲気に合いそうでした。
文字を少し小さくして、上下の余白ももう少し狭くしたい。
そこで、CSSを使って目次の見た目を少しだけ調整してみることにしました😊
CSSで目次を小さくコンパクトにする方法
目次の大きさは、CSSを追加することで調整できます。
今回は、文字サイズを少し小さくして、行間や余白も狭くしました。
さらに、Hanya-memoの雰囲気に合わせて枠線を淡いピンクにしています♡
追加したCSSはこちらです。
/* ===== 目次をコンパクトに可愛く ===== */
.toc {
font-size: 11px !important;
line-height: 1.5 !important;
padding: 12px 18px !important;
border: 1px solid #f4c7cf !important;
border-radius: 10px !important;
}
/* 目次タイトル */
.toc-title {
font-size: 14px !important;
margin-bottom: 8px !important;
}
/* 項目同士の間隔 */
.toc-content li {
margin-top: 3px !important;
margin-bottom: 3px !important;
}私と同じように気になる方は、下のCSSを追加してください。
/* 目次タイトルを少し下に調整 */
.toc-title {
transform: translateY(2px);
}このCSSでは
・目次全体の文字サイズを小さくする
・行間を少し狭くする
・目次の内側の余白を小さくする
・項目同士の間隔を詰める
・枠線を淡いピンクにする
・角を少し丸くする
という調整をしています。
文字サイズや余白は好みがあるので、自分のブログに合わせて数字を少しずつ変えてみてもOKです😊
CSSはどこに追加する？
CSSを使うのが初めてだと、
「このコード、どこに貼ればいいの？😯」
となりますよね。
今回は、WordPressの「カスタマイズ」にある「追加CSS」に貼り付けました。
「外観」→「カスタマイズ」→「追加CSS」
と進み、先ほどのCSSを追加します。
コードを貼り付けたら、目次の表示を確認して、問題なければ「公開」をクリックすればOKです♡
CSSを追加するとこんなにコンパクトに♡
CSSを追加したあとの目次がこちらです😊
最初の状態と比べると、文字が小さくなって余白も少しスッキリ。
目次としての見やすさは残しつつ、記事の中で主張しすぎないサイズになりました♡
枠線も淡いピンクにしたので、Hanya-memoの雰囲気にもなじんでくれています。
ほんの少し文字サイズや余白を変えただけですが、印象はかなり変わりました。
私は最終的に目次の文字サイズを11pxにしていますが、ここはブログのデザインや好みに合わせて調整してOKです😊
「11pxだと少し小さいな」と感じる場合は、12pxや13pxなどに変更しながら、自分のブログにちょうどいいサイズを探してみてください♡
まとめ｜Cocoonの目次を自分好みにコンパクトに♡
Cocoonの目次は、そのままでも見やすくて便利ですが、CSSを使えば文字サイズや余白などを自分好みに調整できます。
今回Hanya-memoでは、
・目次の文字を小さくする
・行間や余白を調整する
・項目同士の間隔を少し狭くする
・枠線を淡いピンクにする
・角を丸くする
というカスタマイズをしてみました😊
ほんの少し調整しただけですが、目次がコンパクトになって記事全体になじむようになりました♡
そしてCocoonには、目次を最初から開いておくか、閉じておくかを選べる機能もあります。
「目次は便利だけど、ちょっと大きいな」
「もう少し自分のブログに合う見た目にしたい」
そんなときは、ぜひ少しずつ調整してみてください😊
私も最初は「目次ってあった方がいいのかな？」から始まったのですが、気づけば目次まで自分好みにカスタマイズしていました（笑）
こうしてまた、Hanya-memoの「気になったところ」がひとつスッキリしました♡