WordPressで余白を変更する方法（初心者ガイド）

WordPressで余白を変更することは、サイトのデザインとユーザーエクスペリエンスを向上させる簡単な方法です。余白は要素間にスペースを作り、コンテンツをより読みやすく、視覚的に魅力的なものにします。

一般的なベストプラクティスとして、私たちのサイトデザインでは常に余白と間隔を十分に取っています。私たちは、それがユーザーが私たちのウェブページやコンテンツにどのように関わるかに良い影響を与えることに気づいています。

この初心者向けガイドでは、WordPressで余白を追加・調整する方法をご紹介します。WordPressサイトのさまざまなエリアの余白を変更するためのさまざまな方法を学ぶことができます。

WordPressとWebデザインにおけるマージンとは？

余白とは、ウェブページやウェブページ内の他の要素の周囲に加えられるスペースのことです。

一般的なウェブページを空の紙だと思ってください。余白とは、紙の端にある白い部分や余白のことです。

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

同様に、余白はページレイアウト内のさまざまな要素の周囲に使うことができる。

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

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

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

マージンとパディングは、どちらもウェブデザインで余白を追加するために使われます。しかし、その使い方は大きく異なります。

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

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

では、マージンを使う場合の例をいくつか見てみよう。

1.余白を追加して、投稿内の画像とテキストの間のスペースを広げる。

2.余白を調整し、ヘッダーとコンテンツエリアなどのセクション間にスペースを追加する。

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

ここでは、余分なパディングを使いたい場合の例をいくつか紹介する。

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

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

パディングもマージンも、ウェブデザインでは広く使われている。

余白を使うことで、どんなデザインにも余裕が生まれ、よりユーザーフレンドリーでエレガントなものになる。

詳しくは、WordPressにおけるpaddingとmarginの違いについてのチュートリアルをご覧ください。

WordPressで余白の追加や変更が必要な理由とは？

余白はウェブデザインの重要な要素です。余白があることで、サイトが見やすく、使いやすくなります。

私たちは、すべてのサイトでA/Bテストを徹底的に実施し、ユーザーがどのようにデザインに接するかを理解しています。その結果、余白を設けることがコンバージョンに大きな影響を与えることが何度も明らかになりました。

よりすっきりと整理されたデザインにすると、ユーザーはサイトに長く滞在し、目的のアクションを完了しやすくなる。

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

とはいえ、時にはマージンを追加して調整する必要があるかもしれない。

例えば、ナビゲーションメニューの余白が気に入らなかったり、コールトゥアクションボタンの余白を増やしたいと思うかもしれません。

同様に、項目同士が近すぎたり遠すぎたりすると感じることもあるだろう。

その場合、WordPressのマージンを自分で変更する必要があります。

WordPressで余白を追加するには？

WordPressで余白を追加する方法はたくさんあります。

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

まずは、WordPress自体に初期設定されているビルトインオプションから。

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

完全なサイトエディターがサポートされているブロックベースのテーマを使用している場合、ビルトインサイトエディターを使用してWordPressウェブサイトの任意の場所でマージンを変更することができます。

まず、外観 ” エディターでサイトエディターを起動します。

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

次に、余白を変更したいエリアまたは要素をクリックします。右の列の「スタイル」タブに余白を調整するオプションが表示されます。

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

また、上下左右に余白をつけることもできる。

ブ ロ ッ ク エデ ィ タ での余白の追加

ブログ投稿やページ制作の場合は、ブロックエディターを使用します。

WordPressのブロックエディターでは、さまざまなブロックの余白を追加したり変更したりできます。

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

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

SeedProdは、市場で最高のWordPressページビルダープラグインです。あなたのサイトのカスタムページを簡単に作成することができます。あなたはゼロからカスタムのWordPressテーマを作成するためにそれを使用することもできます。

SeedProdの直感的なドラッグアンドドロップページビルダーは、エディター内のあらゆる要素のマージンを簡単に調整することができます。

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

次に、SeedProd ” ランディングページにアクセスし、「新規ランディングページを追加」ボタンをクリックします。

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

SeedProdには、出発点として使用できる何十もの既製テンプレートが付属していますし、空白のテンプレートから始めることもできます。

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

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

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

ページ上のどの項目をポイント＆クリックしても編集できる。

要素をクリックするとその要素が選択され、左カラムにそのオプション設定が表示されます。ここから「詳細」タブに切り替え、「間隔」オプションをクリックします。

選択した要素のマージンやパディングはここから変更できる。

