内部ブログカードにブログ名を表示

Contents

WordPressテーマ Cocoon
ブログカード
内部ブログカードのスタイル変更
1. スタイル変更前
2. カスタマイズ後
スタイル変更方法
1. 内部ブログカードにブログ名を表示
2. 内部ブログカードの右下に時計アイコンを追加
関連記事

WordPressテーマ Cocoon

WordPressテーマ「Cocoon（コクーン）」を導入しました。
シンプルであり、カスタマイズをしやすいように設計された無料テーマです。

ブログカード

ブログカードとは、記事内で同じサイトの別の記事や別のサイトを紹介する際にリンクを名刺のようなカード形式で表示するものです。

以前は Pz-LinkCardプラグインを使用しブログカードを表示していました。Pz-LinkCardプラグインを利用すると、このようなイメージで表示されます。
WordPressテーマCocoonにはブログ本文に URLを記述するだけで、ブログカードを作成する便利機能「ブログカード機能」がついています。プラグインを追加することなくブログカードを表示することができるCocoonの機能は便利です。

内部ブログカードのスタイル変更

ブログカードには内部ブログカード（このブログへのリンク）、外部ブログカード（このブログ以外へのリンク）の2種類があります。各ブログカードの左下にはサイトのアイコンとドメイン名が表示されます。

内部ブログカードの左下にドメイン名ではなくブログ名を表示し、右下に時計アイコンを表示するカスタマイズをします。

スタイル変更前

スタイルを変更する前のブログカードです。

カスタマイズ後

現在のブログカードです。スタイル変更前のブログカードにスキンを適用しています。
Cocoonテーマには外観を着せ替えできる「スキン」という機能があります。
カスタマイズ後のブログカードは「ミックスブルー」スキンをベースにスタイルを追加しています。

エコバッグ ― セブンイレブン限定のシュパット Shupatto

レジ袋有料義務化 2020（令和2）年7月1日より全国でプラスチック製買物袋（レジ袋）の有料化が始まります。有料化の対象となるのは、購入した商品を持ち運ぶために用いる、持ち手のついたレジ袋です。レジ袋の価格は各事業者が設定するため、サイ...

スタイル変更方法

内部ブログカードの左下のドメイン名を非表示にし、ブログ名を表示します。

WordPressの管理画面でメニュー「外観」→「テーマエディター」を選択し、Cocoon Childのスタイルシート（style.css）に以下のコードをコピーします。

失敗しても戻せるように、スタイルシート（style.css）をバックアップしてはじめましょう。

.internal-blogcard-favicon::after {
  padding-left: 0.3em;
  font-family: "Noto Sans JP" ,sans-serif;
  font-size: 90%;
  content: 'ふたりでねっと。';
}
.internal-blogcard-domain {
  display: none;
}

内部ブログカードの右下に時計アイコンを追加

内部ブログカードの右下に Font Awesomeの時計アイコンを表示します。
Font Awesomeは無料でも利用できるアイコンフォントであり、Cocoonテーマ上で利用可能です。

WordPressの管理画面でメニュー「外観」→「テーマエディター」を選択し、Cocoon Childのスタイルシート（style.css）に以下のコードをコピーします。

失敗しても戻せるように、スタイルシート（style.css）をバックアップしてはじめましょう。

.internal-blogcard-date {
  font-size: 70%;
  margin-top: 0.5em;
}
.internal-blogcard-date::before {
  padding-right: 0.3em;
  font-family: "Font Awesome 5 Free";
  content: '\f017';
}