【Cocoon】エントリーカードやブログカードの文字サイズをカスタマイズ

WordPressテーマ『Cocoon』のカード形式リンクの文字サイズを調節した際の設定・備忘録記事です。

スキンなしのカード形式リンク「エントリーカード」「ブログカード」「関連記事」のデフォルトは、ディスプレイの横幅によってはタイトルやスニペットの文字が小さくて読み辛い気がしました。

そこで、カード形式リンクのタイトルやスニペットの文字サイズを少し大きくしてみました。

基本情報

各種カード形式リンクのタイトルとスニペット（抜粋）の文字サイズ（font-size）を調節した。

エントリーカード
トップページ、カテゴリ、タグなどの投稿一覧に表示される。
「管理画面」→「Cocoon設定」→「インデックス」→「カードタイプ」→「エントリーカード」で選択したもの。
ブログカード
投稿（記事）内の任意の箇所などに表示できるリンク
関連記事
投稿エリアの下部分に表示される。
「管理画面」→「Cocoon設定」→「投稿」→「表示タイプ」→「エントリーカード」で選択したもの。

環境情報

WordPress：6.1.1
Cocoon：2.5.2.4
Cocoon設定
- スキンなし
- サイトフォント：17px
- モバイルサイトフォント：16px

こんな感じになる

上段が変更前、下段が変更後です。pxは横幅（width）。

主にスニペットの文字サイズを大きくしました。横幅834px以下と480px以下のブログカードはタイトルも小さかったので合わせて大きくしました。

文字サイズが大きくなるので表示できる文字数は減ります。視認性を優先！

設定方法

『Cocoon』の子テーマ『Cocoon Child』のスタイルシート「style.css」に設定を書き込んで文字サイズを変更する。

テーマのダウンロード

Wordpressテーマ「Cocoon」の親テーマと子テーマのダウンロードページ...

GitHub - xserver-inc/cocoon-child

Contribute to xserver-inc/cocoon-child d...

スタイルシートの編集方法

WordPressの管理画面
「管理画面」→「外観」→「テーマファイルエディター」→「編集するテーマを選択：Cocoon Child」→「スタイルシート（style.css）」
利用しているレンタルサーバーのファイルマネージャー
当サイトで利用しているmixhostだとcPanelのファイルマネージャー
適当なFTPクライアントソフトとHTMLエディタ
お好みで（『FileZilla』と『サクラエディタ』など）

スタイルシートの記述例

Cocoon子テーマ（Cocoon Child）のstyle.cssに書き込む際の例です。

font-size行でコメントアウト（「/* */」）しているのは元の文字サイズです。

font-sizeの「○○em」や「○○px」の数値を変更してお好みでカスタマイズ可。

@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/* エントリーカード スニペット */
.entry-card-snippet {
  font-size: .95em; /* 0.8em */
}

/* ブログカード スニペット */
.blogcard-snippet {
  font-size: .95em; /* 0.8em */
}

/* 投稿関連記事 スニペット */
.related-entry-card-snippet {
  font-size: .95em; /* 0.8em */
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/

  /* エントリーカード スニペット */
  .entry-card-snippet {
    font-size: 16px; /* 14px */
  }

  /* ブログカード タイトル */
  .blogcard-title {
    font-size: 17px; /* 0.9em */
  }

  /* ブログカード スニペット */
  .blogcard-snippet {
    font-size: 16px; /* 12px */
  }

  /* 投稿関連記事 スニペット */
  .related-entry-card-snippet {
    font-size: 16px; /* 14px */
  }

}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/

  /* エントリーカード スニペット */
  .entry-card-snippet {
    font-size: 15px; /* 13px */
  }

  /* ブログカード タイトル */
  .blogcard-title {
    font-size: 16px; /* 0.9em */
  }

  /* ブログカード スニペット */
  .blogcard-snippet {
    font-size: 15px; /* 0.74em */
  }

  /* 関連記事 スニペット */
  .related-entry-card-snippet {
    font-size: 15px; /* 13px */
  }

}

エントリーカード

エントリーカードのクラス名

タイトル：entry-card-title
スニペット：entry-card-snippet

1024px以上

/* エントリーカード スニペット */
.entry-card-snippet {
	font-size: .95em; /* 0.8em */
}

834px以下

/* エントリーカード スニペット */
.entry-card-snippet {
	font-size: 16px; /* 14px */
}

480px以下

/* エントリーカード スニペット */
.entry-card-snippet {
	font-size: 15px; /* 13px */
}

ブログカード

ブログカードのクラス名

タイトル：blogcard-title
スニペット：blogcard-snippet

ブログカードは、834px以下と480px以下でタイトルのフォントが小さめだったので大きくした。

1024px以上

/* ブログカード スニペット */
.blogcard-snippet {
  font-size: .95em; /* 0.8em */
}

834px以下

/* ブログカード タイトル */
.blogcard-title {
  font-size: 17px; /* 0.9em */
}

/* ブログカード スニペット */
.blogcard-snippet {
  font-size: 16px; /* 12px */
}

480px以下

/* ブログカード タイトル */
.blogcard-title {
  font-size: 16px; /* 0.9em */
}

/* ブログカード スニペット */
.blogcard-snippet {
  font-size: 15px; /* 0.74em */
}

エントリーカードのクラス名

タイトル：related-entry-card-title
スニペット：related-entry-card-snippet

1024px以上

/* 関連記事 スニペット */
.related-entry-card-snippet {
  font-size: .95em; /* 0.8em */
}

834px以下

/* 関連記事 スニペット */
.related-entry-card-snippet {
  font-size: 16px; /* 14px */
}

480px以下

/* 関連記事 スニペット */
.related-entry-card-snippet {
  font-size: 15px; /* 13px */
}

サイズ別のまとめ

1024px以上

/* エントリーカード スニペット */
.entry-card-snippet {
  font-size: .95em; /* 0.8em */
}

/* ブログカード スニペット */
.blogcard-snippet {
  font-size: .95em; /* 0.8em */
}

/* 関連記事 スニペット */
.related-entry-card-snippet {
  font-size: .95em; /* 0.8em */
}

834px以下

/* エントリーカード スニペット */
.entry-card-snippet {
  font-size: 16px; /* 14px */
}

/* ブログカード タイトル */
.blogcard-title {
  font-size: 17px; /* 0.9em */
}

/* ブログカード スニペット */
.blogcard-snippet {
  font-size: 16px; /* 12px */
}

/* 関連記事 スニペット */
.related-entry-card-snippet {
  font-size: 16px; /* 14px */
}

480px以下

/* エントリーカード スニペット */
.entry-card-snippet {
  font-size: 15px; /* 13px */
}

/* ブログカード タイトル */
.blogcard-title {
  font-size: 16px; /* 0.9em */
}

/* ブログカード スニペット */
.blogcard-snippet {
  font-size: 15px; /* 0.74em */
}

/* 関連記事 スニペット */
.related-entry-card-snippet {
  font-size: 15px; /* 13px */
}