Cocoonブログカードをすっきりと／複数の表示スタイルをサイドバーで選べるカスタマイズ

「こんなことできたらいいな！」シリーズです。

当カスタマイズの実装手順は有料公開です具体的な実装手順を見る

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

ワードプレスの標準機能にはブログカードは含まれていませんが、テーマ「Cocoon」ではリンクを挿入するだけで自動的に見やすいカード形式に変換されます。

この記事では、ブログカードの表示スタイルをサイドバーから簡単に選択するカスタマイズを紹介します。ブログカードをシンプルかつスタイリッシュに見せるため、デフォルトの他に5 種類の異なるスタイルを用意し、読者に合わせたデザインを選べるようにしました。

サイドバーからクリックして選ぶだけ

ここがポイント

サイドバーからクリックするだけで５種類の表示スタイルが選べる
同じページ内で複数の表示スタイルが使える
ブログカードの汎用性アップ
実装方法は２ヶ所にコードを貼り付けるだけ
シンプルなデザインで統一

有料テーマ風の使い心地になります！

ブロックのデザイン切り替えシリーズ、他にも紹介しています。

よく使うブロックがありましたらお試しください！

Contents

実装イメージ／Cocoon「ブログカード」
実装方法／Cocoon「ブログカード」のデザインをサイドバーで切り替えするカスタマイズ
まとめ

実装イメージ／Cocoon「ブログカード」

当カスタマイズの目的は、以下のような複数の表示スタイルをサイドバーから簡単に選択することです。

モバイル表示ではこのようなイメージ

「ブログカード」のスタイルは５種類

Cocoonデフォルト

特徴：画像、タイトル、抜粋文、フッターの全要素が表示される基本スタイル。
デザイン：ラベル部分に黒の背景色がついています。

「ブログカード」の表示スタイルはCocoonデフォルトのほか、５種類追加しています。

カスタマイズ箇所（共通）

ラベル背景色を白くし、外枠に細いボーダーを追加
タイトル文字の太さはノーマル
マウスオーバー時にボックス下部にうっすらと影を追加
行間を少し狭くしてします

汎用性を重視して、すっきりとシンプルなデザインにしました。

スタイル 1

画像、タイトル、抜粋文、フッターの全要素が表示される基本スタイル。

スタイル 2

フッターが非表示になり、シンプルなデザイン。

スタイル 3

画像とタイトルのみが表示され、抜粋文とフッターが非表示。よりシンプルでコンパクトなデザイン。

スタイル 4

「ReadMore」ボタンが右下に表示される（ホバー時に少し薄くなる）
画像とタイトルは表示され、抜粋文とフッターは非表示。
ボタンとの重なりを防ぐためタイトルは 2 行に制限。

スタイル 5

画像なしで、タイトルのみが表示されるテキストリンクのスタイル。

「ブログカード」の使い方

ブロックメニューを選択
1. ブロックエディタで「ブログカード」を選択。
2. 表示されたらブロック内にリンク先のURLを入力します。
お好みの表示スタイルを選ぶ

サイドバー「ブロック」タブ→「スタイル」からお好みのスタイルを選んでクリック。

URLが表示されているため、すぐには反映されません。
ラベル設定

お好みで表示するラベルを選んでください。ラベルを表示しない場合は「なし」のままでOKです。
完成

プレビュー画面で表示確認ができたら完成です。

当カスタマイズの注意点と特徴

検証はスキン「なし」でおこなっています
- お使いのスキンにより、「ブログカード」部分に他のスタイルが入っている場合は表示が崩れることがありますのでご了承ください

子テーマを使うため、比較的安全におこなえます
当カスタマイズが不要になったときは追加したコードを削除すれば元に戻ります

PHPでエラーがでる場合は下記をご確認ください

サーバー側でベーシック認証（アクセス制限）を設定していないか
- →エラーが表示され編集できません
サーバー側でWAF設定をONにしていないか
- →エックスサーバーではONにしていても影響ないようです

どちらも一時的に解除の上、作業後は設定を元に戻しましょう

目次に戻る

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

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

PHPの設定

スタイル切り替えをエディタに追加

PHPを貼り付ける場所は、ダッシュボード→「外観」→「テーマファイルエディター」→Cocoon Child: テーマのための関数 (functions.php)です。

CSSの設定

各スタイルを指定する

CSSを貼り付ける場所は、ダッシュボード→「外観」→「テーマファイルエディター」→Cocoon Child: スタイルシート (style.css)です。

カスタマイズ前にバックアップをおこないましょう。

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

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