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

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

この2つの違いを理解することは、WordPressサイトのレイアウトを改善したい人にとって重要です。

私たちは多くのユーザーのウェブサイトデザインを支援してきましたが、常に重視していることの1つが間隔です。ここでマージンとパディングが本当に役立ちます。正しく使用すると、可読性が向上し、サイトにクリーンでバランスの取れた外観を与えます。

この記事では、WordPressでパディング機能とマージン機能の違いと、それらの使用方法を説明します。

WordPressにおけるパディングとマージンの違い

このガイドで説明する内容の概要を以下に示します。

WordPressのパディングとは?

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

たとえば、テキストブロック内にスペースを追加して、レイアウトをより視覚的に魅力的にすることができます。さらに、テキストがブロックの境界線に近すぎるように見えるのを防ぎます。

パディングプレビュー

パディングを使用して、WordPressブログでのコンテンツの流れを制御することもできます。

たとえば、テキストブロックの上部と下部にパディングを追加すると、訪問者はコンテンツを読みやすくなります。

WordPressにおけるマージンとは?

余白とは、WordPressブロックとその周囲の要素の境界線の周りのスペースのことです。

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

マージンプレビュー

たとえば、画像ブロックにマージンを追加して、その下のテキストブロックとの間に十分なスペースを作成できます。これにより、レイアウトがよりクリーンで整理された状態になります。

WordPressにおけるパディングと余白の違いは何ですか?

ここに、WordPressのパディング機能とマージン機能の違いの簡単なリストを示します。

パディングマージン
パディングとは、コンテンツとブロックの境界線の間にスペースを追加することです。余白機能は、ブロックの境界線の外側にスペースを追加します。
パディングを追加すると、ブロックのサイズが大きくなります。マージンを使用すると、ウェブサイト上の他のブロックに影響します。
パディングは、ブロック内のコンテンツとその境界線の間にバッファーを作成します。マージンは、2つの異なるブロックの間にスペースを作成できます。

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

デフォルトでは、WordPressのフルサイトエディター(FSE)にはパディング機能が付属しています。

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

ただし、ブロックテーマを使用している場合は、WordPress管理画面のサイドバーから外観 » エディターページにアクセスして、フルサイトエディターを起動できます。

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

左側の列からパディングを追加したいページを選択してください

これが完了すると、選択したテンプレートが画面に表示されます。

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

フルサイトエディターの編集アイコンをクリック

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

これにより、画面の右側にあるブロックパネルでブロックの設定が開きます。

ここから下にスクロールして「寸法」セクションに移動し、3つの点のメニューをクリックします。これによりプロンプトが開くので、「パディング」オプションを選択してください。

寸法セクションからパディングオプションを選択する

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

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

フルサイトエディターでのパディング

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

これにより、パディングを追加したいブロックの異なる辺を選択できるプロンプトが開きます。

プロンプトからパディングオプションを選択してください

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

これにより、ブロックの上部、右側、下部、左側のカスタムパディングを設定できます。

異なるコーナーのパディング

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

WordPressでマージンを使用する方法

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

マージンを追加するプロセスは、パディングを追加するプロセスと非常によく似ています。

外観 » エディターに移動し、上のセクションで行ったように、カスタマイズしたいテンプレートを開くことで開始できます。

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

フルサイトエディターの編集アイコンをクリック

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

ここから、2つのスライダーを使用して、選択したブロックのすべての辺に均等な水平および垂直マージンを設定できます。この機能により、選択したブロックの周りにスペースが作成されます。

フルサイトエディターで余白を追加する

ただし、複数のスライダーを使用して、ブロックの周りに異なる余白を追加することもできます。これを行うには、セクションの「余白オプション」アイコンをクリックします。

これにより、画面に新しいプロンプトが表示され、ブロックの片側に余白を追加するサイドを選択できます。

マージンオプションを使用する

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

ブロックパネルに画面上にさまざまなスライダーが表示され、ブロックの周りに異なる余白を設定するために使用できます。

マージンスライダーを使用する

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

WordPressのフルサイト編集に関するその他のヒント

ブロックにパディングとマージンを追加する以外にも、フルサイトエディターを使用してWordPressテーマ全体をカスタマイズすることもできます。

例えば、すべてのページテンプレートをデザインしたり、独自のカスタムロゴを追加したり、ブランドカラーを選択したり、レイアウトを変更したり、フォントサイズを調整したり、背景画像を追加したりすることができます。

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

レイアウトにパターンを追加する

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

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

カラーピッカーから背景色を選択

ただし、フルサイトエディターの使用が気に入らず、ウェブサイトの外観をより細かく制御したい場合は、SeedProdを使用してページやテーマ全体を構築できます。

ドラッグアンドドロップビルダーが付属しており、ウェブサイトの素晴らしいテーマを簡単に作成できます。

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

テーマテンプレートの編集

SeedProdの完全レビューも確認することをお勧めします。

よくある質問

WordPressでパディングと余白を使用することについて、読者からよく寄せられる質問をいくつか紹介します。

パディングとマージンの主な違いは何ですか?

違いを覚える最も簡単な方法は、パディングは要素の内側、コンテンツと境界線の間のスペースであるということです。

余白とは、要素の外側のスペースであり、要素とその近くの他の要素との間に距離を作成します。

パディングの代わりにマージンを使用するのはいつですか?

ブロック内のコンテンツの周囲に余白を作成する必要がある場合は、パディングを使用してください。

たとえば、グループブロックにパディングを追加して、テキストが端に触れないようにすることができます。 2 つの別々のブロックを互いに離したい場合は、マージンを使用します。

クラシックWordPressテーマでパディングとマージンを調整できますか?

パディングと余白の視覚的なコントロールは、フルサイトエディターの一部であり、ブロックテーマでのみ利用可能です。

クラシックテーマでは、サイトのさまざまな要素の間隔を調整するためにカスタムCSSコードを追加する必要があります。

マージンとブロックの間隔設定の違いは何ですか?

ブロックの間隔は、すべてのブロック間に一貫した量の垂直スペースを自動的に適用するグローバル設定です。

余白とは、個々のブロックに適用して、その周りにカスタムスペースを追加する設定であり、グローバルなブロック間隔設定を上書きできます。

この記事で、WordPressのパディング機能とマージン機能の違いについて理解していただけたことを願っています。また、WordPressでブロックの高さと幅を変更する方法に関する初心者向けガイドや、WordPressに最適なGutenbergブロックプラグインについても興味があるかもしれません。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterFacebookでもフォローできます。

開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、当社が手数料を得る可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要か、そしてどのように私たちをサポートできるかについては、こちらをご覧ください。当社の編集プロセスはこちらです。

究極のWordPressツールキット

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

読者とのインタラクション

3 CommentsLeave a Reply

  1. コンセプトを説明するのに役立つビジュアルが気に入りました。パディングは箱の内側のスペース、余白は箱の外側のスペースと考えるのが役立ちました。これにより、コンテンツのスタイリング時にどちらを使用すべきかを簡単に覚えておくことができます。wordpressを始めたばかりの初心者におすすめできます。ありがとうございます。

  2. これらは、人がしばしば覚えておらず、そのスライダーが実際に何をするのかを理解しようとするような詳細です。言及されたGIFのおかげで、パディングとマージンが具体的に何をするのかが美しく説明されています。それは素晴らしいです。それは記憶術のようなものです。読んだことは通常忘れますが、見たことははるかに良く覚えている傾向があります。

  3. マージンは外側、パディングは内側だといつも覚えていました。

    また、ウェブサイトのレスポンシブ問題に関して、余白が重要な要素であることを思い出しました。

返信する

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