“必要な情報だけ、シンプルなデザインで”
ブログカードをもっと自由にカスタマイズしませんか。
この記事でご紹介するカスタマイズは、ブログカードの表示したい要素（タイトル・サムネイル・抜粋文・URLなど）を自分好みに調整し、用途に合わせて柔軟に対応できます。
「有料テーマのような操作感」をCocoonでも楽しみたい方にぴったりです。
- サイドバーから簡単操作
クリック操作だけで11種類のデザインが選べます。- NEW 「縦型スタイル」を追加しました
- 既存のボックスと組み合わせでさらに汎用性アップ
- 同一ページ内で複数のデザイン使用
異なるデザインを同じページ内で自由に組み合わせできます。 - 簡単な実装手順
コードを２か所に貼り付けるだけで完了、作業時間は５分程度です。- 一度の設定で、サイト全体で繰り返し使えます。
- 不要になった場合、追加したコードを削除することで元に戻ります。
- 一度の設定で、サイト全体で繰り返し使えます。
About me
この記事を書いた人
- ブログ好きな40代主婦
- CocoonサイトをCSSでカスタマイズ
- 2020年1月1日ブログ開設
- ドメインパワー40（2025年6月現在）
- 2023年～有料記事公開
- →累計420件（月間約20件）購入いただいています
ブログカードとは？Cocoonでの使い方
WordPressのブログカードは、他の記事や外部リンクを視覚的にわかりやすく紹介するためのリンク形式です。リンク先のタイトル、サムネイル画像、簡単な抜粋文などを自動取得し、コンパクトにまとめて表示できます。
テーマ「Cocoon」ではリンクを貼るだけで自動的にブログカード化されます。
ブログカードの基本操作や設定方法は以下を参照ください。
Cocoonブログカードの実装イメージ
このカスタマイズの目的は、複数のスタイルをクリック操作だけで切り替えられること。デフォルトスタイルに加えて11種類の選べるデザインを用意しました。
カスタマイズ内容比較
Cocoonデフォルトのブログカード
カスタマイズ後のブログカード
| デフォルト | カスタマイズ後 | |
|---|---|---|
| 外枠 | 太さが異なるグレーの線 | 細いグレーの線 |
| ラベル | 黒背景 | 背景なし・スッキリ表示 |
| タイトル | 全文表示 | 最大2行（スタイルにより調整） |
| カード幅 | PCで90%固定 | 100%幅（縦型を除く） |
| 内側余白 | 狭い | やや広めに設定 |
| ホバー時 | グレー背景に変化 | 背景変化なし／ボトムに薄い影を追加 |
スタイル別のブログカード表示例
以下の11種類からデザインを選べます。
スタイル一覧
実際の表示例です。タブを切り替えてご確認ください。
- 横型スタイル 1～8
- 縦型スタイル 1～3
- スタイル 1
- スタイル 2
- スタイル 3
- スタイル 4
- スタイル 5
- スタイル 6
- スタイル 7
- スタイル 8
- 縦型1
- 縦型2
- 縦型3
| 画像 | 抜粋文 | フッター | ReadMore |
|---|---|---|---|
| 〇 | 〇 | 〇 | × |
- Cocoonデフォルトに近い構成で、画像、タイトル、抜粋文、フッターをすべて表示
- タイトル表示は最大2行に制限
| 画像 | 抜粋文 | フッター | ReadMore |
|---|---|---|---|
| 〇 | 〇 | 〇 | 〇 |
- 画像、タイトル、抜粋文、フッターをすべて表示
- タイトル表示は最大2行に制限
- 「ReadMore」ボタンを右下に追加し、クリックできるリンクをアピール
| 画像 | 抜粋文 | フッター | ReadMore |
|---|---|---|---|
| 〇 | 〇 | × | × |
- フッター（URL・投稿日等）を非表示にし、シンプルでコンパクトなデザイン
- タイトル表示は最大2行に制限
| 画像 | 抜粋文 | フッター | ReadMore |
|---|---|---|---|
| 〇 | × | × | × |
- 画像とタイトルのみが表示され、抜粋文とフッターが非表示
- 文字が少なくよりすっきりしたデザイン
- タイトル表示は最大3行に制限
| 画像 | 抜粋文 | フッター | ReadMore |
|---|---|---|---|
| 〇 | × | × | 〇 |
- 「ReadMore」ボタンを右下に表示し、クリックできるリンクをアピール
- 画像とタイトルは表示され、抜粋文とフッターは非表示
- タイトル表示は最大2行に制限
| 画像 | 抜粋文 | フッター | ReadMore |
|---|---|---|---|
| × | 〇 | × | × |
- 画像なしで、タイトルと抜粋文が表示されるスタイル
- タイトルの表示制限はありません
| 画像 | 抜粋文 | フッター | ReadMore |
|---|---|---|---|
| × | × | × | × |
- 画像なしで、タイトルのみが表示されるスタイル
- タイトルの表示制限はありません
- アイコンとタイトル文字だけのシンプルなテキストリンク
- ブログカードなので、記事タイトル名を変更しても反映される
- カード型より、テキストリンクの方がクリック率が高いという声もあります
| 画像 | 抜粋文 | フッター | ReadMore |
|---|---|---|---|
| 〇 | 〇 | 〇 | × |
- 縦型スタイル
- Cocoonデフォルトに近い構成で、画像、タイトル、抜粋文、フッターをすべて表示
- タイトル表示は最大2行に制限
| 画像 | 抜粋文 | フッター | ReadMore |
|---|---|---|---|
| 〇 | 〇 | × | × |
- 縦型スタイル
- 画像、タイトル、抜粋文を表示
- タイトル表示は最大2行に制限
| 画像 | 抜粋文 | フッター | ReadMore |
|---|---|---|---|
| 〇 | × | × | 〇 |
- 縦型スタイル
- 画像とタイトルは表示され、抜粋文とフッターは非表示
- 「ReadMore」ボタンを表示
- タイトル表示は最大2行に制限
レイアウト例：縦型スタイル追加
縦型スタイルのブログカードを新たに追加しました。
以下のように、カラムブロックを活用して横に２～３列並べるといった使い方もできます。
いろいろ工夫してみてください！
関連記事、おすすめ記事をピックアップするのに便利だね♪
Cocoonブログカードを既存ボックスと組み合わせる方法
ブログカードをCocoonの既存ボックスと組み合わせて使えるようにしました。
既存のボックスと組み合わせるメリット
組み合わせ可能なボックスの種類
以下のCocoon既存ボックスでブログカードの組み合わせ表示を確認済みです。どのボックスもブログカードとの相性が良く、見やすく整理されたデザインを実現できます。
各ボックスの中にブログカードを内包した実例を用意しました。
※ボックスデザインは一部カスタマイズを加えているため、Cocoonのデフォルトとは少し異なります。
色はドロップダウンメニューから選択する形式です。
色はドロップダウンメニューから選択する形式です。
テキストリンクの複数表示
テキストリンクを複数表示する場合、ブログカードの「ブロック下余白」を1emにすることでバランスよく並べて配置できます。
外枠を自由に決められるのがポイント！！
ボックスのカスタマイズ方法
「白抜きボックス」と「タブ見出しボックス」については下記のカスタマイズ追加でさらにスタイルが選択でき、デザインの幅が広がります。
Cocoonブログカードの設定方法
- Step1ブロックメニューを選択
- ブロックエディタで「ブログカード」を選択。
- 表示されたらブロック内にリンク先のURLを入力します。
- Step2お好みの表示スタイルを選ぶ
サイドバー「ブロック」タブ→「スタイル」からお好みのスタイルを選んでクリック。
- Step3ラベル設定
お好みで表示するラベルを選んでください。ラベルを表示しない場合は「なし」のままでOKです。
- 完成
プレビュー画面で表示確認ができたら完成です。
Cocoonブログカードをカスタマイズする際の注意点
カスタマイズはスキンやサーバー環境の影響を受けることがあるため、以下の注意点を確認しながら進めてください。
- WAF設定
サーバーのWAF（Web Application Firewall）がONになっているか確認してください。必要に応じて一時的に設定を解除し、作業完了後に元に戻すことで対応可能です。 - ベーシック認証
- サーバー側でアクセス制限（ベーシック認証）を設定していませんか。設定が有効な場合、エラーで編集できない可能性があります。
当記事ではコピペのみで完成しますが、バックアップ＆復元方法を確認しておくことを強くおすすめします。
実装手順｜Cocoon「ブログカード」のデザインをサイドバーで切り替えするカスタマイズ
実装手順は以下の２ステップ。
それぞれのコードを子テーマに貼り付けるだけでOKです。
「スタイル切り替え機能」を追加
PHPを貼り付ける場所は、ダッシュボード→「外観」→「テーマファイルエディター」→Cocoon Child: テーマのための関数 (functions.php)です。
「各スタイルのデザイン」を定義
CSSを貼り付ける場所は、ダッシュボード→「外観」→「テーマファイルエディター」→Cocoon Child: スタイルシート (style.css)です。
ここから先は有料公開です。コピペで実装できる具体的なコードを掲載します。
■ サイト名
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; /* サブ見出しの文字サイズを小さめに設定 */
}
上記の①②で関連記事の見出しを表示しています。