Cocoonのおすすめカードの文字がはみ出たときの対処法を紹介

最近Wordpressテーマの「Cocoon」におすすめカードのアップデートがありました。私はこのアップデートをきっかけにおすすめカードを導入したのですが、”画像下段を黒背景にしタイトルを重ねる”という方法の場合、スマホ表示だと文字がはみ出てしまう問題に直面しました。

なので今回はおすすめカードの文字がはみ出たときの対処法を紹介したいと思います。

先に結論

「手っ取り早く対処法だけ知りたい!」という方のために結論から紹介します。

※これから紹介する対処法は私の環境下でのものです。これでも解決しないという人は後述する解決手順をご覧ください。

Cocoonの外観からテーマエディターに移動して以下のCSSを記述すればOKです。

/* おすすめカード */
.widget-entry-cards.large-thumb-on .card-content{
	max-height:50%;
}

このコードは以下の画像のように文字を表示する黒背景の最大高さを40%→50%にしたものです。%数値を変えることで表示する高さを工夫することができます。

解決手順

私がこの問題に直面した際の解決手順を紹介します。

① 直したい場所を確認する

今回はおすすめカードのこの部分をもっと広くして文字がはみ出ないようにします。

② デベロッパーモードでおすすめカードの構造を確認する

CSS記述後

デベロッパーモードで直したい部分のCSSを確認するとこのような記述が出てきます。

赤線部の”max-height: 40%”を”max-height: 50%”に書き換えたいのですが、デベロッパーツールではそれは不可能なので次のステップに行きます。

青線部は環境によって異なる場合があるので、表示されたものをあとで記述しましょう。

デベロッパーツールの使い方は以下のサイトが分かりやすいです。特にテスト的にHTML&CSSを書き換えれることを知っておくととても役に立ちます。

初心者向け!Chromeの検証機能(デベロッパーツール)の使い方
Googleクロームの便利な「要素の検証」機能の使い方を分かりやすく解説します。ウェブデザインをする人が特に知っておくべき機能を中心に紹介していきます。

③ CocoonのテーマエディタにCSSを記述する

/* おすすめカード */
.widget-entry-cards.large-thumb-on .card-content{
	max-height:50%;
}

先程の赤線部青線部のところをテーマエディタに記述して保存したら終わりです。

まとめ

皆さん解決できましたか?この記事で問題を解決できたのなら幸いです。

あと今の時代レスポンシブルデザインが大事なので、こういう細かいところもちゃんとカスタマイズしたいですよね。そういうときにHTML&CSSやデベロッパーツールが使えるととても便利ですよ。

かわず

「かわずゲーマー」管理人のかわずです。ゲームをメインに本・動画・デバイスなど様々な情報を発信していきます。

かわずをフォローする
タイトルとURLをコピーしました