ページの編集が終わったら、右上にある「保存」と「公開」ボタンを忘れずにクリックしてください。

その後、あなたのサイトを訪問して、実際に変更を確認することができます。

Thrive Architectを使ったマージンの変更

Thrive Architectは最高のWordPressページビルダーツールの一つで、ドラッグアンドドロップのインターフェースを使ってWordPressページをデザインすることができます。

300以上のテンプレートが用意されているので、まずはそれを使ってみましょう。さらに、既存のWordPressテーマのレイアウトやスタイルを借りて、WordPressの投稿やページを編集するのにも使えます。

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

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

有効化した後、Thrive Product Managerページにアクセスする必要があります。

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

接続されると、あなたのアカウントで利用可能なThriveテーマ製品のリストが表示されます。

Thrive Architectの下にある’製品をインストール’チェックボックスをクリックし、下にある’選択した製品をインストール’ボタンをクリックします。

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

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

Thrive Architectは新しいページの場合、テンプレートの選択を尋ねます。

テーマテンプレートを使って「通常ページ」または「ビルトイン済みランディングページ」テンプレートを作成することができます。

もしあなたが「プリビルド・ランディングページ」オプションを選択した場合、プラグインはあなたにたくさんのテンプレートから選ぶように表示します。

クリックするだけで、作りたいものに似たものを選ぶことができる。

通常のページ（テーマのスタイルを使用）であろうとランディングページであろうと、Thrive Architectのページビルダーは同じ機能を持っている。

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

要素をポイント・オン・クリックすると、その要素を選択することができます。また、ツールバーの追加[+]ボタンをクリックして、新規要素を追加することもできます。

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

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

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

マウスをマージンの任意の側に持っていき、ハンドルをドラッグしてマージンを増減する。

この作業を繰り返して、4辺の余白を変更することができる。

作業が完了したら、Save Workボタンをクリックし、Save and Exit to Post Editorオプションを選択することを忘れないでください。

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

CSSコードを使ってWordPressの余白を変更する

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

しかし、この方法では、余白を追加したり調整したりしたいエリアを手動で選択できるので、より柔軟性があります。

WordPressテーマのカスタムCSSによる余白の追加と変更

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

CSSを使用してマージンを追加または変更する前に、CSSコードでどの要素をターゲットにする必要があるかを確認する必要があるかもしれません。

例えば、ページ本文の余白を変更したい場合、以下のコードを使用することができる：

body { 
margin:50px; 
}

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

新しいブラウザータブでサイトを開き、余白を変更したい要素にマウスオーバーします。その後、右クリックしてブラウザーメニューから「Inspect」を選択します。

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

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

コードでは、カスタムCSSで対象とするHTML要素やCSSクラスを確認できます。

ここで余白を試して、どのように見えるかをプレビューすることもできる。

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

WordPressでカスタムCSSを保存するさまざまな方法を説明しよう。

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

サイトエディターがフルサポートされているブロックテーマを使用している場合。そこで、あなたのテーマにカスタムCSSを追加する方法を紹介します。

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

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

カスタムCSSコードを追加するテキストエディターが表示されます。CSSコードは即座に適用され、変更が画面に表示されるのを確認できます。

変更が完了したら、忘れずに「保存」ボタンをクリックして変更を保存してください。

テーマカスタマイザーでのCSSによる余白の追加

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

外観 ” カスタマイズページでテーマカスタマイザーを起動します。

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

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

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

正しいCSSルールを追加するとすぐに、サイトのライブプレビューペインでそのルールが適用されていることを確認できます。

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

WPCodeを使用したカスタムCSSコードによるマージンの変更

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

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

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

最初に行う必要があるのは、WPCodeプラグインをインストールして有効化することです。詳しくは、WordPressプラグインのインストール方法のチュートリアルをご覧ください。

有効化したら、Code Snippets ” + Add Newのページにアクセスします。

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

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

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

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

body { 
margin:50px;
}

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

特定のページや投稿日のみにコードを実行したい場合は、’ショートコード’メソッドを選択することができます。

ここで、ページのトップに戻り、スイッチを「有効化」に切り替える必要がある。

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

あなたのサイトにアクセスして、カスタムCSSの動作を確認することができます。

この投稿がWordPressで余白を追加したり変更したりする方法を学ぶのに役立てば幸いです。また、WordPressで画像を横に並べる方法や、WordPressでテキストボタンに下線や両端揃えを追加する方法についてもご紹介します。

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.