cocoon備忘録

cocoonモバイルの目次幅が狭い「見出しをCSSでカスタマイズ」

cocoon 目次 表示 おかしい

 

この記事で出来る事

・モバイルでの目次の幅が狭すぎ(中央に寄っている)を修正

・ついでに目次の文字サイズも変更

(モバイルの目次の文字サイズ10、12に変更後の画像を載せてます)

 

 

スポンサーリンク

変更前の画像

現在cocoon(fuwari)を使用しているのですが、

PCで作業していると、モバイル表示も当たり前のように連動していると思ってまして・・・

ふと目次を見ると、

↑変更前

・見出しの文字数は極端に多くないのに、枠内が狭すぎて二段に改行されている(オレンジの矢印部分)

・外枠の左右も余白がありすぎ(ブルーの矢印部分)

これでは極端に短い見出ししか入りません。

そしてスマホで見た時に、目次が見辛い。

 

そこで今回カスタマイズして、下記のように作ってみます。

↑変更後

外枠はモバイルの横幅いっぱいに広がり、見出しの文字もしっかり一行でおさまってます。

(文字のサイズは変更前と同じです)

 

cssをネットで探しまくるも、似たような人がおらず(汗)

今回はcocoonのフォーラムで聞いてcssを教えてもらいました。

(いつもご親切にありがとうございます!)

同じ症状で困っている方、是非試してみて下さいね。

 

cssを書き込む場所

外観 テーマエディタ

 

1、左の「外観」 → テーマエディタを開く

2、スクロールして下に行くと

/*480px以下*/ の /*必要ならば~*/

の場所に以下のcssをコピペする。

.toc {
width: 100%;/* ココだけスキン */
margin: 1em 0;
padding: 1em 0.2em;
}
.toc ul,
.toc ul li {
padding-left: 0.2em;
}

 

↑実際にcssを書き込んだ画像

 

変更前と変更後

 

左が変更前、右が変更後

目次の外枠もいっぱいに広がっていますし、中の見出しも両端まで寄っていますね。

ここで完成ですが、以下では試しに

モバイルの目次の文字サイズを変更した時の画像とcss」を載せてます。

 

モバイルの目次の文字サイズも変更してみる

モバイルの文字設定は、

cocoon設定 → 全体設定 

から出来ます。以下の画像では「本文の文字サイズは16」にして目次だけサイズ変更してみました。

1、目次のみサイズ10

目次 モバイル cocoon サイズ

あまりにも小さすぎて、読みづらいですね。

 

2、目次のみサイズ12

これでまあまあでしょうか。

 

一応「モバイルの目次の文字サイズ変更」のcssを書いておきます。

.toc-content{font-size:12px;}/*文字サイズ*/

上記の文字サイズのcssのpxの数字を変えて試してください。
※ここで注意
タグを閉じる時、
一番最下部に } ←このカッコで閉じられてるか
確認してね。
私は結局のところ、モバイルの文字サイズ18に設定
(目次の文字サイズも連動で一緒)にしました。
と言うことで、今回はcocoon(fuwari)のモバイル表示の時に目次の幅が狭すぎる時の対処法をcssで紹介しました。

 

スポンサーリンク
シェアしてもらったら嬉しいです
ひきこも日記