Cocoonブログカードのカスタマイズ｜表示スタイルを簡単切り替えする方法（縦型カード追加）

ワードプレステーマ「Cocoon」では、リンクを挿入するだけで自動的に見やすいカード形式に変換されます。特別な設定は不要で誰でも簡単におしゃれなブログカードを作成可能です。

Cocoonの設定を活用するとサムネイルの位置や日付の表示有無などをカスタマイズできますが、細かなデザイン調整にはCSSが必要です。この記事では、サイドバーから簡単にデザインを切り替えられるカスタマイズ方法を紹介します。

有料テーマのような操作性をCocoonで実現してみませんか？

他のブロックデザイン切り替えシリーズも紹介しています。よく使うブロックがありましたらお試しください！

• Cocoonタブブロック
• Cocoon白抜きボックス
• Cocoonアイコンボックス
• Cocoonラベルボックス
• Cocoonタブ見出しボックス
• Cocoonアコーディオン（トグル）
• Cocoon新着記事・人気記事ブロック

ブログカードとは？Cocoonでの使い方

ワードプレスのブログカードは他の記事や外部リンクを視覚的にわかりやすく紹介するためのリンク形式です。リンク先のタイトル、サムネイル画像、簡単な抜粋文などを自動的に取得し、コンパクトにまとめて表示します。ワードプレスの標準機能にはブログカードは含まれていませんが、テーマ「Cocoon」ではリンクを挿入するだけで自動的に見やすいカード形式に変換されます。

ブログカードを表示する方法、設定は公式サイトをご覧ください。

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

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

Cocoonブログカードの実装イメージ

当カスタマイズの目的は、複数の表示スタイルをサイドバーから簡単に切り替えることです。

Cocoonのデフォルトスタイルに加え、用途やデザインの好みに応じて使い分けできる11種類の追加スタイルを用意しました。

カスタマイズ内容比較

	デフォルト	カスタマイズ後
外枠	太さが異なるグレーの線	細いグレーの線
ラベル	黒の背景色	背景色なし
タイトル	すべて表示	最大２行に制限（一部スタイルを除く）
カード幅	PC表示時に90％	全デバイス100％
内側余白	狭い	広めに調整
ホバー時	Cocoonで設定された灰色に近い背景色に変化	背景色の変化はなし、ボックス下部に薄い影をプラスしリンク誘導効果を向上。

スタイル別の表示例

スタイル	表示項目	タイトル	画像	抜粋文	フッター	ReadMore
スタイル 1	すべて表示（画像・抜粋文・フッター）	〇	〇	〇	〇	×
スタイル 2	すべて表示・ボタン付	〇	〇	〇	〇	〇
スタイル 3	画像・タイトル・抜粋文（フッターなし）	〇	〇	〇	×	×
スタイル 4	画像・タイトルのみ	〇	〇	×	×	×
スタイル 5	画像・タイトル・ボタン付	〇	〇	×	×	〇
スタイル 6	画像なし（タイトル・抜粋文）	〇	×	〇	×	×
スタイル 7	画像なし（タイトルのみ）	〇	×	×	×	×
スタイル 8	テキストリンク	〇	×	×	×	×
縦型 1	すべて表示（画像・抜粋文・フッター）	〇	〇	〇	〇	×
縦型 2	画像・タイトル・抜粋文（フッターなし）	〇	〇	〇	×	×
縦型 3	画像・タイトル・ボタン付	〇	〇	×	×	〇

縦型スタイル追加

縦型スタイルのブログカードを新たに追加しました。

以下のように、カラムブロックを活用して横に２～３列並べるといった使い方もできます。

いろいろ工夫してみてください！

Cocoonブログカードを既存ボックスと組み合わせる方法

ブログカードをCocoonの既存ボックスと組み合わせて使えるようにしました。例えば以下の例のように、ブログカード + 記事補足をひとつにのブロックにまとめられます！

既存のボックスと組み合わせるメリット

• ラベル部分のテキストを自由に入力可能
  • 「おすすめ記事」「関連リンク」など、好きなメッセージを添えてアピールできます。
• すべてのブログカードスタイルで利用可能
  • 追加した11種類のスタイルすべてで使用できます。
• 簡単操作で実現
  • ボックス内にブログカードを追加するだけ。特別な設定やコードは不要です！

組み合わせ可能なボックスの種類

以下のCocoon既存ボックスでブログカードの組み合わせ表示を確認済みです。どのボックスもブログカードとの相性が良く、見やすく整理されたデザインを実現できます。

各ボックスの中にブログカードを内包した実例を用意しました。下記の２つのスタイルを表示しているので表示をご確認ください。

• スタイル3：画像・抜粋文（フッターなし）
• スタイル７：テキストリンク

※ボックスデザインは一部カスタマイズを加えているため、Cocoonのデフォルトとは少し異なります。

テキストリンクの複数表示

テキストリンクを複数表示することもできます。ブログカードの「ブロック下余白」を1emにすることでバランスよく並べて配置できます。

ボックスのカスタマイズ方法

「白抜きボックス」と「タブ見出しボックス」については下記のカスタマイズ追加でさらにスタイルが選択でき、デザインの幅が広がります。

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

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

カスタマイズはスキンやサーバー環境の影響を受けることがあるため、以下の注意点を確認しながら進めてください。

• スキンによる影響
  • 当カスタマイズはスキン「なし」で検証しています。お使いのスキンによってはスタイルの重複等で表示が崩れる場合があります。
• 子テーマを利用
  • 子テーマを使用することで安全性を確保しています。
  • 万が一不要になった場合は、追加したコードを削除することでデフォルトに戻せます。
• PHPエラーが発生した場合の対処
  エラー表示が出て保存できない場合、以下の項目を確認してください。

• WAF設定
  サーバーのWAF（Web Application Firewall）がONになっているか確認してください。必要に応じて一時的に設定を解除し、作業完了後に元に戻すことで対応可能です。
• ベーシック認証
  • サーバー側でアクセス制限（ベーシック認証）を設定していませんか。設定が有効な場合、エラーで編集できない可能性があります。

実装手順｜Cocoon「ブログカード」のデザインをサイドバーで切り替えするカスタマイズ

実装手順は以下の２ステップ。２ヶ所にコードを設定するだけなので作業時間は５分ほどです。

ここから先は有料公開です。コピペで実装できる具体的なコードを掲載します。

特定商取引法に基づく表記
サイト名	Turicco
サイトURL	https://turicco.com/
お問い合わせ	https://turicco.com/contact/
購入方法	コンテンツ販売サービス、codoc(コードク)を利用しています。 詳しくは購入者向けFAQをご覧ください。
納品方法	記事公開
販売価格	500円
お支払い 方法	クレジットカード、デビットカード、プリペイド型クレジットカード、Apple Pay、Google Pay、コンビニ決済
	※クレジットカード情報はSSLで暗号化され、決済システムサービスを提供するStripe社に直接送信されます。管理人が知ることはありませんのでご安心ください。
返金・キャンセルについて	codoc株式会社利用規約 第10条（返金）に基づき、原則として購入いただいた記事のキャンセル、返金等を受けられないことを了承ください。