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

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

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

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

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

スマホ表示も同様です。

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

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

「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」で解決できることがあります。困ったときは是非試してみてください。

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

・【スキルなしでもOK！】記事へのアクセスが増えるおしゃれな『アイキャッチ画像』の作り方【canva】
・【その画像の著作権、大丈夫ですか？】僕がおすすめする『安心のフリー素材サイト』9選！
・【Twitterデータ公開してます】14日間でフォロワーを2,000人増やすノウハウ。
・【2020年最新版】キャッシュレス初心者向け、おすすめのQRコード決済4選！
・【本を聞くアプリで効率アップ】オーディオブックおすすめTOP5を徹底比較！