(CJP) WordPressブロック間の空き領域を追加または削除しますか？
WordPressブロック間に空きスペースを追加または削除すると、WordPressサイトのデザインをより細かく制御できます。
この記事では、WordPressブロック間のスペースを追加または削除する方法を段階的に説明します。
WordPressブロックの間にスペースを追加または削除するのはなぜですか？
WordPressを使用すると、組み込みのWordPressブロックエディターを使用してカスタムページや投稿を簡単に作成できます。
ただし、特定のブロックを追加すると、ギャップが多すぎたり少なすぎたりすることに気付く場合があります。 WordPressブロック間の空きスペースを追加または削除することで、カスタムページレイアウトを希望どおりに作成できます。
最終的なWordPressWebサイトのデザインをより細かく制御することで、訪問者により良いユーザーエクスペリエンスを提供できます。
そうは言っても、WebサイトのWordPressブロック間のスペースを追加または削除する方法を見てみましょう。 以下のクイックリンクを使用して、使用する方法に直接ジャンプしてください。
- WordPressブロックエディターで空き容量を追加
- WordPressにコードを追加して、空き領域を追加または削除します
- CSSHeroで空き領域を追加または削除します
- SeedProdを使用して空き領域を追加または削除します
方法1.ブロックエディターを使用してWordPressブロック間にスペースを追加する
ブロック間にスペースを追加する最も簡単な方法は、WordPressブロックエディターを使用することです。 数回クリックするだけでスペースを追加できる組み込みのギャップブロックがあります。
これを使用するには、編集する投稿またはページを開き、[追加]ブロックボタンをクリックします。
次に、「スペーサー」を検索してブロックを選択します。
これにより、ページにパディングが自動的に挿入されます。
ブロックを上下にドラッグすると、大きくしたり小さくしたりできます。
完了したら、[更新]ボタンをクリックして変更を保存します。
この方法では、ブロック間にスペースを追加することしかできません。 スペースを空けるには、以下の他の方法のいずれかを使用する必要があります。
方法2.カスタムCSSを追加して、WordPressブロック間のスペースを追加または削除します
ブロック間に空のスペースを追加および削除する別の方法は、カスタムCSSコードをテーマに追加することです。
これまでにこれを行ったことがない場合は、開始する前に、WordPressサイトにカスタムCSSを簡単に追加する方法に関するガイドを確認することをお勧めします。
次に、編集するページまたは投稿を開き、スペースを追加または削除するブロックをクリックします。
次に、右側のオプションパネルの[ブロック]メニュー項目をクリックします。
次に、[詳細設定]ドロップダウンメニューまで下にスクロールしてクリックします。 これにより、そのブロックの追加オプションのセットが表示されます。
次に、[追加のCSSクラス]ボックスに次のコードを追加します。
このスニペットは、そのブロック専用の新しいCSSクラスを作成します。
次に、[更新]ボタンをクリックして変更を保存します。
次に、に移動します インターフェース»カスタマイズ WordPressテーマカスタマイザーを表示します。
次に、下にスクロールして、[追加のCSS]メニューオプションをクリックします。
これにより、CSSコードを追加できるフィールドが表示されます。
次に、次のコードをボックスに貼り付けます。
.add-remove-bottom-space
margin-bottom: 0;
このスニペットは下マージンをゼロに設定し、ブロックからスペースを削除します。 下部にもっとスペースが必要な場合は、「0」を「20px」に変更します。
変更を加えたら、必ず[公開]ボタンをクリックして変更をコミットしてください。
プラグインでカスタムCSSコードを保存する
WordPressテーマカスタマイザーにカスタムCSSを追加すると、現在使用しているテーマのみが保存されます。 WordPressテーマを変更する場合は、CSSコードを新しいテーマにコピーする必要があります。
使用しているテーマに関係なくカスタムCSSを適用する場合は、SimpleCustomCSSプラグインを使用する必要があります。
最初に行う必要があるのは、プラグインをインストールしてアクティブ化することです。 詳細については、WordPressプラグインのインストール方法に関するガイドをご覧ください。
有効になったら、 外観»カスタムCSS カスタムCSSコードを追加します。
完了したら、[カスタムCSSの更新]ボタンをクリックして変更を保存します。
方法3.CSSHeroを使用してWordPressブロック間のスペースを追加または削除します
- WordPressブロック間のスペースを追加または削除するもう1つの初心者向けの方法は、
- WordPressカスタムCSSプラグインを使用することです。 これにより、CSSコードを編集せずに
- WordPressブログに視覚的な変更を加えることができます。
CSSHeroプラグインの使用をお勧めします。 これにより、コードを1行も記述せずに、WordPressサイトのほぼすべてのCSSスタイルを編集できます。
最初に行う必要があるのは、プラグインをインストールしてアクティブ化することです。 詳細については、WordPressプラグインのインストール方法に関するビギナーズガイドを参照してください。
アクティベーション時に、[製品のアクティベーションに進む]ボタンをクリックしてプラグインをアクティベートする必要があります。 インストールされているプラグインのリストのすぐ上にボタンがあります。
これにより、ユーザー名とパスワードを入力する必要がある画面が表示されます。 次に、画面の指示に従います。アカウントが確認されると、ダッシュボードにリダイレクトされます。
次に、編集するページまたは投稿を開き、WordPress管理ツールバーの上部にある[CSSHero]ボタンをクリックする必要があります。
これにより、CSSHeroが実行されている同じページが開きます。 プラグインはビジュアルエディターを使用しているため、リアルタイムで変更を加えることができます。
ページ上の任意の要素をクリックすると、ページの左側にツールバーが表示され、カスタマイズを行うことができます。
ブロック間のスペースを削除または追加するには、[間隔]オプションをクリックしてから、[マージン-下部]セクションまでスクロールします。
ここで、スライダーを上下に動かして、空き領域を追加または削除できます。
行った変更はすべて、ページに自動的に表示されます。
変更が完了したら、[保存]ボタンをクリックして変更を加える必要があります。
方法4.SeedProdを使用してWordPressブロック間のスペースを追加または削除します
SeedProdは、100万を超えるWebサイトで使用されている最高のドラッグアンドドロップページビルダーです。
150を超えるテンプレートのライブラリを使用して、カスタム404ページ、販売ページ、ランディングページなどを作成できます。 SeedProdを使用して、コードを記述せずにカスタムWordPressテーマを作成することもできます。
ドラッグアンドドロップビルダーを使用すると、Webサイトのデザインを完全に制御でき、任意のWebサイト要素の間隔を簡単に削除または追加できます。
詳細については、WordPressでカスタムページを作成する方法に関するガイドをご覧ください。
ページをカスタマイズするときは、Spacingブロックを使用してどこにでもスペースを追加できます。
ブロック間にスペースを追加するページ上の任意の場所にドラッグアンドドロップするだけです。
次に、スライダーを使用して高さを調整できます。
ブロック間の距離を制御することもできます。 これを行うには、スペースを追加または削除するブロックをクリックするだけです。
これにより、左側にオプションパネルが表示されます。 次に、[詳細設定]タブをクリックします。
次に、[間隔]ドロップダウンメニューまで下にスクロールしてクリックします。
これにより、「マージン」を制御できるメニューが表示されます。 下の余白ボックスに数字を入力してスペースを追加するか、数字を削除して既存のスペースを削除します。
変更が完了したら、[保存]ボタンをクリックし、[公開]ドロップダウンを選択して変更を加えます。
この記事が、WordPressブロック間のスペースを追加または削除する方法を学ぶのに役立つことを願っています。 また、独自のポッドキャストを開始する方法に関するガイドと、比較した最高の無料Webサイトホスティングの専門家による選択を確認することもできます。