WordPressで作るウェブサイト&サイト運営・集客をわかりやすく学べます
※本サイトはプロモーションが含まれています

【Elementor】コンテナ機能の余白(隙間・スペース)をなくす方法

【Elementor】コンテナ機能の余白(隙間・スペース)をなくす方法

【Elementor Flexbox Container】コンテナ機能の余白(隙間)をなくす方法

 集客&新規ビジネスに!はっちゃんの新サービス

Elementorの新機能、Flexbox Container(以下、コンテナ)ウィジェットはとても便利な機能です。既存の状態では設定で「有効化」する必要がありますが、今後は正式リリース予定となっています。弊社がElementor公式に問い合わせた際も、「今後はコンテナの利用をおすすめする」との返答がありました。

参考:How do I learn about Flexbox Containers? | Elementor
https://elementor.com/help/container-element/

※コンテナ機能を試す際は、新しいサイトもしくはテストサイトでの試用をおすすめします(現行のサイトでコンテナを有効化するとセクションと共存することになるため)

今回は受講生の方より、このコンテナ機能の余白についてのご質問をいただいたため、画像と動画で解説していきますね。

コンテナを利用した際の隙間(余白)について

こちらはコンテナを利用して、画像を挿入した画面です。このように白い隙間が入っています。なお、margin(マージン)やpadding(パディング)は指定していません。

【Elementor】コンテナ機能の余白(隙間)をなくす方法

白い状態だとわかりにくいため、コンテナの背景色に黄色を設定しました。

【Elementor】コンテナ機能の余白(隙間)をなくす方法

隙間(余白)をなくしたいときは、パディングを0にしよう

コンテナのパディングを0に指定することで隙間をなくすことができます。まずはコンテナのコンテンツ部分のパディング設定を変更しましょう。

隙間が狭くなりましたね。次に、コンテナの大枠部分の設定を変更しましょう。

すべてのコンテナ(コンテンツ部分)のパディングを0にすると隙間がなくなる

すべて対応すると、黄色の背景色が見えなくなりました。スマホビューでもこのとおりです。

【Elementor】コンテナ機能の余白(隙間)をなくす方法

補足:スタイルのコピーとペーストを活用しよう

すでにあるコンテンツのパディングを変更したい場合は、スタイルのコピーとペーストが便利です。

パディングを0にしたコンテナの設定をコピーして、時短につなげましょう。動画では設定済みの右下のスタイルをコピーしています。

追記:記事通りに対応しても反映しない場合

「記事通りにやったのに反映しない」とのご連絡をいただきました。このケースは「ページの属性」をご確認いただき、デフォルトテンプレートからElementor全幅に変更いただくことで解決しました。これはデフォルトテンプレートだとページの横幅がテーマの設定に影響をうけるためです。

デフォルトテンプレート Elementor全幅

ほかにも「画像」ウィジェットを使うと余白が残ってしまう場合があるので、そのときは画像ウィジェットを使わず、コンテナに背景を画像として設定してみてください。

Elementorでデフォルトで余白をゼロにする方法

余白はデフォルトの設定で変更もできます。今後、新規追加するコンテナの余白をゼロにしたいなら「サイト設定>レイアウト」から変更してください。

Elementorでデフォルトで余白をゼロにする方法

コンテナのパディングを0にしましょう。いっしょにGapsやコンテンツ幅の変更もできます。

初期はパソコンになっているので、タブレット、スマホの設定も見直すことをおすすめします。

Elementorでデフォルトで余白をゼロにする方法

 

WordPressで会員動画サイトが作れる!

\動画コンテンツで新しい収益を!/

オンライン講座機能付き
WordPressテンプレート新発売

本を出すだけで終わらない、新しい出版サービス

・ 専用のウェブサイト
・ 大手サイトへのプレス配信
・国会図書館への寄贈
・多言語で海外での出版 
ほか

多言語化によるお悩みを解決します

\導入費用のみ!月額費用は不要/

管理画面からカンタン更新!
AI翻訳+人力翻訳の使い分けも可能

Elementorテンプレート販売中!

\Elementor無料版対応/

サイトがまるごとインストールできる
Webサイトテンプレート
LPも追加しました!

 開催中のWordPress講座・セミナー

 WordPress・サイト運営のお悩みを解決します

女性講師によるマンツーマンレッスン開催中!
・オンラインレッスンだから全国どこでも参加可能
・2011年から150回を超える研修実績あり
・受講後も安心!メールサポート付き
・受講中の録画動画をお渡しします

 はっちゃんセミナー公式SNS

 はっちゃんYouTubeチャンネル

無料セミナー・お役立ち情報を配信中!

公式メールマガジンもあります!

新着情報

 みんなのワンちゃんが写真集に!

チワワやパグ・トイプー等の犬種別の50匹のわんちゃんで1冊の写真集をつくるプロジェクトが弊社の出版事業で募集開始!

まずは、ワンコから開始して、ニャンコ、小動物、そしてカエルの写真集も出したいですね😉 令和出版ロゴ

  新サービス開始しました

ノーコードでWordPressサイトが作れる!
WordPressテンプレート新発売!→詳しくはこちら

WordPressで会員動画サイトが作れる!
オンライン講座機能付きWordPressテンプレート新発売!→詳しくはこちら

多言語化によるお悩みを解決します!
管理画面からカンタン更新!AI翻訳+人力翻訳の使い分けも可能→詳しくはこちら

  ピックアップ講座

最新のAIコンテンツ生成とSEO対策がしっかり学べるコンテンツマーケティング講座(オンライン開催)

 

WordPressに限らず、Canvaの画像編集やサイト運営に関係する内容と、受講生さんからのご質問等で共通な内容も掲載していきます。

  ピックアップ記事

 カテゴリー
公式Facebook
公式LINEアカウント

友だち追加

こちらのURLからお友だち登録できます。
https://lin.ee/CbqqEEI

公式メールマガジン

こちらのURLからメルマガに登録できます。https://www.8seminar.com/mailmagazine-form

PAGE TOP