▶ Amazon 今日の【在庫処分】セール会場へ
スポンサーリンク

ページにプロモーションが含まれる場合があります。

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

スポンサーリンク

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

 

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

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

 

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

検索と設定

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

.entry-card-title {
 font-size: 20px;
} 
HINT
追加CSSの使い方に関しては下記を参照ください。
関連 【初心者】CocoonでCSSを追加する手順と注意点

 

cocoon_childスタイルシートCSS追加

 

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

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

文字サイズの変更

 

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

ファイルを更新

ボタンのすぐ上に「ファイルの編集に成功しました」と表示されたら完了です。

 

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

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

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

 

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

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

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

コメント

  1. lovesuke より:

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

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

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

    よろしくお願いします。

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

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

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

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

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

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

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

タイトルとURLをコピーしました