WordPressでマージンを変更する方法（初心者向けガイド）

WordPressでマージンを変更することは、サイトのデザインを改善するための簡単な方法です。マージンは要素間にスペースを作成し、コンテンツをより読みやすく、視覚的に魅力的にします。

一般的なベストプラクティスとして、WordPressサイトをデザインする際には常にマージンとスペーシングを使用しています。これにより、ユーザーがウェブページやコンテンツとどのように関わるかに良い影響があることに気づきました。

この初心者向けガイドでは、WordPressでマージンを追加および調整する方法を説明します。WordPressウェブサイトのさまざまな領域でマージンを変更するためのさまざまな方法を教えます。

WordPressとウェブデザインにおけるマージンとは？

マージンとは、ウェブページまたはウェブページ内の他の要素の周りに追加されるスペースのことです。

通常のウェブページを空の紙と想像してください。マージンは、紙の端の周りの白または空白のスペースです。

余白を使用する目的は、ウェブページ内の要素が窮屈に見えないようにすることです。

同様に、余白はページレイアウト内のさまざまな要素の周りに使用できます。

例えば、画像とテキストが近すぎないように画像の周りの余白を変更したり、コンテンツエリアとサイドバーの間にスペースを残すために余白を追加したりできます。

この記事では、多くの情報を取り上げます。お好きなセクションにジャンプするには、以下のリンクをクリックしてください。

• マージンとパディングの違いは何ですか？
• WordPressで余白を追加または変更する必要があるのはなぜですか？
• WordPressでマージンを追加する方法は？
• フルサイトエディターを使用して WordPress で余白を追加する方法
• ブロックエディターでマージンを追加する
• SeedProdを使用してWordPressで余白を追加する
• Thrive Architect を使用してマージンを変更する
• CSSコードを使用してWordPressで余白を変更する
• WordPressテーマでカスタムCSSを使用してマージンを追加・変更する
• サイトエディターでマージンを変更するためのカスタムCSSの使用
• テーマカスタマイザーでCSSを使用して余白を追加する
• WPCodeを使用してカスタムCSSコードでマージンを変更する
• WordPressのマージンに関するよくある質問

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

マージンとパディングは、どちらもウェブデザインで余白を追加するために使用されます。しかし、それらは非常に異なる方法で使用されます。

マージンは要素の外側に空白を追加し、パディングは要素の内側に空白を追加します。

マージンは、要素の外側にスペースを追加するために使用されます。これにより、ウェブページ上の要素間に十分なスペースがあることを確認できます。

さて、マージンを使用するいくつかの例を見てみましょう。

1. 画像と記事のテキストの間のスペースを増やすために余白を追加する。

2. セクション間のスペースを追加するためにマージンを調整する（ヘッダーとコンテンツエリアなど）。

一方、パディングは、コンテンツとボックスまたは要素の端との間にクッションスペースを追加するために使用されます。

余分なパディングを使用したい場合の例をいくつかご紹介します。

1. パディングを調整して、コールトゥアクションボタンのクッションスペースを増やします。

2. テキスト列のパディングを増やす

パディングとマージンはどちらもウェブデザインで広く使用されています。

空白を使用すると、デザインにゆとりが生まれ、よりユーザーフレンドリーでエレガントになります。

詳細については、WordPressにおけるパディングとマージンの違いに関するチュートリアルをご覧ください。

WordPressで余白を追加または変更する必要があるのはなぜですか？

マージンはウェブデザインの重要な要素です。ウェブサイトを見やすく、使いやすくします。

A/Bテストの経験から、ホワイトスペースの戦略的な使用がコンバージョンに良い影響を与えることが多いことがわかりました。

よりクリーンで整理されたデザインを作成すると、ユーザーはサイトに長く滞在し、目的のアクションを完了する可能性が高くなります。

WordPressテーマは、WordPressウェブサイトのデザインを担当します。ほとんどのテーマは、テーマのレイアウト全体で十分な余白を確保するために、すでにCSSルールをうまく設定しています。

とはいえ、調整のためにマージンを追加する必要が時々あるかもしれません。

例えば、ナビゲーションメニューの周りのマージンが気に入らない場合や、コールトゥアクションボタンの周りにマージンを追加したい場合があります。

同様に、項目同士が近すぎたり離れすぎたりすると感じることもあります。

その場合、WordPressの余白はご自身で変更する必要があります。

WordPressでマージンを追加する方法は？

WordPressでマージンを追加する方法はたくさんあります。

