アストラのテーマ本文の文字サイズと行間隔を調整する

Last Updated: 2024 年 01 月 29 日 6のコメント

私 WordPress テーマを変更すると、まず文字サイズを育てる方です。アストラテーマの場合、無料版では全文文字のサイズを変更するオプションが提供されていますが、ブログ投稿の本文フォントのサイズと行間隔(行間)を変更するオプションは提供されません。

GeneratePress テーマを使用している場合は、次の記事を参照して本文の文字サイズと行間隔を調整できます。

アストラのテーマ本文の文字サイズと行間隔を調整する

Astraは GeneratePressとともに速いテーマとして評価されています。そして、アストラはエレメンターと一緒に使用して、ショッピングモールサイトの制作にも多く使われています。

ちなみにクラウドウェイズを利用する場合、サイト数に関係なく Astra Proを1年間無料で利用でき、その後は月4ドルで利用できます(」クラウドウェイで Astra Proテーマを無料で使う"参照)。

アストラ無料版をご利用の場合 外観 » カスタマイズ » グローバル » 文字 ページに移動して ボディーフォント セクションで文字サイズを設定できます。

Body Font の文字サイズを変更すると、ブログの本文の文字サイズだけでなく、ヘッダー以外の残りの部分の文字サイズも変更されるようです。

ブログ本文の文字サイズを変更したい場合は、CSSコードを使用できます。

例:

/* Adjusting the font size and line height of the Single Post body in the Astra theme */

.entry-content p {
	font-size: 1.2em;
	line-height: 1.9em;
}

上記のコードはほとんどのテーマで動作します。 Newspaper など独自のCSSクラスを使用する場合は、状況に応じて適切に変更して適用してください。

数値は適切に変更してください。上記のCSSコード ルックス » カスタマイズ » 追加 CSSに追加したり、 チャイルドテーマのスタイルシートファイル(style.css)に追加できます。

基本的なCSSを理解すれば、文字サイズ、カラーなどのスタイルを簡単に調整できます。

参照


6のコメント

コメント

  1. ほとんどの場合、投稿する部分のタグに記載されているCSS属性がCSSコードに反映されるように記載されていると効果があります。

    .entry-content p{
    margin-bottom: 12px; !important;
    }

    のように !important を付けると効果が再びあるようになります。そうでなければ、他のコードのremやemのような接尾辞による現象である可能性があり、コードが構造的ではない他の理由かもしれません。

    一般的に、 WordPress テーマのよく使われるコードがentry-content class値が与えられたpタグなので、通じますが、ダメならソースコードを見なければなりませんね。

    応答
    • コメントありがとうございます、Neveテーマのための一般的な WordPress テーマと同様に、.entry-content p要素を使用してCSSで制御できるようです。

      応答
    • ブログ記事が表示されるページをソースコードビューで表示し、記事表示部分に投稿内容のタグがある場合は、上記の例が通過します。

      応答
    • Neveテーマ見てみると、外観 » カスタマイズ » 文字 » 一般的な全体的な文字のサイズを変更できます。ポスト本文のサイズを変更するには、本文に記載されているCSSコードを使用するとうまく機能します。

      応答