【Cocoon】ブログカードの文字が見切れてしまう問題を解決します。【max-heightでOK】

こんにちは、yujiです！このブログでは、WordPressを使ったブログ運営について詳しくまとめています。

「ブログのトップページに並ぶブログカードの抜粋部分がうまく表示されません。」

このように、トップページに並ぶブログカードの抜粋部分がうまく表示されないことがありました。

このようにスニペットの後半が切れています。

スマホ表示も同様です。

この記事では、以上のようにブログ内で文字などが見切れてしまう問題を解決したいと思います。

※このブログはWordPress/Cocoonをベースにカスタマイズしています。

▶【大変だけどちゃんと稼げる】誰でもできるブログ収益化の方法をすべて解説します。
▶【2020年最新攻略法】Amazonアソシエイトの審査方法が変わる！アカウント作成から180日以内に少なくとも3つの適格販売が必要に。
▶【本を聞くアプリで効率アップ】オーディオブックおすすめTOP5を徹底比較！

「max-height」で高さ制限を解除する。

「max-height」を使って余裕のある高さ限度を指定し直すことで、文字が見切れていた部分がすべてが表示されるようになりました。

style.cssに「max-height」を追加する。

「外観」の「テーマエディター」から「style.css」を開きます。

トップページ・インデックスの大きなブログカードのコードが以下のように表示されています。

スニペットが表示されるボックスの高さ上限を伸ばすため、「max-height : 20em;」をsnippet部分に書き加えます。

.entry-card-snippet.card-snippet.e-card-snippet{
font-size:18px;
color:#545454;
text-align:center;
line-height:1.8em;
margin-left:40px;
margin-right:40px;
margin-bottom:10px;
max-height:20em;
}

「max-height:20em;」を挿入できたら「ファイルを更新」。

これでスニペットすべてが表示されるようになりました。

このように文字が見切れてしまった場合「max-height」で解決できることがあります。困ったときは是非試してみてください。

この記事が少しでもお役に立てたら幸いです。最後まで読んでいただき、ありがとうございました！

▶【本を聞くアプリで効率アップ】オーディオブックおすすめTOP5を徹底比較！
▶【WordPressを1分で開設】初心者のためのブログの始め方完全マニュアル【僕が毎月安定して10万円稼いでいる方法】
▶【大変だけどちゃんと稼げる】誰でもできるブログ収益化の方法をすべて解説します。
▶【その画像の著作権、大丈夫ですか？】僕がおすすめする『安心のフリー素材サイト』9選！
▶【Audibleの無料体験でオーディオブック1冊プレゼント！】0円でできることすべてと、50%OFFでお得に利用する裏ワザを公開します。