fbpx

Elementorのテキストエディターの段落のスペースの幅を変更する方法【簡単】

テキストエディターウィジェットで文章作成しEnterキーで改行した時の表示見本

Elemetorの『テキストエディター』ウィジェットを使って文章を改行し、新しい段落ができたときにスペースができてしまいます。

この段落に生じるスペースの幅をどうやったら変更できるの?と、悩んでいる人は意外と多いです。
またはこの問題を解決するために、テキストエディターの下に新たなテキストエディターを入れてマージンで間隔調整をしていませんか?
実はもっと簡単にできますよ!もちろんコードも不要です!

Elementorのサイト設定で簡単に変更することができるんです。

しかし、この方法はWordPressのテーマによっては相性が悪いものもあります。
WordPressのテーマの一部には、ヘッダーにサイトタイトル、またはキャッチコピーが入り、なおかつサイト設定の段落調整の値を上げるとヘッダーの幅も一緒に変更してしまう、という問題があります。

しかし、これはテーマによってキャッチコピーだけが影響してしまうもの、サイトタイトルですら影響をしてしまうもの、どちらも影響せず問題のないものとさまざまです。

この記事で学べることと解決する方法は以下の通りです。

サイト設定・タイポグラフィ

編集タブ左上のハンバーガーメニューをクリック

まず、画面左上のハンバーガーメニューをクリックします。

サイト設定を選択

開いたタブの中の『サイト設定』をクリックします。

タイポグラフィを選択

『タイポグラフィ』をクリックします。

タイポグラフィの編集タブ内の『段落間隔』

サイト設定のタイポグラフィ内の『段落間隔』でテキストエディターの段落間の幅を調整することができます!

段落間隔で段落のスペースの幅を変更する

段落間隔の値を『10』にした時の表示画面

『段落間隔』のカーソルを左右に動かし値を調整することにより、簡単に段落と段落の間のスペースの幅を変更することができます。
上記は段落間隔の値を『10』にした時の表示画面です。
※尚、こちらのサンプルで使用しているテーマはAstraで、Astra使用時の段落間隔のデフォルトの値は『19』に設定されています。
その場合値を19以下にすればスペースの幅は狭まり、19以上にすればスペースの幅は拡張します。

テーマ・Astraでの不具合

段落間隔の値を『100』(最大値)に設定した時の表示画面:ヘッダーのサイトタイトル・キャッチコピーの下にもスペースが開いてしまう。(テーマAstraの場合)

尚、上記は段落間隔の値を『100』(最大値)にした時の表示画面です。
段落間のスペースが拡張されたと同時にヘッダーのサイトタイトル・キャッチコピーの下にもスペースができ、ヘッダーの縦幅も大きくなってしまいました。
この問題は段落間隔の値がデフォルトよりも大きい『20~100』にしたときに起こります。

原因は、このサンプルでいうキャッチコピーの『-ワードプレスを最強にする方法-』にも段落間隔が影響してしまっているからです。

段落間隔の値は『100』(最大値)のままでキャッチコピーを非表示にした時の表示画面(テーマAstraを使用)

上記はキャッチコピーを非表示にした時の表示画面です。
キャッチコピーが非表示にするとヘッダーのサイトタイトルの下のスペースは変更されなくなりました。


しかし、Astraと同じようにこの問題が発生するテーマはいくつもあります。
またテーマによってはサイトタイトルも段落間隔に影響してしまうものもあります。

以下でテーマ『Hello』『Twenty Seventeen』を例に挙げてみてみましょう。

テーマ・Helloでの不具合

テーマをHelloにし、段落間隔の値を『0』にした時の表示画面(ヘッダーはサイトタイトルのみ、キャッチコピーなし)

こちらはテーマを『Hello』にし、段落間隔の値を『0』にした時の表示画面です。

テーマをHelloにし、段落間隔の値を『100』(最大値)にした時の表示画面・ヘッダーの下にスペースができる(ヘッダーはサイトタイトルのみ、キャッチコピーなし)

こちらは段落間隔の値を『100』にした時の表示画面です。
キャッチコピーが非表示なのにも関わらず、段落間隔の値の変更とともにサイトタイトルの下にスペースが開いてしまいました。

Helloの場合はキャッチコピー・サイトタイトルの両方が、段落間隔を変更するとヘッダーの幅に影響してしまうということです。

テーマ・Twenty Seventeenでの不具合

テーマをTwenty Seventeenにし、段落間隔の値を『0』にした時の表示画面(ヘッダーにサイトタイトル・キャッチコピーあり)

こちらはテーマを『Twenty-Seventeen』にし、段落間隔の値は『0』(デフォルト)に設定した時の表示画面です。

テーマをTwenty Seventeenにし、段落間隔の値を『100』にした時の表示画面(サイトタイトルとキャッチコピー両方の下にスペースができる)

こちらは段落間隔の値を『100』(最大値)にした時の表示画面です。
Twenty Seventeenの場合、このようにサイトタイトル、キャッチコピーそれぞれに段落間隔が影響しスペースが開きました。


ヘッダーの幅を変更させずにテキストエディターの段落間隔のみを変更する方法

段落間隔はとても便利な機能なのに、テーマとの相性がいいものと悪いものがあるのは残念です。

それでもいちいちテキストエディターのマージンで段落幅の調整をずっとするよりは段落間隔で段落幅を調整していく方がはるかに効率的です。

このヘッダー幅の問題が起こったときは、以下を参考にしてください!

別のテーマを使用する

ダッシュボードの外観・テーマの画面

例えば WordPressテーマの『Twenty Twenty』など、中にはこの段落間隔がヘッダーのサイトタイトルとキャッチコピーに全く影響しないものもあります。

しかしこれは使用できるテーマが限られてしまいますのであまりおすすめしません。

Astraのテーマカスタマイザーでヘッダーにロゴを挿入した時の表示画面(ロゴはテキストではなくAIなので段落間隔がヘッダーには影響しない)

またテーマカスタマイザーでヘッダーのサイトタイトル、またはキャッチコピーを表示させる代わりに、ロゴを挿入するのも一つも方法です。

ロゴならテキストとしてWordPressが認識しないので段落間隔がヘッダーの幅に影響することはありません。

※ちなみにこのロゴは、デザイン作成ツールのCanvaの無料版で作成しました!

Elementor Proのテーマビルダーでヘッダーを作成する

テーマビルダーで作成したヘッダーを使用した時の表示画面


Elementor Proの機能であるテーマビルダーでヘッダーを作成しサイトに使用すれば、上記セクションで取り上げたの不具合はすべて解決してしまいます

上記はサイトにすでにテーマビルダーで作成済みのヘッダーを挿入し、テキストエディターウィジェットを編集しているページでサイト設定のタイポグラフィのエディターを開いている状態です。

なお、このサンプルではAstraのテーマを使用していますが、正直テーマはどれを使ってもいいです。

テーマビルダーのヘッダーを挿入し、段落間隔の値を『100』(最大値)にした時の表示画面(段落間隔はヘッダーに影響しない)

上記は段落間隔の値を『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のテーマビルダーでヘッダーを作り、サイトに使用する。(おすすめ)



コード書かないウェブ制作を学べるサロン『TOFUラボ』

目次

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通