Elementorのテキストエディターの段落のスペースの幅を変更する方法【簡単】
- 2022年4月23日
- 2021年9月6日
- Elementorの使い方
Elemetorの『テキストエディター』ウィジェットを使って文章を改行し、新しい段落ができたときにスペースができてしまいます。
この段落に生じるスペースの幅をどうやったら変更できるの？と、悩んでいる人は意外と多いです。
またはこの問題を解決するために、テキストエディターの下に新たなテキストエディターを入れてマージンで間隔調整をしていませんか？
実はもっと簡単にできますよ！もちろんコードも不要です！
Elementorのサイト設定で簡単に変更することができるんです。
しかし、この方法はWordPressのテーマによっては相性が悪いものもあります。
WordPressのテーマの一部には、ヘッダーにサイトタイトル、またはキャッチコピーが入り、なおかつサイト設定の段落調整の値を上げるとヘッダーの幅も一緒に変更してしまう、という問題があります。
しかし、これはテーマによってキャッチコピーだけが影響してしまうもの、サイトタイトルですら影響をしてしまうもの、どちらも影響せず問題のないものとさまざまです。
この記事で学べることと解決する方法は以下の通りです。
- サイト設定のタイポグラフィの『段落間隔』でテキストエディターの段落にできたスペース幅を変える方法
- 段落間隔と相性の悪いテーマ＋段落間隔の変更によりヘッダー幅が崩れてしまった時の解決方法
–別のテーマを使う。
–ヘッダーにサイトタイトルやキャッチコピーの代わりにロゴ（AI）を表示させる。＜＜おすすめ
–テーマビルダーでヘッダーを作る。（Elementor Pro所有者のみ有効）＜＜おすすめ
Elementorのテキストエディターの段落のスペースの幅を変更する方法を動画でご覧になりたい方はこちらからどうぞ！
TOFUラボのメンバーが作成したサイトでテキストが多いのにとてもスッキリしていて見やすいサイトを紹介した動画もありますので、デザインの参考にぜひご覧ください！
こちらはTOFUラボサロンであった質問「Elementorのテキストウィジェットの段落の下にスペースが入ってしまう問題」について話した動画です。
ぜひ参考にしてください！
サイト設定・タイポグラフィ
まず、画面左上のハンバーガーメニューをクリックします。
開いたタブの中の『サイト設定』をクリックします。
『タイポグラフィ』をクリックします。
サイト設定のタイポグラフィ内の『段落間隔』でテキストエディターの段落間の幅を調整することができます！
段落間隔で段落のスペースの幅を変更する
『段落間隔』のカーソルを左右に動かし値を調整することにより、簡単に段落と段落の間のスペースの幅を変更することができます。
上記は段落間隔の値を『10』にした時の表示画面です。
※尚、こちらのサンプルで使用しているテーマはAstraで、Astra使用時の段落間隔のデフォルトの値は『19』に設定されています。
その場合値を19以下にすればスペースの幅は狭まり、19以上にすればスペースの幅は拡張します。
テーマ・Astraでの不具合
尚、上記は段落間隔の値を『100』（最大値）にした時の表示画面です。
段落間のスペースが拡張されたと同時にヘッダーのサイトタイトル・キャッチコピーの下にもスペースができ、ヘッダーの縦幅も大きくなってしまいました。
この問題は段落間隔の値がデフォルトよりも大きい『20~100』にしたときに起こります。
原因は、このサンプルでいうキャッチコピーの『-ワードプレスを最強にする方法-』にも段落間隔が影響してしまっているからです。
上記はキャッチコピーを非表示にした時の表示画面です。
キャッチコピーが非表示にするとヘッダーのサイトタイトルの下のスペースは変更されなくなりました。
しかし、Astraと同じようにこの問題が発生するテーマはいくつもあります。
またテーマによってはサイトタイトルも段落間隔に影響してしまうものもあります。
以下でテーマ『Hello』『Twenty Seventeen』を例に挙げてみてみましょう。
テーマ・Helloでの不具合
こちらはテーマを『Hello』にし、段落間隔の値を『0』にした時の表示画面です。
こちらは段落間隔の値を『100』にした時の表示画面です。
キャッチコピーが非表示なのにも関わらず、段落間隔の値の変更とともにサイトタイトルの下にスペースが開いてしまいました。
Helloの場合はキャッチコピー・サイトタイトルの両方が、段落間隔を変更するとヘッダーの幅に影響してしまうということです。
テーマ・Twenty Seventeenでの不具合
こちらはテーマを『Twenty-Seventeen』にし、段落間隔の値は『0』（デフォルト）に設定した時の表示画面です。
こちらは段落間隔の値を『100』(最大値)にした時の表示画面です。
Twenty Seventeenの場合、このようにサイトタイトル、キャッチコピーそれぞれに段落間隔が影響しスペースが開きました。
ヘッダーの幅を変更させずにテキストエディターの段落間隔のみを変更する方法
段落間隔はとても便利な機能なのに、テーマとの相性がいいものと悪いものがあるのは残念です。
それでもいちいちテキストエディターのマージンで段落幅の調整をずっとするよりは段落間隔で段落幅を調整していく方がはるかに効率的です。
このヘッダー幅の問題が起こったときは、以下を参考にしてください！
別のテーマを使用する
例えば WordPressテーマの『Twenty Twenty』など、中にはこの段落間隔がヘッダーのサイトタイトルとキャッチコピーに全く影響しないものもあります。
しかしこれは使用できるテーマが限られてしまいますのであまりおすすめしません。
ヘッダーにロゴ（テキストではなくAI）を挿入する
またテーマカスタマイザーでヘッダーのサイトタイトル、またはキャッチコピーを表示させる代わりに、ロゴを挿入するのも一つも方法です。
ロゴならテキストとしてWordPressが認識しないので段落間隔がヘッダーの幅に影響することはありません。
※ちなみにこのロゴは、デザイン作成ツールのCanvaの無料版で作成しました！
Elementor Proのテーマビルダーでヘッダーを作成する
Elementor Proの機能であるテーマビルダーでヘッダーを作成しサイトに使用すれば、上記セクションで取り上げたの不具合はすべて解決してしまいます
上記はサイトにすでにテーマビルダーで作成済みのヘッダーを挿入し、テキストエディターウィジェットを編集しているページでサイト設定のタイポグラフィのエディターを開いている状態です。
なお、このサンプルではAstraのテーマを使用していますが、正直テーマはどれを使ってもいいです。
上記は段落間隔の値を『100』(最大値)にした時の表示画面です。
ヘッダーには何の変化もありません！
これはテーマビルダーのヘッダーはElementor Proで作成したテーマとは異なるのパーツなので、テーマカスタマイザーやサイト設定に影響されないからです。
しかしこの方法は、 Elementor Proを使っている人のみ有効になります。
Elementor Proは有料プラグインですが、これを持っていればサイト制作は確実にスムーズになりサイトの機能が大幅に拡張します！
ぜひElementor Proの購入も検討してみてはいかがでしょうか？
なお、テーマビルダーでヘッダーを作り、サイトに表示させる方法を説明した記事もあります！
＞＞【Elementor Pro 『テーマビルダー』の基本】
テーマビルダーはElementor Proの本当に素晴らしい機能です。
Elementor Proを使っているけどテーマビルダーの使い方がいまいちわからない方はぜひご覧くださいね！
TOFUラボ・テキストエディターの段落幅に関するメンバー質問
TOFUラボのメンバーからの質問にこの記事で紹介している内容を必要とする質問が過去にありました。
※上記のリンクにアクセスすると、その解決方法がご覧いただけます。
また、この他にもTOFUラボのメンバーによるQ＆Aをまとめた『質問と回答』のページがありますので、サイト制作に迷った時の答えや新しいヒントがもしかしたら見つかるかもしれません！
TOFUラボに入会すると、サイト制作で何かしら困ったとき、自分んで調べても限界があるときなど、ラボ内で質問することができます。
たくさんの有識メンバーがその答えを共有してくれ、早期解決、より良いWeb制作につながります！
まとめ
- テキストエディターウィジェットで改行した時に生じるスペースの間隔はサイト設定・タイポグラフィの『段落間隔』で簡単に変更できる。
- テーマによって段落間隔がヘッダーのサイトタイトルやキャッチコピーにも影響し、ヘッダーの幅が崩れてしまう不具合がある。
- 解決方法①：段落間隔がサイトタイトルやキャッチコピーが段落間隔に影響しないテーマを選ぶ。
- 解決方法②：ヘッダーにテキスト（サイトタイトル・キャッチコピー）を使わずに、ロゴ（AI）を使う。（おすすめ）
- 解決方法③：Elementor Proのテーマビルダーでヘッダーを作り、サイトに使用する。（おすすめ）
こちらは英単語限定の機能になりますが、単語と単語のスペースを自由に調整するWord Spacing Controlという機能がElementor3.5から追加されましたので、こちらの使い方を動画でご覧いただけます。
Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。
