PR

【WordPressテーマCocoon】ブログカードの設定と使い方

WordPress無料テーマ「Cocoon」には、「ブログカード」という機能が標準でついています。「リンク先のURL」を貼るだけでブログカードが作成されるという便利な機能です。ブログカードには「内部ブログカード」と「外部ブログカード」があります。内部ブログカードとは「同じサイト内の別記事」へのリンクカードで、外部ブログカードは「別のサイトにある記事」へのリンクカードのことです。
この記事では、WordPress無料テーマCocoonのブログカードの設定と使い方について解説します。

内部ブログカード:ホーム

<編集画面>

WordPress Cocoon 内部ブログカード編集画面

<表示画面>

WordPress Cocoon 内部ブログカード表示画面

内部ブログカード:記事

<編集画面>

WordPress Cocoon 内部ブログカード編集画面

<表示画面>

WordPress Cocoon 内部ブログカード表示画面
外部ブログカード:記事

<編集画面>

WordPress Cocoon 外部ブログカード編集画面

<表示画面>

WordPress Cocoon 外部ブログカード表示画面
スポンサーリンク

Cocoonブログカードの設定と使い方(動画)

「Cocoonブログカードの設定と使い方(動画)」は、こちら

スポンサーリンク

Cocoonブログカードの設定

「ブログカード」タブの選択

WordPress管理画面のCocoon設定より、「ブログカード」タブを選択します。

WordPress Cocoon ブログカードの選択画面推移

Cocoonブログカード表示のチェック

ここにチェックを入れておかないと、ブログカードが表示されません。

WordPress Cocoon ブログカード表示のチェック

※「内部ブログカード設定」と、「外部ブログカード設定」のいづれにもチェックを入れておきます。

初回のご利用料金が最大30%オフ!

キャンペーン期間中に、新規にお申し込みいただいたサーバーアカウント
スタンダードプラン ・・・880円/月額

キャンペーン期間:2024年7月4日(木)12:00 ~ 2024年8月6日(火)17:00まで

プラン契約特典の「独自ドメイン永久無料特典」

サーバーご契約者様が、独自ドメインを2つ無料でご利用いただけます。
「.com」や「.net」などの人気ドメインが、サーバー契約が続く限り永久無料です。

エックスサーバー

 

Cocoonブログカードの使い方

Cocoonブログカードの設置

では、実際にブロックエディターの編集画面でどのように使うのかを説明します。

「ブロックを追加」をクリック

ブロックエディターで、「ブログカード」を追加したい場所を選択して、+マークをクリックしてブロックを追加します。

WordPress Cocoon 記事投稿画面

Cocoonブロックを選択

Cocoonブロックの中の「ブログカード」をクリックします。

WordPress Cocoon ブログカードの選択画面

リンクするURLの入力

以下のようなブロックが表示されますので、ここにURLを入力します。

WordPress Cocoon リンクURLの入力

このURLは外部ブログカードとなりますが、内部ブログカードも使い方は同じです。

Cocoonブログカードの確認

更新して、プレビューで確認します。

WordPress Cocoon ブログカードの表示画面

ブログカードが表示されていれば完了です。

画像の差し替え

差し替え画像の準備

デフォルトでは、ブログカードに表示される画像は、cocoonのテーマ画像となりますので、これを差し替えます。
(https://gungii.com/xxxxx/ではなく、https://gungii.com/のブログカード)

<編集画面>

WordPress Cocoon 内部ブログカードの編集画面

<表示画面>

WordPress Cocoon 内部ブログカードの表示画面
画像サイズの確認

デフォルトでは、親テーマに格納されている「screenshot.jpg」が使用され、画像サイズは、880x660pxです。

WordPress Cocoon デフォルトの画像
差し替え画像のリサイズ

ブログのヘッダー画像として使用した画像をリサイズしました。特に、サイズをデフォルト画像に合わす必要はありませんが、画像が大きくリサイズが必要な為、テーマの作者が使用しているサイズに合わせました。

画像のリサイズ
画像の圧縮

tinyjpgで画像を圧縮します。

Tinyjpgの画面

276 KBが83.6KBに圧縮されました。

圧縮された画像

画像の差し替え

ODPタグの選択

WordPress管理画面のCocoon設定から「OGP」タグをクリックします。

WordPress Cocoon ODPタグの選択
画像の差し替え

準備しておいた画像に差し替えます。

WordPress Cocoon 画像の差し替え

選択から画像を変更すれば、何度でも変更できます。

差し替えの確認

ブログカードの画像が差し替わりました。

WordPress Cocoon 画像の差し替わったブログカード

説明文の設定

ホームのブログカードに説明文が入っていませんので、説明文を入れます。
注意:
各記事のブログカードでは、メタディスクリプションが自動的に表示されますが、ホームのメタディスクリプションは設定しなければ表示されません。

WordPress Cocoon ブログカード

「タイトル」タグの選択

WordPress管理画面のCocoon設定から「タイトル」タグをクリックします。

WordPress Cocoon タイトルタグの設定画面

「サイトの説明」欄の入力

「サイトの説明」欄に説明文を入力します。

WordPress Cocoon サイトの説明

ブログカードの確認

「サイトの説明」欄に入力した内容が表示されています。

WordPress Cocoon 説明文の入力されたブログカード

ラベルの設定とカスタマイズ

ブログカードの表示

ラベル無し

<表示画面>

WordPress Cocoon ラベルなしのブログカード

<編集画面>

WordPress Cocoon ブログカードの編集画面

ラベル有り

<表示画面>

WordPress Cocoon ラベル有りのブログカード

<編集画面>

WordPress Cocoon ブログカードの編集画面

ラベル有りの設定

ラベルの選択

記事の編集画面で、ラベルを選択します。

WordPress Cocoon ラベル選択の画面推移

ブログカードの確認

ラベルが付きました。

WordPress Cocoon ブログカード

留意:
黒の背景に白抜き文字です。色を変えるにはCSSを変更するしかありません。Cocoonテーマの制作者わいひらさんがフォーラムで話されていました。

WordPress Cocoon CSSセレクタ

ラベルのカスタマイズ

CSSの変更

外観からテーマエディターを選択して、子テーマのCSSに追記します。

WordPress Cocoon 子テーマのCSSへの追記

ブログカードの確認

背景色がオレンジ(#ff8c00)となりました。

WordPress Cocoon ラベルが変更されたブログカード

留意:
背景色をラベルの種類ごとに変更する場合は、.blogcard-typeのところを各々のラベルのCSSセレクタを指定します。

CSSの変更例

初回のご利用料金が最大30%オフ!

キャンペーン期間中に、新規にお申し込みいただいたサーバーアカウント
スタンダードプラン ・・・880円/月額

キャンペーン期間:2024年7月4日(木)12:00 ~ 2024年8月6日(火)17:00まで

プラン契約特典の「独自ドメイン永久無料特典」

サーバーご契約者様が、独自ドメインを2つ無料でご利用いただけます。
「.com」や「.net」などの人気ドメインが、サーバー契約が続く限り永久無料です。

エックスサーバー