記事内リンクとしてよく使うCocoonのブログカード。デフォルトのままだと「フル表示で重たい」「クリックされにくい」と感じることもあります。
私自身も長い間Cocoon標準のブログカードを使っていましたが、関連記事もおすすめ記事も同じ見た目になってしまい、「もっとクリックされる見せ方ができないかな」と感じていました。
そこで作ったのが、この記事で紹介する「ブログカードのカスタムスタイル」です。
画像・タイトル・抜粋・ボタンの有無を少し調整すれば、
といった目的別のデザインが簡単に作れます。
- 12種類のデザインを追加 + 編集画面からワンクリックで選べる
横型・縦型・テキストリンクなどを使い分けできます。 - 既存のCocoonボックスと自由に組み合わせ可能
関連記事・おすすめ記事・まとめ枠など用途に応じた導線を作れます。 - 簡単実装
PHP＋CSSを所定の場所に貼るだけ、作業時間は5～10分が目安です。
「ただ貼る」から「クリックされるカード」へ。
ブログカードを一段レベルアップさせたい方は、ぜひ参考にしてください。
Cocoonブログカード｜デフォルト vs カスタム比較
私の場合、以前は関連記事を貼ってもこんな状態でした。
- どのカードも同じ見た目
- ラベルが目立ちすぎる
- おすすめ記事なのか関連記事なのか分かりにくい
特に「この記事を読んでほしい」と思う場面でも、他の関連記事と同じ見た目になってしまうのが悩みでした。
このカスタマイズを入れてからは、
- おすすめ記事はボタン付き
- 関連記事はシンプル表示
- まとめ枠は縦カード
というように役割を分けられるようになりました。
記事全体の見た目が整うだけでなく、「どの記事を読んでほしいか」が伝わりやすくなり、リンク配置で悩む時間も減ります。
ワンクリックでデザインを選べるので簡単です。
Cocoonブログカードのスタイル分類（表示サンプル）と特徴
以下では、横型・縦型あわせて12種類のブログカードを紹介します。「どこに置くか」「何を伝えたいか」を基準に選ぶと失敗しません。
横型カード（8種類）
- フル表示
- フル＋Moreボタン
- 画像＋タイトル＋抜粋（フッターなし）
- 画像＋タイトルのみ
- 画像＋タイトル＋Moreボタン特化
- タイトル＋抜粋（画像なし）
- タイトルのみ（画像・抜粋なし）
- アイコン付きテキストリンク（省スペース）
以下では、それぞれのスタイルの特徴・使用例・実際の表示を紹介します。
デザインだけでなく「読者が迷わない導線」を意識して調整しています。
横型①：すべて表示（デフォルト風）
記事中盤で関連記事を紹介するときに使いやすいスタイルです。情報量が多いため、初めて訪れた読者でもリンク先の内容を把握しやすく自然な回遊につながります。
横型②：すべて表示＋Moreボタン
この記事で特に読んでほしい記事を紹介するときにおすすめです。「続きを読む」が表示されるため、関連記事というよりCTAに近い使い方ができます。
横型③：画像・タイトル・抜粋（フッターなし）
スマホ読者を意識した関連記事紹介に向いています。日付やカテゴリーを省くことで情報量を抑えられ、本文の流れを邪魔しません。
横型④：画像・タイトルのみ
アイキャッチ画像で興味を引きたいときに便利です。デザイン系記事やカスタマイズ事例など、画像の印象が重要な記事と相性が良いです。
横型⑤：画像・タイトル＋Moreボタン
記事末尾の「次に読む記事」やおすすめ記事紹介に最適です。選択肢を増やさず、読者を1記事へ誘導したい場面で効果を発揮します。
横型⑥：タイトル＋抜粋（画像なし）
画像が多い記事内で使うとスッキリまとまります。リンク集や関連コンテンツ一覧など、情報を整理して見せたいときに便利です。
横型⑦：タイトルのみ（画像・抜粋なし）
記事下の関連記事一覧やサイドバー向けです。表示面積が小さいため、多数のリンクを並べても圧迫感がありません。
横型⑧：アイコン＋タイトル（テキストリンク）
補足記事や参考記事を紹介したいときに使っています。ブログカードほど主張せず、本文の流れを保ったまま自然に誘導できます。
縦型カード（4種類）
- フル表示
- 画像＋タイトル＋抜粋（フッターなし）
- 画像＋タイトル＋Moreボタン
- 画像＋タイトルのみ
縦型①：すべて表示
→ クリックされるカードが欲しい
トップページなどで目立たせたい記事を並べるときにおすすめです。カード単体の訴求力が高く、クリックされやすいレイアウトになります。
縦型②：フッターなし
→ 記事をスッキリ見せたい
複数記事を横並びに掲載したいときに便利です。高さが揃いやすく、レイアウト全体が整って見えます。
縦型③：画像・タイトル＋Moreボタン
→ 関連記事をまとめたい
「おすすめ記事3選」や「初心者向け記事まとめ」などに最適です。カードごとに行動を促せるため、まとめ枠との相性が良いスタイルです。
縦型④：画像＋タイトルのみ
→ シンプルに見せたい
サイト型トップページやカテゴリーページ向けです。情報量を絞ることで一覧性が高くなり、多くの記事を並べても見やすくなります。
ブログカード単体だけでなく、既存ボックスにも自然に馴染む
今回のデザインは主張を抑えたシンプル設計にしているため、タブ見出しボックスやラベルボックスなど既存のCocoonカスタマイズとも違和感なく組み合わせられます。
- タブ見出しボックス → 関連記事
- ラベルボックス → おすすめ記事
- 見出しボックス → リンク集
など活用の幅が広がります。
表示しているボックスはカスタマイズして余白などを整えています。シンプルなデザインにしているので違和感なく自然に組み合わせられます。
Cocoonブログカードをカスタマイズする際の注意点
基本的にはコードをコピペするだけで導入でき、Cocoon標準環境で動作確認済みです。
- CSSを少し触ったことがある
- 子テーマ編集をしたことがある
くらいの経験があればそこまで難しくありません。コードにはコメントを付けて整理しているので、カスタマイズしやすい構成にしています。
- スマホ表示対応済み
- カスタム変数でサイズ調整しやすい
- スキンによってはCSSが干渉する場合あり
- 親テーマではなく子テーマ編集推奨
- PHP編集前はバックアップ推奨
- WAF設定（セキュリティ設定）によっては保存エラーが出る場合あり
もし保存できない場合は、サーバーのWAF設定を一時的にOFFにしてください。（※作業が終わったらONに戻します）
Cocoonブログカードの実装手順｜完成コード
導入後は、
というように使い分けられるようになります。
毎回CSSを書き換える必要はなく、編集画面からスタイルを選ぶだけ。
記事を書くたびにデザイン調整を繰り返していた方ほど、作業がかなり楽になると思います。
- ラベルPHPコードを貼り付け
目的：エディタに「デザイン選択機能」を追加
記述場所：子テーマの
functions.php（PHPはスタイル登録のみで既存記事には影響しません）
- ラベルCSSコードを貼り付け
目的：各デザインの見た目を反映
記述場所：子テーマの
style.css(スタイルシート) - ラベルエディタでデザインを選択
- 対象ブロックを追加
- サイドバーの「スタイル」を開く
- 追加したスタイルを選択
- 管理画面で「外観」→「テーマファイルエディター」を開く
- 子テーマ（Cocoon Child）が選択されているか確認
- ファイル一覧から「テーマのための関数 (functions.php)」を開く
- 既存のコードは消さず、//以下に子テーマ用の関数を書く の下の行に追記
エラー防止：不要なスペース等が入らないよう、慎重に編集をおこなってください
- 管理画面で「外観」→「テーマファイルエディター」を開く
- 子テーマ（Cocoon Child）が選択されているか確認
- ファイル一覧から「スタイルシート (style.css)」を開く
- 既存のコードは消さず、/* 子テーマ用のスタイルを書く */ の下の行に追加
カスタマイズ全体の流れ
- 登録：codocへ会員登録（初回のみお願いします）
- 入力：有料エリアの内容をご自身で入力してください
- 確認：プレビューで表示確認して完了です
販売者情報は 「特定商取引法に基づく表記」をご確認ください。
Comment 記事の感想を書き込んでいただけると幸いです
お世話になっております。
お忙しい中ご回答いただきありがとうございます。
質問内容に不備があり、追加でご質問させていただきます。申し訳ございません。
画像丸で囲った1.2のようなスタイルで
Aの投稿内に別記事(新着や人気記事ではなく指定した投稿記事)を表記したいと考えています。
上記について、
①画像のような画像下にタイトルがあり、クリックで該当記事に飛ぶ
②画像のようなスタイルで投稿内で別記事を貼り付けしたい
以上の場合にどのうようにすればよいかご教示いただけますと幸いです。
>林佑樹 さん
新着や人気記事ではなく指定した投稿記事を表示する
→Cocoonの「ナビカード」が便利かと思います
①画像のような画像下にタイトルがあり、クリックで該当記事に飛ぶ
→ナビカードの表示タイプ「大きなサムネイル表示」を選択すると画像下にタイトルが表示されます
②画像のようなスタイルで投稿内で別記事を貼り付けしたい
→投稿内に表示するためには、ナビカードの「ブロック」または「ショートコード」で表示できます。
以下、ナビカードの使い方を詳しく掲載した記事がありますのでご覧いただければ幸いです。
お世話になっております。当投稿を拝見いたしました。
当サイトを参考にブログ作成に励んでいます。
そこで、一点ご質問させていただきます。
投稿下部に記載の「MORE」の表記はどのように作成されているのでしょうか？
参考にさせていただきたく、ご質問をさせていただきました。
お忙しいところ恐縮ですが、ご教示いただけますと幸いです。
> 林 佑樹 さん
こんにちは。
ブログを見てくださりありがとうございます。
お問い合わせの投稿下部の「MORE」はCocoonの関連記事です。
①Cocoon設定
投稿タブ→関連記事設定
関連記事見出し：MORE
補助見出し：こちらの記事もご覧ください
②スタイルをCSSで微調整しています
/* 関連記事見出しスタイル */
.related-entry-heading {
display: flex; /* 子要素をフレックスボックスとして配置 */
flex-direction: column; /* 子要素を縦方向に並べる */
align-items: center; /* 子要素を中央揃えに配置 */
}
/* 関連記事のサブ見出しスタイル */
.related-entry-sub-heading {
font-size: .8rem; /* サブ見出しの文字サイズを小さめに設定 */
}
上記の①②で関連記事の見出しを表示しています。