WordPress

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

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

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

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

スポンサーリンク
スポンサーリンク

基本情報

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

  • エントリーカード
    トップページ、カテゴリ、タグなどの投稿一覧に表示される。
    「管理画面」→「Cocoon設定」→「インデックス」→「カードタイプ」→「エントリーカード」で選択したもの。
  • ブログカード
    投稿(記事)内の任意の箇所などに表示できるリンク
  • 関連記事
    投稿エリアの下部分に表示される。
    「管理画面」→「Cocoon設定」→「投稿」→「表示タイプ」→「エントリーカード」で選択したもの。
環境情報
  • WordPress:6.1.1
  • Cocoon:2.5.2.4
  • Cocoon設定
    • スキンなし
    • サイトフォント:17px
    • モバイルサイトフォント:16px

こんな感じになる

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

1024px以上でのエントリーカード
1024px以上でのブログカード
1024px以上での関連記事
834px以下でのブログカード
480px以下でのブログカード
480px以下での関連記事

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

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

設定方法

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

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

  • 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 */
}
スポンサーリンク
スポンサーリンク
この記事をシェアする
どんぱっぱをフォローする
サイト支援
当サイトでは読者の方からの寄付・支援を募っています。 記事が「おもしろかった」「役に立った」という方は、よろしければ支援をお願いします。
スポンサーリンク
となはざな
コメントの通知/購読設定
受け取る通知
guest
0 Comments
Inline Feedbacks
View all comments
タイトルとURLをコピーしました