この記事では、ブログカードの表示スタイルをサイドバーから簡単に選択するカスタマイズを紹介します。
Cocoonから有料テーマに移行されたフォロワーさんの投稿が、当カスタマイズを実装するきっかになりました。
わたしがSWELLに移行した理由のひとつがブログカード。
Cocoonは画像ありの大きいのしか選べないけど、SWELLは
- 画像あり
- 画像なし（抜粋文あり）
- 画像なし（抜粋文なし）
- テキストリンク
の4種類から選べる。
CSSでも調整できるけど楽な方選んじゃった。引用元：https://twitter.com/nekotaneko_blog/status/1848965193436663967
Cocoonでもこんなことできたらいいよね。
ワードプレスのブログカードは、他の記事や外部リンクを視覚的にわかりやすく紹介するためのリンク形式です。リンク先のタイトル、サムネイル画像、簡単な抜粋文などを自動的に取得し、コンパクトにまとめて表示します。
ワードプレスの標準機能にはブログカードは含まれていませんが、テーマ「Cocoon」ではリンクを挿入するだけで自動的に見やすいカード形式に変換されます。ブログカードを表示する方法、設定は公式サイトをご覧ください。
当カスタマイズではデフォルトの他に7種類の異なるブログカードのスタイルを用意し、読者に合わせたデザインを選べるようにしました。
- 画像・抜粋文（URLあり）
- 画像・抜粋文（URLなし）
- 画像とタイトル
- 「ReadMore」ボタン付き
- 画像なし（タイトル・抜粋あり）
- 画像なし（タイトルのみ）
- テキストリンク NEW
- サイドバーからクリックするだけで7種類の表示スタイルが選べる
- 既存のボックスと組み合わせて使える おすすめ
- 同じページ内で複数の表示スタイルが使える
- ブログカードの汎用性アップ
- 実装方法は２ヶ所にコードを貼り付けるだけ（所要時間５分程度）
有料テーマ風の使い心地になります！
ブロックのデザイン切り替えシリーズ、他にも紹介しています。
よく使うブロックがありましたらお試しください！
- ブログ好きな40代主婦
- CocoonサイトをCSSでカスタマイズ
- 2020年1月1日ブログ開設
- ドメインパワー40
- 2023年～有料記事公開
- →累計280件（月間約20件）購入いただいています
です
実装イメージ／Cocoonブログカード
当カスタマイズの目的は、以下のような複数の表示スタイルをサイドバーから簡単に選択することです。
モバイル表示ではこのようなイメージ。モバイルでは特に綺麗に見えるように、文字サイズ、行間、余白を整えています！
「ブログカード」のスタイルは7種類
Cocoonデフォルト
- 特徴： 画像、タイトル、抜粋文、フッターの全要素が表示される基本スタイル。
- デザイン：ラベル部分に黒の背景色がついています（スキンにより異なります）
「ブログカード」の表示スタイルはCocoonデフォルトのほか、7種類追加しています。
- 画像・抜粋文（URLあり）
- 画像・抜粋文（URLなし）
- 画像とタイトル
- 「ReadMore」ボタン付き
- 画像なし（タイトル・抜粋あり）
- 画像なし（タイトルのみ）
- テキストリンク
- ラベル背景色を白くし、外枠に細いボーダーを追加
- タイトル文字の太さをノーマルに変更
- 抜粋文の表示を最大２行に制限
- マウスオーバー時にボックス下部に薄い影を追加
- 行間を少し狭く
汎用性を重視して、すっきりとシンプルなデザインにしました。
スタイル 1／画像・抜粋文（URLあり）
- 画像、タイトル、抜粋文、フッター（URL・投稿日等）の全要素が表示される基本スタイル
- タイトル表示を最大2 行に制限
スタイル 2／画像・抜粋文（URLなし）
- フッターが非表示になり、シンプルでコンパクトなデザイン
- タイトル表示を最大2 行に制限
スタイル 3／画像とタイトル
- 画像とタイトルのみが表示され、抜粋文とフッターが非表示
- 文字が少なくすっきりしたデザイン
スタイル 4／ReadMoreボタン付
- 「ReadMore」ボタンが右下に表示される（ホバー時に少し薄くなる）
- 画像とタイトルは表示され、抜粋文とフッターは非表示
- タイトル表示を最大2 行に制限
スタイル 5／画像なし（タイトル・抜粋あり）
- 画像なしで、タイトルと抜粋文が表示されるスタイル
スタイル 6／画像なし（タイトルのみ）
- 画像なしで、タイトルのみが表示されるスタイル
スタイル 7／テキストリンクNEW
- アイコンと文字だけのシンプルなテキストリンク
既存のボックスと組み合わせて使えます
ブログカードをCocoonの既存のボックスと組み合わせて使えるようにしました。
個人的にこれいいね！と思えるポイント。
表示確認できているボックスは以下の通りです。
- 白抜きボックス
- 見出しボックス
- タブ見出しボックス
- ラベルボックス
- 付箋風ボックス
- 案内ボックス
- アイコンボックス
Cocoonブロックの各ボックスの中にブログカードを入れた実際の表示例です。（ボックスデザインは変更しているので少しデフォルトとは異なります）
白抜きボックス
見出しボックス
タブ見出しボックス
ラベルボックス
付箋風ボックス
色はドロップダウンメニューから選択する形式です。
案内ボックス
色はドロップダウンメニューから選択する形式です。
アイコンボックス
アイコンタイプをドロップダウンメニューから選択する形式です（色固定）
ブログカードの「ブロック下余白」をサイドバーで0にすると余白なく連続して表示できます。
外枠を自由に決められるのがポイント！！
「白抜きボックス」と「タブ見出しボックス」については下記のカスタマイズ追加でさらにスタイルが選択でき、デザインの幅が広がります。
Cocoonブログカード／カスタマイズのポイント
自分でカスタマイズされる方向けに、ポイントとなるCSSを記載します。
抜粋文（スニペット）を非表示にする
/*抜粋文（スニペット）を非表示*/
.blogcard-snippet {
display: none;
}フッター（URL・投稿日等）を非表示にする
/*URL（フッター）を非表示*/
.blogcard-footer{
display: none;
}画像（サムネイル）を非表示にする
/*画像（サムネイル）を非表示*/
.blogcard-thumbnail{
display: none;
}
/*画像分コンテンツ位置調整（左に寄せる）*/
.blogcard-content {
margin-left: 0;
min-height: initial;
}「Read More」ボタンを追加する
/*Read Moreを追加する*/
.blogcard::after{
display:block;
content: 'Read More';
position: absolute;
bottom: 1rem;
right: 1rem;
color:#fff;
background-color:#666;
font-size:12px;
width: fit-content;
padding: 0.3em 2.4em;
z-index: 1;
}
/*ホバー時ボタン*/
a.blogcard-wrap:hover .blogcard::after{
opacity:.8;
}.blogcard::after.blogcard要素の右下に「Read More」のテキストを表示するための疑似要素::afterを使用しています。position: absolute;で位置を指定し、bottomとrightを 1rem にして、右下に配置。background-colorやcolorでボタンの色を設定。paddingでボタンのサイズを調整。z-index: 1;で他の要素より前面に表示。
- ホバー時の変化
a.blogcard-wrap:hover .blogcard::afterで、リンク全体がホバーされたときにopacityを変更して少し薄く見せています。
タイトルの表示行数を制限する
複数行かつ溢れたら 3 点リーダーを付ける処理です。これにより、3行目以降のテキストは自動的に省略され長いタイトルもすっきり表示できます。
.blogcard-title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}display: -webkit-box;— テキストをボックスレイアウトに変換し、複数行での表示が可能になります（通常は1行のみ）-webkit-box-orient: vertical;— ボックスの方向を垂直に設定し、縦に並べて2行分表示するようにします。-webkit-line-clamp: 2;— 行数を2行に制限。2行以上のテキストは表示されずに切り取られます。overflow: hidden;— テキストが2行を超えた場合に、表示しきれない部分を隠します。
Cocoonブログカードの使い方
- ブロックメニューを選択
- ブロックエディタで「ブログカード」を選択。
- 表示されたらブロック内にリンク先の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条（返金）に基づき、原則として購入いただいた記事のキャンセル、返金等を受けられないことを了承ください。 |
Comment コメントはこちらへ