「こんなことできたらいいな!」シリーズです。
ワードプレスのブログカードは、他の記事や外部リンクを視覚的にわかりやすく紹介するためのリンク形式です。リンク先のタイトル、サムネイル画像、簡単な抜粋文などを自動的に取得し、コンパクトにまとめて表示します。
ワードプレスの標準機能にはブログカードは含まれていませんが、テーマ「Cocoon」ではリンクを挿入するだけで自動的に見やすいカード形式に変換されます。
この記事では、ブログカードの表示スタイルをサイドバーから簡単に選択するカスタマイズを紹介します。ブログカードをシンプルかつスタイリッシュに見せるため、デフォルトの他に5 種類の異なるスタイルを用意し、読者に合わせたデザインを選べるようにしました。
- サイドバーからクリックするだけで5種類の表示スタイルが選べる
- 同じページ内で複数の表示スタイルが使える
- ブログカードの汎用性アップ
- 実装方法は2ヶ所にコードを貼り付けるだけ
- シンプルなデザインで統一
有料テーマ風の使い心地になります!
ブロックのデザイン切り替えシリーズ、他にも紹介しています。
よく使うブロックがありましたらお試しください!
実装イメージ/Cocoon「ブログカード」
当カスタマイズの目的は、以下のような複数の表示スタイルをサイドバーから簡単に選択することです。
モバイル表示ではこのようなイメージ
「ブログカード」のスタイルは5種類
Cocoonデフォルト
- 特徴: 画像、タイトル、抜粋文、フッターの全要素が表示される基本スタイル。
- デザイン:ラベル部分に黒の背景色がついています。
「ブログカード」の表示スタイルはCocoonデフォルトのほか、5種類追加しています。
- ラベル背景色を白くし、外枠に細いボーダーを追加
- タイトル文字の太さはノーマル
- マウスオーバー時にボックス下部にうっすらと影を追加
- 行間を少し狭くしてします
汎用性を重視して、すっきりとシンプルなデザインにしました。
スタイル 1
- 画像、タイトル、抜粋文、フッターの全要素が表示される基本スタイル。
スタイル 2
- フッターが非表示になり、シンプルなデザイン。
スタイル 3
- 画像とタイトルのみが表示され、抜粋文とフッターが非表示。よりシンプルでコンパクトなデザイン。
スタイル 4
- 「ReadMore」ボタンが右下に表示される(ホバー時に少し薄くなる)
- 画像とタイトルは表示され、抜粋文とフッターは非表示。
- ボタンとの重なりを防ぐためタイトルは 2 行に制限。
スタイル 5
- 画像なしで、タイトルのみが表示されるテキストリンクのスタイル。
「ブログカード」の使い方
- ブロックメニューを選択
- ブロックエディタで「ブログカード」を選択。
- 表示されたらブロック内にリンク先のURLを入力します。
- お好みの表示スタイルを選ぶ
サイドバー「ブロック」タブ→「スタイル」からお好みのスタイルを選んでクリック。
URLが表示されているため、すぐには反映されません。
- ラベル設定
お好みで表示するラベルを選んでください。ラベルを表示しない場合は「なし」のままでOKです。
- 完成
プレビュー画面で表示確認ができたら完成です。
当カスタマイズの注意点と特徴
- 子テーマを使うため、比較的安全におこなえます
- 当カスタマイズが不要になったときは追加したコードを削除すれば元に戻ります
- PHPでエラーがでる場合は下記をご確認ください
- サーバー側でベーシック認証(アクセス制限)を設定していないか
- →エラーが表示され編集できません
- サーバー側でWAF設定をONにしていないか
- →エックスサーバーではONにしていても影響ないようです
どちらも一時的に解除の上、作業後は設定を元に戻しましょう
実装方法/Cocoon「ブログカード」のデザインをサイドバーで切り替えするカスタマイズ
実装手順は以下の2ステップ。2ヶ所にコードを設定するだけなので作業時間は5分ほどです。
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条(返金)に基づき、原則として購入いただいた記事のキャンセル、返金等を受けられないことを了承ください。 |
Comment コメントはこちらへ