WordPressのテーマビルダープラグイン「Elementor」のファンブログ

マージンとパディング を操る。

Share on facebook
Share on twitter
Share on google
Share on pocket
Share on pinterest
margin_and_padding_thumbnail

マージンとパディングは、Elementorを使ううえで遅かれ早かれ使う事になります。こだわればこだわるほど、マージンとパディングの奥深くも美しい。

おじさん
おじさん
ちょっと何言ってるかわからない・・・

一見小難しそうですが、理解すれば簡単に使いこなせますので、是非マスターしてみて下さい。

そもそも論

マージンとパディング とは何か?ですが、簡単に言うと、セクション・カラム・ウィジェットそれぞれに設定が出来る「余白」または「隙間」です。

おじさん
おじさん
ん〜わかる様なわからない様な。

実際その余白、隙間を見てみましょう。

yohaku

上の図は濃い青がセクション、グレーがカラム、水色がウィジェットです。色々な所にある黒の矢印で示した空間が余白または隙間です。

この余白または隙間には2種類あります。

それが、「マージン」と「パディング」なのです!

おじさん
おじさん
余白って言えばいいんじゃない?

そうなんですが、これはWeb制作の上では共通言語の様なものですので、これを機に名前は覚えておくと良いかもです。

では、マージンとパディングの違いはなんでしょうか?下の図をご覧下さい。

margin_and_adding

クリックで拡大出来ます。

セクションのマージンとパディングで説明してみます。まず、青のエリアがセクションエリアです。細いグレーの枠線がカラムエリアで、グレー部分がカラムの中身です。そして水色のエリアがウィジェットで、その中の黒の文字がウィジェットの中身です。

では、ここで問題!赤色の矢印部分がマージンです。黄色の矢印がパディングです。よ〜く見て下さい、マージンとパディングでは何が違いますか?

おじさん
おじさん
マージンが外側でパディングが内側

おっさん正解!

マージンとは、外側の余白

パディングとは、内側の余白

(厳密にはマージンは要素の外側、パディングはボーダーの内側です。)

カラムのマージンとパディング

ぶっちゃけ、セクションとさほど変わらないのですが、より理解して頂く為に解説致します。

column_mp

クリックで画像を拡大出来ます。

お気付きの方もいるかと思いますが、セクションのマージンには左右がありません。これはElementorの性質上、表で言う行の役割を担っているからです。ですが、カラム・ウィジェットの場合には、マージンに左右の設定が可能となります。

ほんとだ〜セクションには左右のマージンが設定出来ない!
おじさん
おじさん

先ほど同様に、赤がマージン、黄色がパディングです。グレーのエリアがカラムになり、セクション同様に外側がマージン、内側がパディングとなります。

ウィジェットのマージンとパディング

widget_mp

もうお分かりかと思いますが、水色の部分がウィジェットのエリアです。その外側、赤部分がマージン、黄色がパデイングとなります。パディングが少しわかりづらいので、実在はしない白の点線をウィジェットの中身エリアとして表示しております。

わかったんだっけど、わかってないかも・・・
おじさん
おじさん

ですよね、実際使う事で、その感覚が掴めてくると思います。ので、いくつかマージンとパディングの活用例を紹介したいと思います。

マージンとパディングの活用例

テキストウィジェットでなんか横広なんだよなぁ〜って事ありませんか?

mp_sample

そんな時に役立つのがマージンとパディングです。

mp_s2

やり方はこれが全てではありません。セクションでコントロールしてもOKですし、カラムでもOKです。ただ、「ここはセクションで」「ここはウィジェットのマージンを」なんてごちゃまぜにすると・・・「あれ?この隙間って何で調整してたんだっけ?」となります(実体験)ので、ある程度、自分の中で「ウィジェットから調整する」など、ルールを決めておくと良いかもしれません。

マイナスのマージンとは?

実はマージンはマイナス設定が出来るんです!

おじさん
おじさん
冷蔵庫の温度設定みたい。。。

section

上の画像の様に、2段のセクションがあるとします。セクションBの背景は半透明に設定しています。それではセクションBのマージンをマイナス設定します。

section_minus

セクションAの上にセクションBがかぶさる形となりました。

まとめ

長年Elementorを使っておりますが、つまるところマージンとセクションは重要!っていうか、登場頻度高いです。マージンとパディングを使いこなす事で、より繊細なレイアウトが出来ると思いますので、ぜひ頑張っていじってみて下さい。

参考までにこちらでもマージンやパディングを説明しております。
Elementorの基本「セクション」をマスターしよう!

多くの人にElementorを知ってもらいたいので
\ SNSでシェアお願いします /
Share on facebook
Facebook
Share on twitter
Twitter

プロフィール

icon

 HTMLはなんとなく聞いた事があったけど、CSSって?っていうレベルの人間がこのElementorと出会い、ハマり、好きになってしまい・・・今や他社のサイト制作を受注するまでに至りました。
 プログラミングリテラシーがゼロのこの僕が、仕事でホームページ制作を請負うまでになり、今や個人事業主から中小企業まで年間のべ25〜30サイトの制作をElementorと共にやらせて頂いております。

自称:プロElementor
趣味:Elementor・デザイン・マーケティング

オススメ記事

もくじ

ポップアップ!

こんな感じで横スライドイン!
なんてことも出来ます。