WordPressでブロックの高さと幅を変更する方法

WordPressブロックを正確なサイズにするには、カスタムCSSや複雑な回避策が必要でした。

私たちは、この全く同じ問題で何時間もユーザーを支援してきたため、そのことを知っています。しかし、最近のWordPressのアップデートのおかげで、ブロックの寸法を制御することがずっと簡単になりました。

多くの人が驚くのは、WordPressにはブロックサイズを調整するための組み込みの方法が実際にはいくつかあるということです。多くの実験を経て、さまざまな状況やテーマで機能する最も信頼性の高い方法を特定しました。

このガイドでは、WordPressでブロックの高さと幅を変更する最も簡単な方法を共有します。

WordPressでブロックの高さと幅を変更する理由

WordPressのブロックエディターはコンテンツの追加を容易にしますが、デフォルトのブロックサイズが常に思い通りのデザインに合うとは限りません。ブロックの高さと幅を調整することは、ページの見た目をより細かく制御するための簡単な方法です。

ブロックのサイズを変更したい主な理由をいくつかご紹介します。

• 視覚的なレイアウトの改善：要素の正確なサイズを制御することで、よりバランスの取れたプロフェッショナルなデザインを作成できます。
• 可読性の向上：特にワイドスクリーンでは、テキストブロックの幅を調整することでコンテンツが読みやすくなります。
• レスポンシブ対応を確保する: ブロックを正しくサイズ設定することで、デスクトップからスマートフォンまで、すべてのデバイスでコンテンツがすばらしく表示されるようになります。
• 強調の作成：ブロックを大きくしたり小さくしたりすることで、重要な行動喚起やキー情報に注意を引くことができます。

WordPressブロックのサイジングを理解する

方法に入る前に、WordPressでブロックの寸法を定義できるさまざまな方法を理解しておくと役立ちます。

用語	その意味	いつ使用するか
ピクセル（px）	画面サイズに関係なく、サイズが変わらない固定単位です。	どこでもまったく同じサイズにしたい場合は、ピクセルを使用してください。
パーセント（%）	親コンテナに基づいて調整される柔軟な単位です。	すべての画面サイズで見栄えを良くするには、パーセントを使用してください。
幅広	ブロックをコンテンツエリアよりも広くしますが、全画面にはしないWordPressの配置です。	ページ全体に引き伸ばすことなくセクションを際立たせるために、これを使用してください。
フル幅	ブロックを画面の端から端まで引き伸ばすWordPressの配置です。	ヒーローセクション、バナー、または大きな背景画像にこれを試してください。
最小高さ	ブロックが持つことができる最小の高さを設定しますが、必要に応じて成長することもできます。	セクション（カバーブロックなど）を一貫した高さに保ちたい場合は、これを選択してください。

では、WordPressでブロックの高さと幅を簡単に変更する方法を見てみましょう。

いくつかの異なる方法を説明します。下のクイックリンクを使用して、使用したい方法にジャンプできます。

方法1：ブロック設定を使用してブロックの高さを変更する

この方法では、WordPressのデフォルト設定を使用してブロックの高さと幅を変更する方法を説明します。

WordPressはすべてのブロックにまったく同じリサイズオプションを提供しているわけではありませんが、ブロックエディターはさまざまなブロックの高さと幅を調整するためのいくつかの強力な方法を提供します。

WordPressの画像ブロックから始めましょう。

画像ブロックの場合、配置オプションを使用して幅を調整できます。ブロックの上にあるツールバーの「配置」ボタンをクリックします。

「ワイド幅」を選択すると画像がコンテンツエリアの大部分を占めるようになり、「全幅」を選択するとページ全体に引き伸ばされます。

右側の「ブロック設定」パネルに移動して、画像の表示サイズを調整することもできます。

「設定」セクションで、「画像サイズ」ドロップダウンメニューを使用して、サムネイル、中、大、またはフルサイズなどのプリセットオプションから選択します。

これにより、画像の寸法が選択したプリセットに合わせて変更されます。

「画像寸法」セクションの「幅」と「高さ」ボックスに目的のピクセルサイズを入力して、ブロックの幅と高さを調整することもできます。

その下で、ブロックのサイズをパーセンテージで調整することもできます。

画像ブロックのサイズを変更する別の方法は、画像自体をクリックすることです。これにより、円形のアンカーが付いた青い境界線が表示されます。

次に、これらのアンカーをドラッグして画像ブロックの高さと幅を変更します。

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

方法2：カラムブロックを使用してブロックの幅を変更する

段落ブロックのように、リサイズしたいブロックに組み込みのサイズコントロールがない場合は、この方法を使用します。これは、ブロックを制御可能なコンテナ内に配置する回避策として機能します。