マージンを追加したい場所とWordPressテーマで利用可能なオプションに応じて、ご自身に合った方法を選択する必要があります。

初心者にとって最も簡単な、WordPress自体のデフォルトの組み込みオプションから始めましょう。

フルサイトエディターを使用して WordPress で余白を追加する方法

フルサイト編集をサポートするブロックベースのテーマを使用している場合は、組み込みのサイトエディタを使用して、WordPressウェブサイトのどこでもマージンを変更できます。

確認する簡単な方法は、WordPressダッシュボードを見ることです。外観 » エディターが表示されている場合は、ブロックベースのテーマを使用しています。代わりに外観 » カスタマイズが表示されている場合は、以下の別の方法に進むことができます。

まず、サイトエディターを起動するために 外観 » エディター に移動する必要があります。

サイトエディターに入ったら、左側の列からテンプレートを選択するか、プレビューウィンドウの任意の場所をクリックしてください。

次に、マージンを変更したい領域または要素をクリックします。右側の列の「スタイル」タブの下に、マージンを調整するオプションが表示されます。

マージンを調整すると、エディターがマージン領域をハイライト表示します。

上部、下部、右側、または左側のいずれかにマージンを追加することも選択できます。

ブロックエディターでマージンを追加する

ブログ記事やページを編集している場合は、ブロックエディターを使用します。

WordPressのブロックエディターを使用すると、さまざまなブロックの余白を追加および変更できます。

マージンを追加/調整したいブロックをクリックするだけです。ブロック設定の下にある「スタイル」タブに切り替え、「寸法」または「マージン」オプションまでスクロールします。

SeedProdを使用してWordPressで余白を追加する

SeedProdは、市場で最高のWordPressページビルダープラグインです。これにより、ウェブサイトのカスタムページを簡単に作成できます。

これを使って、カスタムWordPressテーマをゼロから作成することもできます。

当社のパートナーブランドの多くは、SeedProdでウェブサイト全体をデザインしており、それを使用することを気に入っています。詳細については、SeedProdの完全レビューをご覧ください。

SeedProd の直感的なドラッグ＆ドロップページビルダーを使用すると、エディター内のあらゆる要素の余白を簡単に調整できます。

まず、SeedProd プラグインをインストールして有効化する必要があります。詳細については、WordPress プラグインのインストール方法に関するチュートリアルをご覧ください。

次に、SeedProd » ランディングページにアクセスし、「新しいランディングページを追加」ボタンをクリックする必要があります。

その後、ページテンプレートを選択するように求められます。

SeedProdには、開始点として使用できる既製のテンプレートが多数用意されています。または、空白のテンプレートから開始することもできます。

クリックしてテンプレートを選択し、ランディングページの名前を入力します。

これでSeedProdのページビルダーが起動します。

右側にはページのライブプレビューが表示されます。左側の列にはページに追加できる要素が表示されます。

ページ上の任意の項目をポイントしてクリックすると編集できます。

要素をクリックすると選択され、左側の列にオプションが表示されます。「高度な設定」タブに切り替え、「スペーシング」オプションをクリックします。

ここから、選択した要素のマージンとパディングを変更できます。

ページの編集が完了したら、右上にある「保存」および「公開」ボタンをクリックするのを忘れないでください。

その後、ウェブサイトにアクセスして変更が適用されていることを確認できます。

Thrive Architect を使用してマージンを変更する

Thrive Architectは、ドラッグ＆ドロップインターフェイスを使用してWordPressページをデザインできる、ユーザーフレンドリーなWordPressページビルダーです。

テスト中、300以上のテンプレートを初期設定として使用できることがわかりました。さらに、既存のWordPressテーマのレイアウトとスタイルを流用して、WordPressの投稿やページを編集するためにも使用できます。

詳細については、Thrive Architectの完全レビューをご覧ください。

Thrive Architectをインストールするには、まずThrive Themesのウェブサイトでアカウントにログインする必要があります。

そこから、Thrive Product Managerプラグインをダウンロードしてインストールする必要があります。詳細については、WordPressプラグインのインストール方法に関するチュートリアルをご覧ください。

アクティベーション後、Thrive Product Managerページにアクセスする必要があります。

「アカウントにログイン」ボタンをクリックして、WordPressをThrive Themesアカウントに接続します。

接続すると、アカウントの下に利用可能なThrive Themes製品のリストが表示されます。

