【Cocoon】エントリーカードやブログカードの文字サイズをカスタマイズ
WordPressテーマ『Cocoon』のカード形式リンクの文字サイズを調節した際の設定・備忘録記事です。
スキンなしのカード形式リンク「エントリーカード」「ブログカード」「関連記事」のデフォルトは、ディスプレイの横幅によってはタイトルやスニペットの文字が小さくて読み辛い気がしました。
そこで、カード形式リンクのタイトルやスニペットの文字サイズを少し大きくしてみました。
- 基本情報
- こんな感じになる
- 設定方法
- スタイルシートの編集方法
- スタイルシートの記述例
- エントリーカード
- 1024px以上
- 834px以下
- 480px以下
- ブログカード
- 1024px以上
- 834px以下
- 480px以下
- 関連記事
- 1024px以上
- 834px以下
- 480px以下
- サイズ別のまとめ
- 1024px以上
- 834px以下
- 480px以下
基本情報
各種カード形式リンクのタイトルとスニペット（抜粋）の文字サイズ（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 */ }
関連記事
WordPress
【WordPress】セキュリティプラグイン『Wordfence』でログインに2段階認証を設定
WordPress
mixhostでWordPressのPHPメモリ上限を上げる方法
WordPress
【WordPress】ファイルをメディアライブラリに一括登録できるプラグイン『Bulk Media Register』
WordPress
【WordPress】ページキャッシュプラグイン『LiteSpeed Cache（Version3）』の設定方法
WordPress
WordPressサイトにHTTPセキュリティヘッダーを設定する方法
WordPress
【WordPress】Cocoonの目次機能を「表示/非表示」から「詳細表示/簡易表示」にカスタマイズする設定
サイト内検索
新しい返信
Label
名前（任意）
メールアドレス（任意）
URL（任意）
Label
名前（任意）
メールアドレス（任意）
URL（任意）
Content retrieved from: https://tonahazana.com/cocoon-link-card-font-size-customize.
コメント