WordPressで要素を移動しようとしたけれど、スペースを追加する方法がわからなかった経験はありませんか？あなたは一人ではありません。私が受けるレイアウトに関する最も一般的な質問の1つは、ページの余白をどのように変更するかということです。
余白は、ブロック、画像、セクションの間にスペースを作成するのに役立ちます。これにより、コンテンツが読みやすくなり、ページがより洗練された外観になります。
このチュートリアルでは、WordPressで余白を変更する方法を、ステップバイステップで初心者にもわかりやすく解説します。
このガイドの内容：
WordPressにおける余白とは？
WordPressにおける余白とは、ページ要素の端の周りのスペースであり、他の要素と区別するために設定されます。これらの要素には、画像、見出し、ウィジェット、ボタンなどが含まれます。
同様に、余白はヘッダー、フッター、コンテンツエリアなどのページレイアウトの周りのスペースにも適用されます。
ページまたは要素の余白を変更することは、ウェブサイトデザインの重要な部分であり、サイトの機能性と外観に劇的な影響を与える可能性があります。
余白とパディングの違い
余白とパディングはどちらもデザインのスペースに関連していますが、それぞれ独自の目的を果たします。
余白は、要素の外側にあるスペースです。
コンテンツの周りにバッファを作成し、ページ上の他の要素から分離します。これにより、可読性が向上し、デザインを効果的に整理できます。
一方、パディングは、要素の内側にあるスペースを指します。
パディングは、コンテンツ（テキストや画像など）とそのコンテナ要素の端との間の「クッション」と考えることができます。これにより、コンテンツが見やすくなります。
つまり、要素の外側の端の周りにバッファゾーンが必要な場合は余白を調整し、要素内のスペースを調整する必要がある場合はパディングを確認することになります。
それでは、WordPressで余白を変更する方法を見ていきましょう。
SeedProdでWordPressの余白を変更する方法
まず、SeedProdを使用してWordPressの余白を変更する方法を見てみましょう。
SeedProdは、最高のドラッグ＆ドロップウェブサイトビルダーの1つです。そのビジュアルエディターを使用すると、サイト用のカスタムページを作成したり、コーディングなしでカスタムWordPressテーマを作成したりできます。
SeedProdのページビルダーのポイント＆クリック設定により、数回のクリックで任意の要素の余白設定を変更できます。
開始するには、SeedProdプラグインをインストールしてアクティブ化する必要があります。
これについてヘルプが必要な場合は、SeedProd Proのインストール方法に関するガイドを参照してください。インストールプロセスとライセンスキーのアクティブ化方法を説明します。
インストール後、WordPressダッシュボードからSeedProd » ランディングページに移動し、新しいランディングページを追加ボタンをクリックします。
これで、ページの開始点として使用できる既製のランディングページテンプレートのライブラリが表示されます。最初から始めたい場合は、空白のページテンプレートもあります。
テンプレートを選択したら、ページに名前を付けて、ページを保存して編集を開始ボタンをクリックします。これにより、テンプレートがSeedProdのドラッグアンドドロップページビルダーで起動します。
ページを開くと、右側にデザインのプレビュー、左側にページ要素が表示されます。いずれかの要素をクリックしてプレビューにドラッグすることで、任意の要素をページに追加できます。
さらに、プレビューの要素をクリックすると、左側のサイドバーにその設定が開きます。
いずれかの要素の「高度な設定」タブで、さらにカスタマイズオプションを確認できます。これには、要素の間隔、パディング、デバイスの表示などを調整するオプションが含まれます。
このパネルで、間隔タブをクリックして展開します。ここで、マージンフィールドにカスタム値を入力して、その要素のマージンを変更します。
マージンを変更したいすべての要素に対してこれを行います。また、WordPressでランディングページを作成する方法の詳細については、ステップバイステップガイドを参照してください。
変更に満足したら、ページを保存して公開します。
これで、ページにアクセスして新しいマージンの見た目を確認できます。
WordPressでマージンを変更する代替方法
WordPressの美しさはその汎用性にあります。何らかの理由でSeedProdを使用したくない、または使用できない場合でも、心配しないでください。
次に、WordPressサイトのマージンを変更するためのいくつかの代替方法を見ていきましょう。
WordPressブロックエディターでマージンを編集する
Gutenbergの導入以来、サイトのマージン編集がはるかに簡単になりました。コーディングの専門知識や追加のWordPressプラグインのダウンロードは不要です。
まず、WordPressダッシュボードからページ » すべてのページに移動し、マージンを変更したいページを編集します。
次に、目的のブロックをクリックして、右側のサイドバーにあるブロック設定パネルを開きます。この例では、ボタンブロックのマージンを変更します。
設定サイドバーで、アイコンをクリックしてスタイルタブに切り替えます。次に、寸法セクションで、マージンオプションをクリックしてボタンのマージンを変更します。
調整を行った後、変更を保存するために更新ボタンをクリックすることを忘れないでください。
CSSコードでWordPressのマージンを変更する
この方法では、HTMLとCSSの一般的な理解が必要です。また、WordPressテーマにコードを追加する必要があります。復習のために、WordPressにカスタムCSSを追加する方法に関するこのガイドを参照してください。
ただし、コーディングに慣れている場合は、CSSを使用するとサイトのデザインを比類のないレベルで制御できます。
要素のCSSクラスを特定する
CSSでマージンを変更する前に、コードで対象とする要素を決定する必要があります。最も簡単な方法は、ブラウザのインスペクトツールを使用することです。
まず、マージンをカスタマイズしたいページ要素を右クリックします。表示されるメニューで「検証」を選択します。これにより、ブラウザの開発者ツールパネルが開きます。
ここにウェブページのHTMLコードとページのCSSが表示されます。コード上でマウスカーソルを動かすことで、クリックした要素をハイライト表示できます。
パネルの「スタイル」セクションには、カスタムCSSで対象とするHTML要素またはCSSクラスが表示されます。
この例では、次のコードをコピーして、ピクセル単位のマージン値を変更するだけで済みます。
.wp-block-buttons>.wp-block-button {
display: inline-block;
margin: 0;
}
このガイドでは、値を100pxに変更します。
次に、このコードを空白のドキュメントまたはメモ帳に保存し、次のステップに進みます。カスタムCSSコードをウェブサイトに追加します。
サイトエディターを使用したCSSによるマージンの追加と変更
WordPressサイトエディターをサポートするブロックベースのWordPressテーマを使用している場合は、追加CSSパネルにCSSコードを追加できます。
見つけるには、外観 » エディターに移動し、サイトエディターのスタイルタブに切り替えます。次に、右側のサイドバーにある3つのドットをクリックしてその他の設定を表示し、「追加CSS」オプションをクリックします。
表示されるボックスにカスタムCSSを貼り付け、保存をクリックして変更を保存します。
ウェブサイトを表示すると、マージンの変更がすぐに反映されます。
テーマカスタマイザーを使用したCSSによるマージンの変更
サイトエディターのサポートが含まれていないクラシックWordPressテーマを使用している場合は、WordPressテーマカスタマイザーを使用してカスタムCSSを追加できます。
これを行うには、外観 » テーマに移動し、カスタマイズをクリックします。
使用しているテーマによってさまざまなオプションが表示されます。必要なオプションは、追加CSSというラベルの付いたオプションです。
カスタムCSSをボックスに貼り付けると、ライブプレビューでWordPressのマージンが変更されているのがわかります。
次に、公開ボタンをクリックして変更を保存します。
次に、WordPressデザインのヒントをもっと
WordPressでマージンを変更すると、サイトデザインを次のレベルに引き上げることができます。SeedProdを使用する場合でも、これらの代替方法のいずれかを使用する場合でも、これでその方法を習得しました。
すべての優れたデザインは優れたレイアウトから始まることを忘れないでください。そのため、レスポンシブで見た目の良いサイトデザインを実現するには、ウェブサイトのマージンを制御することが常に重要になります。
WordPressデザインのヒントについては、他のガイドも参照してください。
- WordPressでページをフル幅にする方法
- WordPressテーマのフォントを変更する方法
- WordPressでアニメーションParticle.js背景を作成する方法
- WordPressで縦型ナビゲーションバーを作成する方法
- WordPressにカスタム検索バーを追加する方法
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
