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

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

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

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

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

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

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

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

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

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

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

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

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

現在、WordPressではすべてのブロックに同じリサイズオプションが提供されているわけではありません。しかし、ブロックエディターは、さまざまなブロックの高さを変更するための多くの方法を提供しています。

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

まず、ブロックの上にあるツールバーの「配置」ボタンをクリックして、画像ブロックの配置を変更できます。

ここで、「ワイド幅」オプションを選択すると、ブロックはコンテナと同じ幅になります。または、「フル幅」のアライメントオプションを選択すると、ブロックはページ全体の幅になります。

右側の「ブロック設定」パネルに移動し、「設定」セクションまでスクロールダウンすることでもブロックをリサイズできます。ここから、「画像サイズ」ドロップダウンメニューでブロックをリサイズできます。

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

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

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

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

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

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

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

この方法では、ブロックをカラムブロック内に配置します。これは、各カラムに異なるブロックを追加できるコンテナです。その後、カラムの高さを調整することで、それらのブロックのサイズを変更できます。

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

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

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

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

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

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

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

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

グループブロックを使用して、ブロックの幅と高さを調整することもできます。これにより、目的のブロックをグループ化して一緒にスタイル設定できます。

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

これを行うと、グループブロックに 3 つの異なるレイアウト オプションが表示されます。このチュートリアルでは、「グループ」レイアウトを使用します。

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

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

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

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

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

レイアウトを変更すると、さまざまなブロックのサイズも変更されます。結果に満足するまでこれらの設定を構成できます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

設定パネルの上部にある「詳細」タブに切り替えることで、画像サイズと位置を調整することもできます。

次に、スペーシングパネルをクリックして設定を展開します。

ここでは、ニーズに合わせてブロックのマージンとパディングを調整する値を簡単に追加します。

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

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

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

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

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

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

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

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

ここから、上部にある「高度な設定」タブに切り替えます。「垂直パディング」スライダーをドラッグして、ブロックの高さを変更できます。

幅を変更するには、左側の列にある「水平パディング」スライダーをドラッグします。

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

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

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