WordPress 文字サイズの変更方法(タイトル、本文など)

  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

ワードプレスで、タイトル、本文などの文字サイズを変更したい場合が多いのです。 テーマで文字サイズを変更するオプションを指定すると、テーマ機能を使用することができ、それ以外のCSSを使用してワードプレス文字サイズの変更が可能です。

私はテーマを変更すると、最初に本体の文字サイズを育てることから始めます。 今老眼が進行されるかなので、小さな文字を見ると、目がすぐ疲れています。 だから、私のブログ記事の本文のフォントサイズが他のサイトよりも少し大きくなることがあります。

テーマオプションでワードプレスの文字サイズを変更する

ああ海、円フォールドなど多くの有料テーマでは、テーマのオプションを使用してフォントと文字サイズを詳細に変更することができます。 そしていくつかの無料のテーマでもフォントとフォントサイズの設定を変更することができるオプションを提供しています。

文字サイズ、フォントの種類などを指定するオプションは、通常、Typographyのセクションで提供されます。 使用するテーマのオプションやカスタマイズするページ(ワードプレス伝言板>テーマのデザイン>カスタマイズ)でTypographyセクションがあることをチェックしてください。

テーマで文字サイズ変更オプションを提供していても、特定の部分の文字サイトを調整するには、CSSを利用する必要があります。

ああ、海のテーマで、タイトル、本文の文字サイズを変更する方法

Avada テーマワードプレス伝言板> Avada >テーマオプション>タイポグラフィ(Typography) セクションでは、フォントと文字サイズを調整することができます。

ワードプレス文字サイズの変更 - ああ、海のテーマ

体のタイポグラフィで本文の文字に関連するオプションを設定することができ、 Headers Typographyでヘディング(小見出し)に関するフォントオプションを指定することができ ています。

IMPORTANT NOTE(重要なお知らせ)でご案内しているように、このタブには、一般的なタイポグラフィのオプションが含まれており、特定の領域のための追加タイポグラフィのオプションは、他のタブで提供されます。 たとえば、メニュータイポグラフィのオプションは、メニュータブで指定が可能です。

Headers Typographyでヘディング(h1、h2、h3、h4、h5、h6)タグの文字サイズなどを設定することができます。

特定のページやカテゴリページなどの文字サイズが異なる設定したい場合には、CSSを使用して手動で変更が可能です。

円フォールドテーマで文字サイズを変更する方法

Enfold テーマワードプレスの管理ページ> Enfold > General Styling> Fontsでfont family、フォント色、フォントサイズを設定することができます。

Enfold テーマでワードプレス本体文字サイズの変更

Quick CSSから直接CSSコードを追加して、スタイルを調整することができます。

Enfold > Advanced Stylingでbody、p、strong、ヘディング(小見出し)。 メニュー、ボタン、タイトルなどの一般的なスタイルを指定することができます。 例えば、 Select an element to customizeドロップダウンからH1を選択すると、H1タグの文字色、背景色、文字サイズ、行間隔(行間)、フォントファミリ、フォントウェイト、Text Transformなどのスタイルを変更することができます。

ワードプレスの円フォールドのテーマでのタイトルの文字サイズを変更する

Apply to Sectionでスタイルが指定されるセクション(ログ領域、メインのコンテンツ、代替コンテンツを、フッター、Socketなど)を指定することができます。 (円フォールドでフッターの下の領域を ソケット(Socket)といいます。)

円フォールドはああ、海よりも直感的ではないが、慣れてくると精巧にフォントスタイルを指定することができるようになります。

ニュースペーパーのテーマのフォントの設定オプション

人気ワードプレスマガジンのテーマである Newspaperの場合 ワードプレス伝言板> Newspaper > Theme panel> THEME FONTSでフォント関連の設定を指定することができます。

ワードプレスニュースペーパーのテーマフォントの設定 Newspaper Theme Font Settings

ニュースペーパーのテーマの場合、別のCSS作業が必要ないほど詳細にフォント関連の設定を指定できるように多くのオプションが提供されます。

GeneratePressテーマで文字サイズを調節する方法

このブログに現在適用されている GeneratePressテーマワードプレス伝言板>テーマのデザイン>カスタマイズ> Typography セクションでフォントに関連するオプションを設定することができます。

GeneratePressテーマのタイポグラフィ設定

タイポグラフィ セクションの下に本文(Body)、ヘッダ(Header)、メニュー(Primary Navigation、Secondary Navigation)、Off Canvas Panel、ボタン、ヘディング、ウィジェット、フッターなどのタイポグラフィの設定を指定することができるサブセクションがあります。

CSSを使用してワードプレスの文字サイズを変更する方法

テーマオプションを使用して文字サイズを変更することができない場合、または特定の部分の文字スタイルを調整したい場合、CSSを使用することができます。

例えば、 Astraテーマテーマのデザイン>カスタマイズ>グローバル>文字基本文字ヘディングの文字スタイルを変更することができます。 テーマオプションでの設定だけで文字サイズを調整するには限界がある場合、CSSを使用して調整が可能です。

基本的にはクロムなどのブラウザで要素の検査を実施して文字サイズ等のスタイルをテストした後、そのコードをコピーして、 ワードプレスの管理ページ>テーマのデザイン>ユーザー定義>追加CSSにコードを貼り付けします。

次の例の映像では、アストラテーマでブログ記事本文の文字サイズや行間を調整する方法を示しています。 (以下は例示のみを目的と参照してください。)

基本的なCSSを理解すると、大抵の文字サイズ、文字色などのスタイルを変更することができます。 上記の映像は非常に基本的な事項であるため、これを参考にして応用してみてください。

参考までに、文字サイズを指定するときは、px、em、remを使用することができます。 "%、rem、em、px違い"によるとem、remの違いは次のとおりです。

フォント・サイズに比例しなければならない値はrem、emを使用する必要がある。

remはhtml(root)フォントサイズを基準に計算し
emは親タグのフォントサイズを基準に計算し

ワードプレスでカスタムCSSはいくつかの方法で追加することができます。 詳細については、「ワードプレスでのCSSを追加する」を参照してみてください。

基本的なCSSをつけたい場合書店でのCSS関連の本を一つ購入したり、生活のコーディングのようなフリーのCSSの講義を聞いてみてください。 そして、Googleの「文字サイズcss」または「font size css」のように検索してみると、様々な文書が検索されるので、参考にすることができます。

CSSに慣れてくると、ヘッダーからフッターまでほぼすべての部分の文字色、背景色、文字サイズなどを自由に変更が可能です。

注:



コメントを残す