Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

パディングとマージン – WordPressでは何が違うのか?

WordPressでは、パディングはブロック内のコンテンツと枠線の間のスペースで、マージンは2つの別々のブロックの間のスペースです。

この2つの違いを理解することは、WordPressサイトの外観やレイアウトを洗練させたい人にとって重要です。

WPBeginnerでは、WordPressでサイトやeコマースストアを構築した経験が豊富です。そのため、パディングや余白など、プラットフォームが提供するさまざまなデザイン要素について深く理解しています。

この投稿では、WordPressにおけるpaddingとmarginの機能の違いと使い方をご紹介します。

Difference between padding and margin in WordPress

WordPressのパディングとは?

WordPressサイトのパディング機能は、ブロック内にスペースを作るために使用します。

例えば、テキストブロックの中にスペースを追加することで、レイアウトを見やすくしたり、テキストがブロックの枠線に近づきすぎないようにすることができます。

Padding preview

WordPressブログでは、パディングを使ってコンテンツの流れをコントロールすることもできます。例えば、テキストブロックの上下にパディングを追加すれば、訪問者がコンテンツを読みやすくなります。

WordPressのマージンとは?

マージンとは、WordPressのブロックとその周囲の要素の枠線を囲むスペースのことです。

これにより、2つの異なるブロックの間にスペースを追加することができ、よりすっきりとしたオープンなサイトレイアウトを作ることができる。

Margin preview

例えば、テキストブロックの上下に余白を追加して、画面のサイズを変更しても表示されるようにすることができます。

さらに、余白を使ってImageブロックとテキストブロックの間にスペースを追加することで、サイトを視覚的にアピールし、ユーザーがよりアクセスしやすいものにすることもできます。

WordPressのパディングとマージンの違いとは?

WordPressのpaddingとmargin機能の違いを簡単にまとめてみました:

PaddingMargin
Padding means adding space between the content and the border of the block.The margin feature adds space outside the border of the block.
Using padding does not affect the other blocks on your website.Using a margin affects other blocks on your website.
Padding can create a buffer around a block.Margins can create space between two different blocks.

WordPressでパディングを使用する方法

WordPressのフルサイトエディター(FSE)には、初期設定としてパディング機能が搭載されています。

ただし、ブロックベースのテーマを使用していない場合は、カスタムCSSを使用しない限り、WordPressサイトにパディングを追加することができないことに注意してください。

とはいえ、ブロックテーマを使用している場合は、WordPress管理画面のサイドバーから外観 ” エディターページにアクセスし、完全なサイトエディターを起動することができます。

左側の「テンプレート」サイドバーから、ブロックにパディングを追加したいページテンプレートを選択します。このサイドバーには、サイト上のさまざまなページのテンプレートがすべて表示されます。

Choose the page where you want to add padding from the left column

そうすると、選んだテンプレートが画面に表示されます。

ここから「編集」ボタンをクリックし、フルサイトエディターでページテンプレートのカスタマイザーを開始します。

Click the Edit icon for full site editor

次に、パディングを追加したいブロックを選択します。これは、コンテンツとブロックの枠線の間にスペースを作ることを意味します。

画面右側のブロックパネルでブロックの設定を開きます。

ここから’Dimensions’セクションまでスクロールダウンし、3つの点線のメニューをクリックする必要があります。するとプロンプトが表示されますので、「パディング」オプションを選択してください。

Choose the padding option from the Dimensions section

次に、2つのスライダーを使って、ブロックに水平方向と垂直方向のパディングを追加します。

これらのスライダーは、ブロックのすべての側面にパディングを追加することに留意してください。

Padding in full site editor

ただし、ブロックの上下左右にのみパディングを追加したい場合は、パディングセクションの「パディングオプション」アイコンをクリックすることでも可能です。

プロンプトが表示され、パディングを追加したいブロックの辺を選択することができます。

Choose padding options from the prompt

ブロックの複数の面に異なるパディングを追加したい場合は、「カスタム」オプションを選択する必要があることに注意してください。