Thrive Architectの下にある「製品をインストール」チェックボックスをクリックし、下部にある「選択した製品をインストール」ボタンをクリックしてください。

Thrive Product ManagerがThrive Architectプラグインをインストールします。

その後、WordPressの投稿またはページを編集または新規作成し、「Thrive Architectで編集」または「Thrive Architectを起動」ボタンをクリックできます。

新しいページの場合、Thrive Architectはテンプレートを選択するように求めます。

テーマテンプレートを使用して、「通常のページ」または「事前作成済みランディングページ」テンプレートを作成できます。

「あらかじめ作成されたランディングページ」オプションを選択した場合、プラグインは選択できるテンプレートのリストを表示します。

作成したいものに似ているものをクリックして選択するだけです。

通常のページ（テーマのスタイルを使用）であっても、ランディングページであっても、Thrive Architectのページビルダーは同じ機能を提供します。

右側にツールバー、左側に設定パネルが表示されたページのライブプレビューが表示されます。

要素をクリックして選択できます。または、ツールバーの追加 [+] ボタンをクリックして新しい要素を追加します。

要素を選択して編集をクリックすると、その設定が左側の列に表示されます。

ここから、「レイアウトと位置」タブをクリックして、マージンとパディングを変更します。

マージンとパディングの視覚的な表現が表示されます。

マージンのいずれかの端にマウスカーソルを合わせ、ハンドルをドラッグしてマージンを増減させます。

このプロセスを繰り返すことで、4つの辺すべてにマージンを変更できます。

作業が完了したら、保存ボタンをクリックし、投稿エディターに保存して終了オプションを選択することを忘れないでください。

これで、「公開」または「保存」ボタンをクリックして、WordPressの投稿またはページを保存できます。

CSSコードを使用してWordPressで余白を変更する

この方法では、WordPressテーマにCSSコードを追加する必要があります。HTMLとCSSの基本的な理解も必要です。

ただし、この方法では、マージンを追加または調整したい領域を手動で選択できるため、より柔軟に対応できます。

WordPressテーマでカスタムCSSを使用してマージンを追加・変更する

WordPressでは、カスタムCSSをWordPressテーマオプションに保存できます。ただし、WordPressテーマによっては、その方法は複数あります。

CSSを使用して余白を追加または変更する前に、CSSコードでターゲットにする必要がある要素を見つける必要がある場合があります。

例えば、ページの本文の周りのマージンを変更したい場合は、次のコードを使用できます。

body { 
margin:50px; 
}

このコードでは、「px」はピクセルを表し、画面の一般的な測定単位です。このように `margin` プロパティに1つの値を使用すると、すべての4つの辺（上、右、下、左）の余白が同時に設定されます。

ターゲットにする要素を見つける最も簡単な方法は、ブラウザのInspectツールを使用することです。

ウェブサイトを新しいブラウザタブで開き、マージンを変更したい要素にマウスカーソルを合わせます。その後、右クリックしてブラウザメニューから「検証」を選択します。

これによりブラウザ画面が分割され、ページの背後にある HTML コードと CSS が表示されます。

コードの上にマウスを移動すると、ブラウザがコードの影響を受ける領域をハイライト表示します。

コード内では、カスタムCSSでターゲットにする必要があるHTML要素またはCSSクラスを確認できます。これは、スタイルを設定したいページの特定の部分の「アドレス」と考えてください。

ここでマージンを試して、どのように表示されるかプレビューすることもできます。

ただし、これらの変更はテーマに保存されず、ブラウザタブをリロードまたは閉じる際に消えてしまいます。

WordPressでカスタムCSSを保存するさまざまな方法を見ていきましょう。

サイトエディターでマージンを変更するためのカスタムCSSの使用

フルサイトエディターをサポートするブロックテーマを使用している場合。その場合、テーマにカスタムCSSを追加する方法は次のとおりです。

まず、外観 » エディターページに移動してサイトエディターを起動し、「スタイル」パネルに切り替えます。

「スタイル」パネルの下部にある「追加CSS」タブをクリックします。

これによりテキストエディタが表示され、カスタムCSSコードを追加できます。CSSコードはすぐに適用され、画面に変更が表示されるようになります。

変更に満足したら、変更を保存するために「保存」ボタンをクリックすることを忘れないでください。

テーマカスタマイザーでCSSを使用して余白を追加する

クラシックテーマ（サイトエディターサポートなし）を使用している場合は、テーマカスタマイザーにカスタムCSSを保存できます。

