ここでは、WordPressのCocoonテーマで、ホーム画面で表示されるエントリーカード(ブログカード)のタイトル文字サイズを変更する方法をご紹介します。
エントリーカードのタイトルとは下記の部分になります。
Cocoonエントリーカードタイトル文字サイズの変更手順
①WordPress管理画面(ダッシュボード)⇒「外観」⇒「テーマエディター」で「Cocoon Child: スタイルシート (style.css)」内に、下記のコードをコピペで追加して下さい。
.entry-card-title {
font-size: 20px;
}
②貼り付けたCSSコードの「font-size: 20px;」の数字の20を変更すると、文字サイズが変わります。
20pxが標準的な文字サイズですので、サイズ調整の目安にして下さい。
③文字サイズが決まったら「ファイルを更新」をクリックして下さい。
ボタンのすぐ上に「ファイルの編集に成功しました」と表示されたら完了です。
実際のサイトをPCとスマホ両方の表示で確認しながら、気に入らなければ再度●●pxの数字を変えて文字サイズを調整してみて下さい。
私の場合20pxだと圧迫感を感じたので、16pxにしました。
参考 インデックスのタイトルの文字サイズを大きくしたいです | ブログ相談 | Cocoon フォーラム
まとめ：文字サイズもデザインの一部と考えてこだわってみる
今回は、WordPressのCocoonテーマで、ホーム画面で表示されるエントリーカードのタイトル文字サイズを変更する方法をご紹介しました。
文字サイズは細かい事のように思えても、レイアウトの品質に大きく影響しますので良かったらブログカスタマイズの参考にしてみてください。
コメント
はじめまして、最近ブログを初めてCOCOONを利用させていただいています。
GOOGLE検索でも分からなかったので、質問させていただきたいのです。
Cocoon child 使用していてエントリーカードの文字のみが、設定を変更しても反映されず常時一番細い１００になってしまいます。
スタイルシートエディターに、この記事を参考に書き込んでみましたが反映されません。（ページの読み込み時に一瞬だけ表示され、その後細くなります）
理由が分からないため、もしわかりましたらご教示いただきたいです。
よろしくお願いします。
Lovesukeさん初めまして。
コメントありがとうございます。
Lovesukeさんのサイトを拝見させていただきました。
Cocoonテーマで既にいろいろなカスタマイズを実行されているようなので、それらのカスタマイズの設定が影響している可能性はあります。
カスタマイズが多くなると、原因を見つけるのも大変になりますので。
「ズバリ、これが原因です」というアドバイスは難しいですがもし私なら、
①影響してそうな他の追加CSSを削除してみる。
②Cocoonの設定のバックアップを保存し、Cocoon設定を初期化した状態で試してみる。
といった、不具合除去のローラー作戦のような事をしてみます。^^;
あと、Cocoonテーマは、親テーマではなく、小テーマ(Cocoon_Child)を有効にしていますか？
ちょっと気になったので、そこもご確認お願い致します。
また進展があればご連絡下さい。