Cocoonのバージョンをアップデートしたところ、プロフィールボックスの本文の周りにガッツリ余白が入るようになり、見た目がちょっと変わってしまいました。
CSSコードを追加して余白が入らないようにアレンジし、テーマのアップデート前と同じ見た目に戻したので、今日はそのお話。
プロフィールボックスの余白が増えてる…？
私の運営するWordpressサイトでは、Cocoonテーマを使わせていただいています。
最近Cocoonを2.2.3.1にアップデートしたのですが、アップデート後、PC版でサイドバーに表示させているプロフィールボックスの見た目がちょっと変わってしまいました。
なんか…ギュッと詰まって縮んだ感じ？
プロフィール本文の左右の部分とか、以前はこんなに余白が空いてなかったと思うのです。もうちょっと外枠に近い部分まで本文が表示されてたような…。
私の別サイトではまだテーマのアップデートを済ませてなかったので、そちらのサイトのプロフィールボックスを見てみたら、こんな感じでした。
やっぱり、このサイトのプロフィールボックスほどの余白は空いてないですね…。
アップデート前の状態のほうが、余白が多すぎずバランスが良くて見やすいと感じます。こっちのほうがいいな。
プロフィールボックスの本文周囲の余白が多くなったのに気付いたときの、当サイトの環境はこんな感じでした。
もし似たような状況でお困りの方がいらっしゃれば、次項で記載するCSSコードを使っていただければ、以前と同じぐらいの余白に戻せるかもしれません。
対策用のCSSコードを追加
プロフィールボックスの本文の周りに適用されているCSSコードを調べてみたら、本文が表示される範囲の上下左右それぞれに1文字分ずつ余白を取るようになっていました。
ということは、この各1文字分の余白が無くなれば、以前と同じちょうどいい余白の見た目に戻るわけですよね？
原因が分かったので、早速『1文字分の余白を取らないようにする(余白ゼロ)』という指示のCSSコードを追加しました。
※クリックで全文選択されます。
/* Cocoon2.2.3.1 プロフィールボックス本文周りに増えた余白を元に戻す処理 */
.nwa .author-box .author-content {
padding: 0;
}私の環境では、上記のCSSコードを追加した結果、プロフィールボックスの本文周りの謎の余白を消すことができています。
CSSコード追加後、当サイトのプロフィールボックスはこんな状態。
無事、Cocoonアップデート前のときの余白具合に戻ってくれました！
ご紹介したCSSコードの追加前と追加後で並べてみるとこんな感じ。
Cocoon2.2.3.1アップデート直後 カスタム用CSSコード追加後
Cocoonアップデート直後の状態だと、本文の左右に余白が増えたことで一行あたりに表示できる文字数が減って、そのぶん行数も多くなり、プロフィールボックス自体が元々の状態よりも縦長になっちゃってたんですね。
プロフィールアイコンと名前のリンクとの間のスペースもちょっと多めになってる…。
CSSコードを追加して余白をもとに戻したあとは、プロフィールアイコンと名前のリンクの間隔もプロフィール本文の周りの余白もスッキリして、ちょうどいい感じになりました。
そうそう、前はこんな感じだったよ
私と同じくプロフィールボックスの余白増加にお困りの方は、ご紹介したCSSコードをコピーして、ご自身のWordpressサイトのカスタムCSSを書くところに貼り付けてお使いください。
まとめ
Cocoon公式サイトを見ていると、Wordpress5.5での仕様変更に合わせてテーマのCSSをいろいろ修正してくださっている最中のようですね。
私のサイトのWPバージョンが最新であれば、Cocoonのアップデートによってデザインが変わってしまうことは無かったかもしれませんが…WP本体のアップグレードはまだしばらく様子見しときたいんだよ…。
Cocoonのプロフィールボックスの余白のお話なので他のテーマをお使いのサイトでは参考にならないかもしれませんが、今回ご紹介したCSSコードが、プロフィールボックスの余白でお困りの方のお役に立てば幸いです。