この方法では、ブロックをカラムブロック内に配置します。これは、各カラムに異なるブロックを追加できるコンテナです。

次に、カラムの幅を調整することで、内部のブロックの幅を主に制御できます。カラムの高さは、コンテンツに合わせて自動的に調整されます。

まず、画面左上の「ブロックを追加」（+）ボタンをクリックします。

ここから、Columnsブロックを見つけてGutenbergエディターに追加します。次に、バリエーションを選択するように求められます。

その後、画面にカラムレイアウトが表示され、カラム内の「ブロックを追加（+）」ボタンをクリックして、目的のブロックを追加できるようになります。

ブロックが追加されたら、そのブロックが含まれているカラムを調整することで、幅を制御できます。

カラムを選択するだけで、右側のブロック設定パネルの「設定」セクションで、カラムの幅を変更できます。これにより、その中のブロックのサイズが変更されます。

完了したら、「公開」ボタンをクリックするだけで変更が保存されます。

これは、2列ブロック内に2つの段落ブロックをリサイズおよび配置した後、デモウェブサイトでコンテンツがどのように表示されたかです。

方法3：グループブロックを使用してブロックの高さと幅を変更する

グループブロックは、複数のブロックを整理し、レイアウトと間隔を管理するのに優れています。内部の個々のブロックの高さと幅を直接設定しませんが、グループ全体の寸法とコンテンツの配置方法を制御できます。

まず、「ブロックを追加（+）」ボタンを一番上にクリックする必要があります。次に、グループブロックを見つけてコンテンツエディターに追加します。

追加すると、グループブロックには「グループ」、「行」、「スタック」などのレイアウトオプションが表示されます。このチュートリアルでは、デフォルトの「グループ」レイアウトを使用します。

その後、画面に「ブロックを追加」ボタンが表示されます。これで、好きなブロックを追加できます。

このチュートリアルでは、見出しブロック、段落ブロック、画像ブロックを追加してリサイズします。

グループに複数のブロックを追加するには、ブロックツールバーの「グループを選択」ボタンをクリックします。

グループが選択されたら、下部にある「ブロックを追加」ボタン（+）をクリックするだけです。

これを行うと、右側のブロック設定サイドバーが開きます。ここから、すべてのブロックのレイアウト、配置、および向きを簡単に調整できます。

これらのレイアウト設定を調整すると、ブロックの配置方法と、グループ内で占めるスペースの量に影響します。結果に満足するまで、これらの設定を構成できます。

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

グループブロックがデモウェブサイトでどのように表示されたかです。

方法4：カバーブロックを使用してブロックの高さを変更する

このリサイズ方法は、カバーブロックを使用してセクションに特定の最小高さを設定したい場合に適しています。テキストやその他のコンテンツを上に配置した、全幅バナーやヒーロー画像を作成するのに理想的です。

まず、一番上の「ブロックを追加（+）」ボタンをクリックして、カバーブロックを見つけます。

それが完了したら、WordPressメディアライブラリから色を選択するか画像ファイルをアップロードするように求められます。この画像または色は、カバーブロックの背景として使用されます。

次に、Coverブロックに任意のブロックをドラッグアンドドロップします。

その後、右側のカラムでカバーブロックの設定を開くために、カバーブロックをクリックする必要があります。

ここから下にスクロールして「寸法」パネルに移動し、ピクセルを使用してカバーブロックの高さを調整できます。

最後に、「変更を保存」ボタンをクリックして設定を保存することを忘れないでください。

カバーブロックの使用方法に関する詳細な手順については、WordPressブロックエディターにおけるカバー画像とアイキャッチ画像の違いに関する初心者向けガイドをご覧ください。

ボーナス：SeedProdの高度なブロックを使用して美しいページを作成する

SeedProdプラグインを使用すると、美しく見た目の良いページを簡単に作成できます。

これは市場で最高のWordPressページビルダーであり、ブロックを使用してランディングページを作成できます。ブロックは非常にカスタマイズやサイズ変更が簡単で、ニーズに合わせて調整できます。

当社の提携ブランドのいくつかは、このツールを使用してウェブサイト全体をデザインしており、そのユーザーは新鮮でモダンなルックスを気に入っています。詳細については、SeedProdレビューをご覧ください。

ステップ1：SeedProdのインストールと有効化

まず、SeedProdプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するガイドをお読みください。

有効化したら、WordPressダッシュボードからSeedProd »設定ページに移動し、「ライセンスキー」ボックスにライセンスキーを入力する必要があります。

ライセンスキーは、SeedProdウェブサイトのアカウントページで見つけることができます。

