【Cocoon】ボックスの中にあるリストの上下余白を調整する

Cocoon リストの余白を調整 Cocoon

先日、WordPressやCocoonのアプデがあり、そのせいなのか

リストの余白が大きく崩れる事象が当ブログで発生しました。

ブログの中をあちこちいじっているので、たぶんそれが元々の原因だと思います。

 

ブログを始めたころなら

わー、どうしよ、どうしよ」と大汗かきながら必死に直そうとしてましたが、

ブログを始めて1年半、それなりに知識がついてきた今はその程度なら余裕で直せます(^^)v

逆にこういったトラブルが起きるとネタにできるので重宝したりします笑

 

ではでは、せっかくの降って湧いてきた今回のネタ、

ボックスの中にあるリストの上下余白を調整する方法、早速いってみましょー。

スポンサーリンク

くずれたリストの余白

まず、今回起きた事象をみなさまにご紹介します。

これです!

リストの下に2emの余白(margin)ができた

ボックスの中にあるリストがいきなり浮上しました。

いつの間にかリストの下に2文字分(2em)の余白(marginマージンができてました。

リストの下に2emの余白(margin)ができた(2)

逆にリストの上にあった余白はなくなってます。

自分がいじったスタイルシートを見ても、特にこれといった原因は見当たりません。

調べればいずれ分かるんでしょうが、直した方が早そうです。

(調べてネタがなくなっても困るし)

要はリストの上下を同じ高さに作り直せばいいわけです。

Cocoonのボックスは5種類

修正する前にCocoonのボックスをもう一度確認しておきましょう。

Cocoonのボックスは大きく分けて5つのタイプがあります。

Cocoonの5種類のボックス

5種類のCocoonのボックス

この中で「アイコン」と「案内」のリストは、セレクタが[ul](数字やアルファベットのリストは[ol])、

白抜き」「タブ」「付箋風」は[.blank-box ul](同じく[.blank-box ol])です。

 

Google Chromeのデベロッパーツールで見てみると、Cocoonのデフォルト(初期状態)は

「アイコン」と「案内」のリストは上下に1emの余白(margin)がありますが、

「白抜き」「タブ」「付箋風」は余白がありません。

そしてすべてのリストに40px(ピクセル)の余白(paddingパディング)が左側にあります。

上下に余白が有るボックスと、無いボックス

ボックスの中にあるリストの余白は、

[ul,ol]と[.blank-box ul, .blank-box ol]のmarginを調整すればいいということです。

 

スポンサーリンク

リストの余白を調整するCSS

CSSを編集したことのある方はご存知だと思いますが、初心者の方もいると思いますので、

今回も編集のやり方をかんたんに説明させていただきます。

CSSの編集は、WordPressダッシュボードの「外観」→「テーマエディター」をクリックします。

Cocoon テーマエディター

 

編集するテーマは「Cocoon Child」を選択して、

このスタイルシートにこれから出てくるCSSコードを貼り付けて下さい 。

Cocoon スタイルシート

 

どこに貼り付けたらいいの?と不安な方は「子テーマ用のスタイルを書く」の直後にどんどん貼り付けていきましょう(ここで貼り付けているのは、記事とはまったく関係のないコードです)。

コードをスタイルシートに貼り付ける

「アイコン」と「案内」のコード

/*「アイコン」と「案内」の上下余白*/
ul, ol{
margin: 3em 0;
padding-left: 40px;
}

CSSコードの貼り付け方(例)

アイコン」と「案内」のリストは、上のコードを使います。

デフォルトとの違いが分かりやすいように上下の余白は3文字分にしてみました。

上下の余白が「1em」のボックスと「3em」のボックス

「3em」は、「0.5em」(0.5文字)や「1.5em」(1.5文字)など、お好みの数字に変更して下さい。

[em]を使わずに[px](ピクセル)でも指定できます。

もし、CSSコードをコピペしたのに何も変わらないという場合は、

面倒だと思いますが1文字1文字、手で入力してみて下さい。

なぜかコピペだとコードが効かなくなることがよくあります。

「白抜き」「タブ」「付箋風」のコード

/*「白抜き」「タブ」「付箋風」の上下余白*/
.blank-box ul,.blank-box ol{
margin: 2em 0;
padding-left: 40px;
}

白抜き」「タブ」「付箋風」のリストは、上下の余白が「0-ゼロ-」だったところに「2em」の余白を作りました。

上下の余白が「0em」のボックスと「2em」のボックス

この3つのリストはもともと上下に余白がないので、余白を減らすにはボックスのpaddingを調整します。

ボックスのpaddingを使って調整

デフォルトは上下の余白が21.6pxで、左右が18pxです。上下の余白を減らして5pxにしてみましょう。

/*「白抜き」「タブ」「付箋風」の上下余白を減らす*/
.blank-box{
padding:5px 18px;
}

21.6pxの余白を5pxへ変更

ただし、これをやるとリストを入れないボックスも小さくなるので注意して下さい。

その記事だけの設定を変更するには、編集ページの下の方にある「カスタムCSS」へコードを入力します。

そうすると他のページには影響が一切ありません。

「カスタムCSS」へコードを入力

最後に

というわけで、今回はボックスの中にあるリストの上下余白を調整する方法でした。

余白の大きさの好みは人それぞれなので、いい感じに調整してみて下さい。

ボックスの大きさを変える方法は他にもあります。よろしければ関連記事もどうぞ。

本日は最後まで読んでいただき、ありがとうございました。

コメント