コロナに負けるな!ステイホームでブログを書きます!

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

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

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

この記事でやったこと

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

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

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

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

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

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

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

こんな感じです。

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

抜粋の長さ調整

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

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

function.phpに記述追加

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

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

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

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

これで、

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

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

CSSでデザインカスタム

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

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

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

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

このカスタマイズの特徴

このカスタマイズでは、

  • フラットなデザインに
  • マウスオーバーで上に浮き上がる
  • URLと日付が表示されないように
  • 代わりに「READ」というボタンが追加

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

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

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

こういうボックス

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

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

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

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

まとめ・総括

以上!

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

参考になれば幸いです!

ブログ歴15年のLeoによる「Cocoon」"上級カスタマイズ"25項目をまとめて紹介!!
最強無料テーマの「Cocoon」ですが、皆さんどんな感じでカスタマイズしているのか気になると思ってテーマ使用2ヶ月のボク...

この記事が気に入ったら
いいね!しよう

Leo Miyanagaを
Like
LikeLoveHahaWowSadAngry
このブログを書いてる人
Leo

コロナで色々バグった起業家😷
写真家/ブロガー/YouTuberなど色々やってます。愛機はα7III & RX100VII。
シアトル生まれ、大阪育ち→シアトルにも10年以上住んでましたが今は大阪ベース。
このブログではLeoの気になるコトや毎日の色んなコトを記録しています!
詳しいプロフィールはこちら

Leoをフォローする
Web・Wordpress WORK
LEO LOG

Comment 気軽にどうぞ!!

トップへ戻る
タイトルとURLをコピーしました