有料テーマSWELLではブログカードの表示スタイルを自由に切り替えられるのをご存じですか？「それならCocoonでもできるのでは？」と思い、今回ご紹介するカスタマイズを用意しました。
この方法を使えば、タイトル・サムネイル・抜粋文・URLなど必要な要素だけを選び、用途に合わせたブログカードを表示できます。しかも、クリック操作だけで11種類のデザインを使い分けられるので、デザインに悩む時間を大幅にカットできます。
- ワンクリックでスタイル切り替え
サイドバーから簡単に、11種類のデザインが選べます。 - 既存のボックスと組み合わせでさらに汎用性アップ
- ページ内で複数デザインを自由に使い分け可能
- 実装はコードを2か所に貼るだけ、作業時間は約5分
このカスタマイズの完成コードは記事後半で有料公開中。
必要な情報だけ、シンプルなデザインで。「有料テーマのような操作感」をCocoonでも楽しみたい方にぴったり。このサイトでも愛用しているカスタマイズです。
About meこの記事を書いた人
ブログ好きな40代主婦です。
2020年1月1日にWordPressを始め、
Cocoonをスキンなしでカスタマイズ。
- ドメインパワー : 40（2025年8月時点）
- 2023年より有料記事公開
累計460件（月間約20件）のご購入実績 - カスタマイズを丁寧にサポート
ブログカードとは？ Cocoonでの基本機能
WordPressのブログカードは、他の記事や外部リンクを視覚的にわかりやすく紹介できるリンク形式です。リンク先のタイトル・サムネイル画像・抜粋文などを自動取得し、カード型でまとめて表示してくれます。
テーマ「Cocoon」では、リンクを貼るだけで自動的にブログカード化されます。基本操作や設定方法については以下の公式マニュアルをご参照ください。
Cocoonブログカードをもっと自由に！カスタマイズ例
今回のカスタマイズの目的は、複数のスタイルをクリック操作だけで切り替えられるようにすること。
デフォルトのスタイルに加えて、11種類のデザインを用意しました。
デフォルトとカスタマイズ後の比較
Cocoonデフォルトのブログカード
カスタマイズ後のブログカード
| デフォルト | カスタマイズ後 | |
|---|---|---|
| 外枠 | 太さが異なるグレーの線 | 細いグレーの線 |
| ラベル | 黒背景 | 背景なし・スッキリ表示 |
| タイトル | 全文表示 | 2行（スタイルにより調整） |
| カード幅 | PCで90%固定 | 100%幅（縦型を除く） |
| 内側余白 | 狭い | やや広めに設定 |
| ホバー時 | グレー背景に変化 | 背景変化なし／ボトムに薄い影を追加 |
スタイル別の表示サンプル
以下では、それぞれのスタイルの特徴・使用例・実際の表示を紹介します。
「これいいかも！」と思うものがあれば、ぜひ取り入れてみてください。
1-すべて表示
- 画像・タイトル・抜粋文・フッターをすべて表示
→ Cocoonデフォルトに近い構成
2-すべて表示・ボタン付
- 画像・タイトル・抜粋文・フッターに加え「ReadMore」ボタンを表示
- クリックを誘導したい場合に最適
3-画像・タイトル・抜粋（フッターなし）
- フッター非表示でシンプル＆コンパクト
4-画像・タイトルのみ
- 画像＋タイトルのみを表示
- 抜粋文やフッターは非表示でスッキリ
5-画像・タイトル・ボタン付
- 画像＋タイトル＋「ReadMore」ボタン
- 抜粋文とフッターは非表示
6-画像なし（タイトル・抜粋）
- 画像なし
- タイトル＋抜粋文のみを表示
7-画像なし（タイトルのみ）
- 画像も抜粋文もなし
- タイトルだけのシンプル表示
8-テキストリンク
- アイコン＋タイトル文字のみのテキストリンク
- ブログカード形式なので記事タイトル変更に自動対応
縦型（3種類）
- 画像・タイトル・抜粋文を縦に配置
- 「ReadMore」ボタンあり／なしを選択可能
- カラムブロックと組み合わせて横並び表示も可能
関連記事やおすすめ記事をまとめて紹介するのに、ブログカードはとても便利。
以上のカスタムデザインは、記事後半でPHP＋CSSの実装方法を有料公開しています。
既存ボックスとの組み合わせ
ブログカードは、Cocoonの既存ボックスと組み合わせて使うことも可能です。「おすすめ記事」「関連リンク」など、見出しやラベルを添えて配置すれば、よりわかりやすく整理されたデザインになります。
例：見出しボックス＆テキストリンクを複数表示
外枠を自由に決められるのがポイント！！
Cocoonブログカードの設定方法
- Step1ブロックメニューを選択
- ブロックエディタで「ブログカード」を選択。
- 表示されたらブロック内にリンク先のURLを入力します。
- Step2お好みの表示スタイルを選ぶ
サイドバー「ブロック」タブ→「スタイル」からお好みのスタイルを選んでクリック。
- Step3ラベル設定
お好みで表示するラベルを選んでください。ラベルを表示しない場合は「なし」のままでOKです。
- 完成
プレビュー画面で表示確認ができたら完成です。
Cocoonブログカードをカスタマイズする際の注意点
カスタマイズは基本的にコードを貼り付けるだけで安全に導入できますが、利用しているスキンやサーバー環境によっては影響がでる場合があります。安心して作業を進めるために次の点を確認しておくとスムーズです。
- スキンによる影響
この記事のカスタマイズはスキン「なし」で検証済みです。お使いのスキンによってはCSSが重複し表示が崩れることがありますが調整は可能です。（スキンと併用できるかはお問い合わせください） - 子テーマを利用
コードは必ず子テーマに記述してください。親テーマに書くとアップデートで上書きされる可能性があります。 - バックアップの推奨
念のため、編集前にバックアップを取っておくと安心です。特にPHP編集時にミスがあるとサイトが一時的に表示されなくなることがありますが、FTPソフトなどで復元できればすぐに解決できます。- 関連記事 バックアップ＆復元方法
- サーバー設定の影響
WAF（セキュリティ設定）が有効だと保存エラーが出る場合があります。一時的にOFFにして作業し、終わったら元に戻してください。ベーシック認証を有効にしている場合も同様です。
Cocoonブログカードの実装手順｜完成コードのご案内（有料）
ここから先は有料記事での公開となります。すぐに導入できる「完成版コード」をご用意しました。
PHPの設定
目的：「スタイル切り替え機能」を追加
記述場所：子テーマの functions.php
CSSの設定
目的：「各スタイルのデザイン」を定義
記述場所：子テーマのスタイルシート (style.css)
- WordPress管理画面で 「外観」→「テーマファイルエディター」 を開きます。
- 子テーマ（Cocoon Child） が選択されていることを確認します。
- 右側のファイル一覧から 「Cocoon Child: テーマのための関数 (functions.php)」 をクリックします。
- 既存のコードは消さず、//以下に子テーマ用の関数を書く の下の行に追記します。
- WordPress管理画面で 「外観」→「テーマファイルエディター」 を開きます。
- 子テーマ（Cocoon Child）が選択されていること を確認します。
- ファイル一覧から 「Cocoon Child: スタイルシート (style.css)」 を開きます。
- 既存のコードは消さず、/* 子テーマ用のスタイルを書く */ の下の行に追加します。
- PHP＋CSSの完成版コード（コピペで導入可能）
- 11種類の表示スタイルをサイドバーからワンクリック切り替え
作業時間はわずか約5分。最短で「完成形のブログカード」を導入したい方はぜひご活用ください。
■ サイト名
Turicco
■ サイトURL
https://turicco.com/
■ 運営者情報
運営責任者：はるみ
お問い合わせ先：https://turicco.com/contact/
■ 購入方法
コンテンツ販売サービス「codoc（コードク）」を利用しています。
詳しくは codoc購入者向けFAQ をご覧ください。
■ 納品方法
購入完了後、対象の記事が閲覧可能になります。
■ お支払い方法
・クレジットカード
・デビットカード
・プリペイド型クレジットカード
・Apple Pay
・Google Pay
・コンビニ決済
※クレジットカード情報はSSLで暗号化され、決済サービス「Stripe」に直接送信されます。管理人がカード情報を取得・保管することはありません。
■ 返金・キャンセルについて
codoc株式会社の利用規約第10条（返金）に基づき、原則としてご購入後のキャンセル・返金はできません。あらかじめご了承ください。
■ 販売価格
500円（税込）
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; /* サブ見出しの文字サイズを小さめに設定 */
}
上記の①②で関連記事の見出しを表示しています。