これで画面上に4種類のスライダーが追加され、ブロックの右、左、下、上にパディングが追加される。

Padding for different corners

設定が完了したら、「保存」ボタンをクリックして設定を保存します。

WordPressの余白の使い方

パディングと同様、マージン機能もWordPressのフルサイトエディターにビルトインされています。ただし、ブロックテーマを使用していない場合、この機能は利用できないことを覚えておいてください。

WordPressのダッシュボードから外観 ” エディターページにアクセスします。

余白を追加したいページテンプレートを左の列から選びます。

Choose the page where you want to add padding or margin from the left column

画面上に選んだページテンプレートが開きます。

ここから「編集」ボタンを選択し、フルサイトエディターでテンプレートのカスタマイザーを開始します。

Click the Edit icon for full site editor

次に、編集したいブロックを選択し、右側のブロックパネルの「Dimensions」セクションまでスクロールダウンします。

ここから、2つのスライダーを使って、ブロックの上下左右の角に水平と垂直の余白を均等に設定するだけです。この機能を使うと、選んだブロックの周りにスペースができます。

Add margin in the full site editor

ただし、複数のスライダーを使ってブロックの周囲に異なる余白を追加したい場合は、セクションの「余白オプション」アイコンをクリックしてください。

画面上に新しいプロンプトが表示され、そこからブロックの片側を選択してマージンを追加することができます。

Use margin options

ただし、複数の辺に異なる余白を追加したい場合は、「カスタム」オプションを選択できます。

ブロックパネルには、画面上にさまざまなスライダーが表示され、それを使ってブロックの周囲にさまざまな余白を設定することができます。

Use margin slider

設定が完了したら、上部にある「保存」ボタンをクリックし、設定を保存することをお忘れなく。

WordPressでフルサイト編集するためのその他のヒント

ブロックにパディングや余白を追加するだけでなく、フルサイトエディターを使ってWordPressテーマ全体をカスタマイズすることもできます。

例えば、すべてのページテンプレートのデザイン、カスタマイザーロゴの追加、ブランドカラーの選択、レイアウトの変更、フォントサイズの調整、背景画像の追加などが可能です。

また、サイトにパターンやさまざまなブロックを追加して、さらにカスタマイズすることもできます。詳しくは、初心者向けWordPressテーマのカスタマイズ方法をご覧ください。

Add patterns to your layouts

また、FSEを使ってヘッダーや ナビゲーションメニューカスタムCSSをサイトに追加することもできます。

さらに、グローバルスタイルを使用して、サイト全体の一貫性を確保することができます。 詳細については、WordPressサイトの色をカスタマイズする方法についてのガイドを参照してください。

Choose a background color from the Color Picker

しかし、完全なサイトエディターを使用するのが好きではなく、サイトの外観をよりコントロールしたい場合は、SeedProdを使用してページやテーマ全体を構築することができます。

市場で最高のランディングページビルダーであり、ドラッグ&ドロップビルダーが付属しています。これにより、あなたのサイトのための素晴らしいテーマを作成するのが非常に簡単になります。

詳しくは、カスタムWordPressテーマを簡単に作成する方法のチュートリアルをご覧ください。

Edit theme template

この投稿がWordPressのpaddingとmargin機能の違いを学ぶのにお役に立てば幸いです。WordPressでブロックの高さと幅を変更する方法についての初心者向けガイドや、WordPressのベストGutenbergブロックプラグインのトップピックにもご興味があるかもしれません。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

3件のコメント返信を残す

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk

    These are exactly those details that a person doesn’t often remember and then tries to figure out what that slider actually does. Thanks to the mentioned GIFs, it’s beautifully explained what padding and margin specifically do. It’s superb. It’s like a mnemonic aid. What you read, you usually forget, but what you see, you tend to remember much better.

  3. A Owadud Bhuiyan

    I always just remembered that the margin is from the outside and padding from the inside.

    Also, I kept remembering that margin is an important factor regarding the responsive issue on a website.

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。