Cocoonでブログカードをタイトルと画像のみにする方法

DINK’s夫婦のサク(@chilltimeBlog_8)です。

当ブログはCocoonをテーマに利用させていただいているのですが、無料とは思えないほど機能が充実していてとても満足しています。

しかし、
「ブログカードの本文抜粋部分(スニペット)、いらないような…」

本文抜粋部分って文字が小さくて見にくいし、いつも読まない。

それだったら、本文抜粋部分は非表示にしてタイトルと画像のみにした方がスッキリするんじゃないかと考え、すぐに試してみました！


では、「ブログカードの本文抜粋部分を非表示にするカスタマイズ」を紹介したいと思います。


Cocoonユーザーでブログカードに悩む方はぜひ、「ブログカードの枠線やラベルが出すようにカスタマイズ」する方法もご確認下さい。

「ブログカードの本文抜粋部分を非表示にする」場合のゴール地点

まずは、「ブログカードの本文抜粋非表示」がどんなものか見た方が早いと思いますので、以下をご確認ください。

【Cocoon】ブログカードでラベルや枠が表示されない時の対処法

Cocoonのブログカード機能はとても便利ですが、当ブログでは「ラベルと枠線が表示されない」という状態に陥りました。何とかcssをカスタマイズして解決したのですが、ネット上ではわかりやすい解説がなかったのでブログにて対処法を紹介します。

chilltimeblog.com

こんな感じで、内部リンクのブログカードをタイトルのみ表示させ、スッキリとしました。

読者の方の目線で考えた際に、見やすいですし、何よりもちゃんと読めるのでクリックしてみようという気になりやすいかなぁと考えました。


それであれば、このようにスッキリと表示するのもありですよね！

ブログカードの本文抜粋部分を非表示にする方法

早速、どうやって「本文抜粋部分を非表示にする」のか紹介します。

ずばり、「Style CSS」に以下のコードを追記すると、対応することができますよ！

/*ブログカードのスニペット非表示*/
.blogcard-snippet {
 display: none;
}

ブログの管理画面から、
「外観」→「テーマエディター」→「スタイルシート(style css)」と順にクリックし、
上記のコードを追記してみて下さい。

その上で、更新ボタンを押していただくと、内部リンクブログカードの本文抜粋部分(スニペット)が非表示になるはずです。

「ブログカードの本文抜粋部分(スニペット)を非表示にする方法」まとめ

というわけで、本日は「内部リンクのブログカードの本文抜粋部分(スニペット)を非表示にする方法」を紹介させていただきました。

CSSへのコピペだけで簡単にできるので、気になる方は是非トライしてみて下さいね！

そして、CSSの編集後は必ず確認作業をするようにして下さい。

実際に確認をしてみていただいて、ブログカードがアイキャッチ画像とタイトルのみになっていれば成功です！

小さなことを積み重ねて、ユーザー目線のより良いサイトを作っていきましょう！

Cocoonに関する情報は、「Cocoonにグーグルアドセンスを設置する簡単な方法」など紹介していますので、Cocoonユーザーの方はぜひご参考ください。