【Cocoon】ブログカードのカスタマイズ

こんにちは、ブログ歴15年、Wordpress歴8年のLeoです。

LEOLOGのテーマを「Cocoon」に変えて1ヶ月半になりますが、最近滅多に使わなくなった「ブログカード」もカスタマイズしたので記録しておきます。

↑こんな感じのブログカードを…

↑こういう感じで軽くリデザインしました。

では、このカスタマイズに興味ある方は続きを読んでってください！

これ以外のCocoonカスタマイズをまとめた記事は以下でご覧いただけます！

ブログカードのカスタマイズ法

サクッと紹介していきますが、

Cocoonデフォルトだとどんな感じかというと、

こんな感じです。

「Cocoon設定」でサムネイルの位置や表示される日付のルールなどを指定できますので見た目が違う方は設定上の都合だと思います。

抜粋の長さ調整

これをカスタマイズするわけですが、

ボクはまず、「抜粋」の長さが長すぎると思ったのでそちらからいじりました。

「テーマの編集」からfunction.phpを開き、記述を追加します。

*当然ですが、この辺のことに詳しくない方は大変なエラーを起こす心配もあるので自信がない方はいじらない、or バックアップを取ってから作業しましょう。

//ブログカードのスニペット文字数
add_filter('cocoon_blogcard_snippet', function($snippet) { return get_content_excerpt($snippet, 60); });

他に多くの記述がある場合はわかりませんが、ボクは一番最後にブチ込んでいます。

これで、

タイトル下の抜粋欄が短くなりました。

「($snippet, 60)」の、60が抜粋の文字数です。ボクは60で設定していますが、好きな長さに指定できます。

CSSでデザインカスタム

続いてCSSをブチ込みますが、今回はこちらの記事を参考（コピペ）にさせていただいて、小調整でカスタマイズしています。

コードは上記の方から引っ張っていただければと思いますが、

ボクは余白と色を調整して使っています。

結果こういう感じに仕上がりました。

このカスタマイズの特徴

このカスタマイズでは、

などの点が変更・追加になっています。

カスタマイズする理由・メリット

ブログカードは使わない人は全く使わないと思いますが、ボクがここもいじった理由はサイト全体のバランスを整えるためです。

↑こんな感じのボックスを個人的に作って使っていることや、サイト全体のイメージをCocoonのデフォルト設定から大きく変えている都合から全体のバランスを整える意味でブログカードもカスタマイズしました。

逆にいうと、デフォルトのままでデザイン面で影響がなければ特にいじる必要性はないと思いますし、全く使わない人ならそもそも関係ない要素です。

デザインするメリットは、ブログカードを使っていろんなリンクを載せる人にとってはそれなりにあるかも知れません。

文章内でメリハリつけて外部リンクへ誘ったり、ブログ内での周回を促す効果があります。

まとめ・総括

以上！

関係ない人も多いかも知れないカスタマイズですが、以下の記事にカスタマイズあれこれをまとめている関係もあり記事にしておきました！

参考になれば幸いです！

ブログ歴15年のLeoによる「Cocoon」”上級カスタマイズ”25項目をまとめて紹介!!