感染しない・広げないために|新型コロナウイルスまとめ情報サイトへ

エントリーカードのタイトル文字サイズを変更する|WordPress・Cocoon

Cocoon_エントリーカードタイトル文字サイズ変更WordPress

ここでは、WordPressCocoonテーマで、ホーム画面で表示されるエントリーカードタイトル文字サイズを変更する方法をご紹介します。

エントリーカードのタイトルとは下記の部分になります。

エントリーカードのタイトル

 

Cocoonエントリーカードタイトル文字サイズの変更手順

検索と設定

WordPress管理画面(ダッシュボード)⇒「外観」⇒「テーマエディター」で、「Cocoon Child: スタイルシート (style.css)」内に、下記のコードをコピペで追加して下さい。

 

.entry-card-title {
 font-size: 20px;
} 

 

cocoon_childスタイルシートCSS追加

 

②貼り付けたCSSコードの、「font-size: 20px;」の数字の20を変更すると、文字サイズが変わります。

20pxが標準的な文字サイズですので、サイズ調整の目安にして下さい。

文字サイズの変更

 

文字サイズが決まったら「ファイルを更新」をクリックして下さい。

ファイルを更新

 

実際のサイトをPCとスマホ両方の表示で確認しながら、気に入らなければ再度●●pxの数字を変えて文字サイズを調整してみて下さい。

私の場合、20pxだと圧迫感を感じたので、16pxにしました。

参考記事⇒インデックスのタイトルの文字サイズを大きくしたいです | ブログ相談 | Cocoon フォーラム

 

まとめ:文字サイズもデザインの一部と考えてこだわってみる

今回は、WordPressCocoonテーマで、ホーム画面で表示されるエントリーカードタイトル文字サイズを変更する方法をご紹介しました。

文字サイズは細かい事のように思えても、レイアウトの品質に大きく影響しますので、良かったらブログカスタマイズの参考にしてみてください。

コメント

  1. lovesuke より:

    はじめまして、最近ブログを初めてCOCOONを利用させていただいています。
    GOOGLE検索でも分からなかったので、質問させていただきたいのです。

    Cocoon child 使用していてエントリーカードの文字のみが、設定を変更しても反映されず常時一番細い100になってしまいます。
    スタイルシートエディターに、この記事を参考に書き込んでみましたが反映されません。(ページの読み込み時に一瞬だけ表示され、その後細くなります)

    理由が分からないため、もしわかりましたらご教示いただきたいです。

    よろしくお願いします。

  2. よしてっくよしてっく より:

    Lovesukeさん初めまして。
    コメントありがとうございます。
    Lovesukeさんのサイトを拝見させていただきました。
    Cocoonテーマで既にいろいろなカスタマイズを実行されているようなので、それらのカスタマイズの設定が影響している可能性はあります。
    カスタマイズが多くなると、原因を見つけるのも大変になりますので。

    「ズバリ、これが原因です」というアドバイスは難しいですがもし私なら、

    ①影響してそうな他の追加CSSを削除してみる。
    ②Cocoonの設定のバックアップを保存し、Cocoon設定を初期化した状態で試してみる。

    といった、不具合除去のローラー作戦のような事をしてみます。^^;

    あと、Cocoonテーマは、親テーマではなく、小テーマ(Cocoon_Child)を有効にしていますか?
    ちょっと気になったので、そこもご確認お願い致します。

    また進展があればご連絡下さい。