Cocoonブログカードをカスタマイズ！タイトル・サムネイル・抜粋文・URL表示をワンクリック選択

有料テーマSWELLではブログカードの表示スタイルを自由に切り替えられるのをご存じですか？「それならCocoonでもできるのでは？」と思い、今回ご紹介するカスタマイズを用意しました。

この方法を使えば、タイトル・サムネイル・抜粋文・URLなど必要な要素だけを選び、用途に合わせたブログカードを表示できます。しかも、クリック操作だけで11種類のデザインを使い分けられるので、デザインに悩む時間を大幅にカットできます。

このカスタマイズの完成コードは記事後半で有料公開中。

必要な情報だけ、シンプルなデザインで。「有料テーマのような操作感」をCocoonでも楽しみたい方にぴったり。このサイトでも愛用しているカスタマイズです。

ブログカードとは？ Cocoonでの基本機能

WordPressのブログカードは、他の記事や外部リンクを視覚的にわかりやすく紹介できるリンク形式です。リンク先のタイトル・サムネイル画像・抜粋文などを自動取得し、カード型でまとめて表示してくれます。

テーマ「Cocoon」では、リンクを貼るだけで自動的にブログカード化されます。基本操作や設定方法については以下の公式マニュアルをご参照ください。

公式 内部ブログカードを表示する方法

公式 外部ブログカードを表示する方法

Cocoonブログカードをもっと自由に！カスタマイズ例

今回のカスタマイズの目的は、複数のスタイルをクリック操作だけで切り替えられるようにすること。
デフォルトのスタイルに加えて、11種類のデザインを用意しました。

デフォルトとカスタマイズ後の比較

まずは、Cocoon標準デザインとカスタマイズ後の見た目を比較してみましょう。

Cocoonデフォルトのブログカード

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

	デフォルト	カスタマイズ後
外枠	太さが異なるグレーの線	細いグレーの線
ラベル	黒背景	背景なし・スッキリ表示
タイトル	全文表示	最大2行（スタイルにより調整）
カード幅	PCで90%固定	100%幅（縦型を除く）
内側余白	狭い	やや広め
ホバー時	グレー背景に変化	背景変化なし／ボトムに薄い影を追加

モバイル表示時の行間や余白も最適化しており、どの端末でもバランスよく表示されます。

スタイル別の表示サンプル

以下では、それぞれのスタイルの特徴・使用例・実際の表示を紹介します。

スタイル①：すべて表示（デフォルト風）

• 画像・タイトル・抜粋文・フッターをすべて表示
• Cocoon標準に近い構成で汎用性が高い

スタイル②：すべて表示＋「ReadMore」ボタン

• 画像・タイトル・抜粋文・フッターに「ReadMore」ボタンを追加
• 記事へのクリック誘導に最適

スタイル③：画像・タイトル・抜粋（フッターなし）

• フッター非表示でシンプル＆コンパクト
• モバイル表示でもすっきり見える

スタイル④：画像・タイトルのみ

• 抜粋文・フッターは非表示でスッキリ
• 視覚的に記事を目立たせたい場合に最適

スタイル⑤：画像・タイトル＋「ReadMore」ボタン

• 抜粋文・フッターは非表示
• 記事への誘導を重視した構成
• ボタンの色や形はCSSで変更できます

スタイル⑥：タイトル＋抜粋（画像なし）

• 文字情報のみの表示でシンプル
• テキスト重視の記事リストに向く

スタイル⑦：タイトルのみ（画像・抜粋なし）

• シンプルな表示
• サイドバーやフッター向き

スタイル⑧：アイコン＋タイトルのみ（テキストリンク）

• 記事タイトル変更に自動対応
• 小さなスペースでも活用可能
• タイトルの文字色はCSSで変更できます

スタイル⑨：縦型（3種類）

• 画像・タイトル・抜粋文を縦に配置
• 「ReadMore」ボタンあり／なしを選択可能
• カラムブロックと組み合わせて横並び表示も可能

以上のカスタムデザインは、記事後半でPHP＋CSSの実装方法を有料公開しています。

【便利】既存ボックスとの組み合わせ

ブログカードは、Cocoonの既存ボックスと組み合わせて使うことも可能です。「おすすめ記事」「関連リンク」など、見出しやラベルを添えて配置すれば、よりわかりやすく整理されたデザインになります。

Cocoonブログカードの設定方法

Cocoonブログカードをカスタマイズする際の注意点

カスタマイズは基本的にコピー＆ペーストで安全に導入できますが、利用しているスキンやサーバー環境によっては影響がでる場合があります。安心して作業を進めるために次の点を確認しておくとスムーズです。

• スキンによる影響
  この記事のカスタマイズはスキン「なし」で検証済みです。お使いのスキンによってはCSSが重複し表示が崩れることがありますが調整は可能です。（スキンと併用できるかはお問い合わせください）
• 子テーマを利用
  コードは必ず子テーマに記述してください。親テーマに書くとアップデートで上書きされる可能性があります。
• バックアップの推奨
  念のため、編集前にバックアップを取っておくと安心です。特にPHP編集時にミスがあるとサイトが一時的に表示されなくなることがありますが、FTPソフトなどで復元できればすぐに解決できます。
  • 関連記事 バックアップ＆復元方法
    

• サーバー設定の影響
  WAF（セキュリティ設定）が有効だと保存エラーが出る場合があります。一時的にOFFにして作業し、終わったら元に戻してください。ベーシック認証を有効にしている場合も同様です。
  

Cocoonブログカードの実装手順｜完成コードのご案内（有料）

ここから先は有料記事での公開となります。すぐに導入できる「完成版コード」をご用意しました。

• PHP＋CSSの完成版コード（コピペで導入可能）
• 11種類の表示スタイルをサイドバーからワンクリック切り替え

作業時間はわずか約5分。自分のブログカードを一気におしゃれにしたい方はこちらからどうぞ。