ステップ 2：新しいランディングページの作成

次に、管理サイドバーから SeedProd » ランディングページ画面にアクセスして、ランディングページを作成します。

ここから、「新しいランディングページを追加」ボタンをクリックするだけです。

次に、「新しいページテンプレートを選択」画面に移動します。SeedProdには、選択できる多くの既製のテンプレートが用意されています。

テンプレートを選択した後、ランディングページの名前と URL を入力するように求められます。

これらの詳細を追加したら、「保存してページ編集を開始」ボタンをクリックして続行します。

ステップ3：画像ブロックの寸法を変更する

これにより、SeedProdのドラッグアンドドロップページビルダーが起動し、ページ編集を開始できます。詳細な手順については、WordPressでランディングページを作成する方法に関するガイドをご覧ください。

このチュートリアルでは、ImageブロックとButtonブロックを追加してリサイズします。

まず、左側のブロックパネルから画像ブロックをドラッグし、ページ上の好きな場所にドロップします。

次に、画像ブロックをクリックして、左側の列にあるブロック設定を開きます。ここから、メディアライブラリから画像をアップロードできます。

次に、ピクセルまたはパーセンテージを使用してブロックの高さと幅を変更できます。

設定パネルの上部にある「詳細」タブに切り替えることで、画像ブロックの周りの間隔とブロック内の間隔を微調整することもできます。

次に、「間隔」パネルをクリックして設定を展開します。

ここでは、必要に応じて、ブロックのマージン（ブロックの外側のスペース）とパディング（ブロックの内側のスペース）を調整する値を入力できます。

ブロックの上部、下部、左側、右側の領域の余白とパディングを調整できます。

ステップ4：スペーサーブロックの高さを調整する

Seedprodを使用すると、2つの異なるブロックの間にスペーサーブロックを追加して、スペースを設けることもできます。

まず、左側のカラムから「スペーサー」ブロックを見つけて追加する必要があります。次に、それをクリックして設定を開きます。

ここで、「高さ」スライダーを使用してスペーサーの高さを制御できます。

スペーサーブロックは、整理されたウェブサイトを作成するのに役立ちます。

ステップ5：ボタンブロックのパディングを設定する

同様に、ビデオ、見出し、ボタンブロックなど、他のブロックの幅と高さを変更することもできます。

左側のカラムでボタンブロックを見つけて、ページにドラッグするだけです。

次に、ボタンをクリックしてブロック設定を開く必要があります。

ここから、上部にある「詳細」タブに切り替えます。「垂直パディング」スライダーをドラッグすると、ボタンテキストの上部と下部にスペースが追加され、ボタンの垂直サイズを大きくできます。

水平サイズを大きくするには、「水平パディング」スライダーをドラッグして、テキストの左側と右側にスペースを追加します。

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

ブロックの幅と高さを変更することに関するよくある質問

WordPressでブロックの幅と高さを変更することについて、読者からよく寄せられる質問をいくつかご紹介します。

WordPressでブロックのサイズを縮小するにはどうすればよいですか？

WordPressでブロックのサイズを縮小するには、ブロック設定で幅、パディング、またはフォントサイズを調整します。ブロックを選択し、適切なサイズになるまで寸法または間隔を小さくすることから始めます。

WordPressでテキストブロックのサイズを変更するにはどうすればよいですか？

WordPressでテキストブロックのサイズを変更するには、[タイポグラフィ]設定で[フォントサイズ]を変更します。テキストがまだ大きすぎると感じる場合は、行の高さや間隔を調整することもできます。

WordPressでブロックの間隔を調整するにはどうすればよいですか？

WordPressでブロックの間隔を調整するには、マージンとパディングの設定を編集します。ブロック内のスペースが多すぎる場合は、まずパディングを減らすことをお勧めします。

WordPressでウェブサイトのページサイズを変更するにはどうすればよいですか？

WordPressでウェブサイトのページサイズを変更するには、テーマまたはページビルダーのレイアウト設定を変更します。目的のデザインに応じて、ボックスレイアウトとフル幅レイアウトを切り替えることができます。

WordPressでウェブサイトのサイズを縮小するにはどうすればよいですか？

WordPressでウェブサイトのサイズを縮小するには、フォントサイズ、スペーシング、コンテナの幅を小さくします。一度にすべてを変更するのではなく、まずさまざまな要素に小さな調整を加えることから始めます。

この記事がWordPressでブロックの幅と高さを変更する方法を学ぶのに役立ったことを願っています。また、WordPressブロックエディターで画像を追加および配置する方法に関する記事や、GutenbergフレンドリーなWordPressテーマのトップピックもご覧ください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。