テーマカスタマイザーを起動するには、外観 » カスタマイズページに移動します。

カスタマイザーには、WordPressテーマによって異なるオプションが表示されます。

追加CSSタブをクリックして展開する必要があります。

タブがスライドして、カスタムCSSを追加できるシンプルなボックスが表示されます。

有効なCSSルールを追加するとすぐに、ウェブサイトのライブプレビューペインに適用されているのを確認できるようになります。

変更に満足したら、「公開」ボタンをクリックして変更を保存します。

WPCodeを使用してカスタムCSSコードでマージンを変更する

WordPressにカスタムCSSコードを追加する最も簡単な方法は、WPCodeプラグインを使用することです。

これは、WordPressウェブサイトを壊すことなく、任意のCSS/HTML/PHP/JavaScriptコードを追加できる最高のWordPressコードスニペットプラグインです。

評価中、非常にユーザーフレンドリーであることがわかりました。私たちの経験について詳しく知りたい場合は、詳細なWPCodeレビューをご覧ください。

WPCode を使用する利点は、WordPress テーマを切り替えても CSS の変更が失われないことです。

まず、WPCodeプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するチュートリアルをご覧ください。

アクティベーション後、Code Snippets » + Add Newページに移動します。

コードスニペットライブラリの「カスタムコードを追加 (新規スニペット)」オプションにマウスカーソルを合わせ、「スニペットを使用」ボタンをクリックします。

次に、ページの上部で、カスタムCSSスニペットのタイトルを追加します。これは、コードを識別するのに役立つものであれば何でも構いません。

その後、カスタム CSS を「コードプレビュー」ボックスに書き込むか貼り付け、「コードタイプ」をドロップダウンメニューから「CSS スニペット」オプションを選択して設定します。

例えば、ウェブページ全体の本文の余白を追加または変更したい場合は、次のCSSコードを使用できます。

body { 
margin:50px;
}

次に、「挿入」セクションまでスクロールダウンし、「自動挿入」メソッドを選択して、コードをWordPressサイト全体で実行します。

特定のページや投稿でのみコードを実行したい場合は、「ショートコード」メソッドを選択できます。

次に、ページの上部に戻り、スイッチを「アクティブ」に切り替える必要があります。

最後に、「スニペットを保存」ボタンをクリックして変更を保存します。

これで、ウェブサイトにアクセスして、カスタムCSSが機能していることを確認できます。

WordPressのマージンに関するよくある質問

WordPressで余白を追加することについて、読者からよく寄せられる質問を以下に示します。

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

マージンは要素の境界線の外側のスペースで、要素と他の要素との間に距離を作ります。パディングは要素の境界線の内側のスペースで、コンテンツと境界線自体の間にクッションを作ります。

マージンを壁に並べた写真フレーム間のスペース、パディングを単一の写真フレーム内のマットと考えると良いでしょう。

詳細については、WordPressのパディングと余白の違いに関するガイドも参照してください。

モバイルデバイス専用のマージンを変更するにはどうすればよいですか？

モバイル用の余白を調整するには、CSSのメディアクエリを使用できます。これにより、異なる画面サイズに特定のスタイルを適用できます。

SeedProdのようなページビルダープラグインは、デバイス固有のコントロールも提供しており、デスクトップ、タブレット、モバイルビューの余白を簡単に変更できます。

WordPress エディターで特定のブロックの余白オプションが表示されないのはなぜですか？

すべてのWordPressブロックに組み込みのマージンコントロールがあるわけではありません。これはテーマによって異なります。

オプションが見つからない場合は、ブロックをグループブロックで囲むことができます。グループブロックには余白とパディングの設定があります。カスタムCSSを使用してブロックを直接ターゲットにすることもできます。

余白を変更するためにプラグインとカスタムCSSのどちらを使用するのが良いですか？

初心者にとっては、SeedProdのようなページビルダープラグインは、ビジュアルインターフェースを提供するため、より簡単であることがよくあります。

より高度なユーザーやサイト全体の調整を行う場合は、カスタムCSSを使用すると、より正確な制御が可能になります。

WPCode のようなプラグインを使用して CSS を追加するのは、テーマの更新や変更時にコードを保護してくれるため、良い選択です。

この記事が、WordPressでマージンを追加または変更する方法を学ぶのに役立ったことを願っています。また、WordPressで画像を横並びにする方法や、WordPressで下線と両端揃えテキストボタンを追加する方法についても学びたいかもしれません。

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