WEB

Elementorで本文、リンク、見出しをサイト全体で設定してみる

WEBサイトを構築する際に本文、リンク、見出しのフォント設定をサイト全体に対して統一設定するには、CSSで宣言することが最初にあります。ワードプレスでのサイト構築にElementorを使用している場合は、CSSでの宣言ではなく、エレメンターの設定画面から簡単に設定することが可能です。

サイト全体のフォント設定(グローバルフォントの設定)をしたい場合は以下の記事で取り上げています。

本文、見出しを設定

Elementorで固定ページやテンプレートなど、なんでもいいので開き、左側にあるメニューの左上のハンバーガーメニューを選択します。

設定の中にある「サイト設定」を選択します。

テーマスタイルから「タイポグラフィ」を選択します。

本文の設定

「本文」の部分で本文の設定を行うことが出来ます。

「文字色」でサイト全体の本文の色設定を行えます。

黒色は、RGBで「#000000」がまっ黒になりますが、真っ黒にすると見ずらいために様々なサイトで真っ黒は採用されていません。
参考として2023年現在では、
Amazonの商品ページ本文:#333
WordPressの編集画面:#333
Googleの黒文字:#202124
などとなっていますので、任意で真っ黒以外の黒色にすることが望ましいです。

「書体」で本文の書体設定ができますが、グローバルフォントの設定をしている場合はデフォルト値のままで問題ありません。

その下に「段落間隔」がありますので、任意で調整しましょう。

リンクの設定

リンクの文字設定については、通常時とマウスオーバーの際の設定が可能です。
設定方法は、本文と変わらないので割愛しますが、

マウスオーバー時に、下線(アンダーライン)を付けたい場合には、「マウスオーバー」を選択し、「装飾」から「下線」を選択することで設定可能です。

見出しの設定

「見出し」は、H1~H6まで設定できます。こちらも本文やリンクと要領は一緒になります。

H1~H6に対して、カコミや背景の塗りつぶしの設定を統一させてたい場合は、カスタムCSSで設定をします。
※カスタムCSSはサイト設定>設定>カスタムCSSから設定可能です。

さいごに

Elementorでサイト構築をしていく場合、それぞれの記事・固定ページでの本文、リンク、見出しのフォント設定も可能ですが、1箇所ずつ変更していくと手間がかかりますし、たまに設定し忘れてしまい他と体裁が変わってしまうことがありますので、タイポグラフィで設定を必ずするようにしましょう。

関連記事

TOP