WordPressでブロックのサイズを変更する方法

WordPress5.0で正式に導入されたGutenbergBlock Editorは、ユーザーにWordPressのコンテンツとサイトを完全にカスタマイズする機会を提供します。 TinyMCEクラシックエディターのようなWYSIWYGツールで作成する必要性に制約されなくなったグーテンベルクは、投稿またはページのコンテンツの各要素に個別のブロックを提供します。 特定の各ブロックの設定を制御することで、ユーザーはWordPressコンテンツをこれまでになく簡単にデザインできます。 また、デザインを目立たせる最も簡単な方法の1つは、デフォルト設定を超えることです。 そこで、WordPressでブロックのサイズを変更して、箱の外で考え（そして設計）できるようにする方法を見ていきます。

ブロックエディタでのほとんどのサイズ変更は、ブロックの応答性のため、サイトのコンテンツ領域に制限されています。 ページのコンテンツ領域を全幅に設定している場合は、その領域内で作業します。 たとえば、投稿コンテンツ領域を580pxまたは1200pxに設定している場合は、そこで作業します。 WordPressでブロックのサイズを変更する方法を教えるために使用している方法はすべて、特定のブロックのコンテナーの境界内にとどまるという考えに基づいています。

エディタでブロックのサイズを変更する方法

すべてではありませんが、一部のブロックにはサイズ変更オプションが組み込まれています。 これらは明らかな理由でサイズ変更するのが最も簡単なものです。 ただし、ブロックに応じて、サイズ変更オプションはさまざまな場所にあります。

例1：画像ブロック

ブロックをクリックするとコンテキストメニューが表示され、ここでのサイズ変更オプションは実際には間隔オプションです。 ただし、幅が広く、幅が全幅に配置されると、画像ブロックのサイズがコンテナの幅（幅広）またはページ全体の幅（全幅）に変更されます。

右側のサイドバーのブロック設定を使用して、画像ブロックのサイズを変更することもできます。 適切な名前の[画像サイズ]セクションには、ブロックのサイズを変更できるいくつかの選択肢があります。

WordPressには、すばやくサイズを変更するためのドロップダウンがあり、サムネイル、ミディアム、ラージ、フルサイズからプリセットを選択できます。 フルサイズの選択は、実際に完全に表示されるか、コンテンツ領域に収まるかによって、テーマによって異なります。

幅と高さをピクセル単位で具体的に調整することもできます。 その下にはパーセンテージで調整できます。 パーセンテージは、幅フィールドと高さフィールドの数値に基づいています。 ドロップダウンメニューから選択したプリセット画像サイズではありません。

そして最後に、画像自体をクリックして、白い円形のアンカーが付いた青い境界線を表示できます。 これらをドラッグして、ブロックのサイズを変更できます。

アンカーのいずれかをクリックしてドラッグするだけで、画像を拡大縮小できます。 そうすることで、ブロック設定メニューの高さと幅のフィールドのサイズが調整されます。

例2：イベントブロック

イベントブロックの場合、サイズ変更の設定は、エディター自体のコンテキストメニューにのみあります。 （イベントブロックは、インストールするAutomatticによる別個のプラグインであり、Gutenbergコアエディターの一部ではありません。）

一部の画像ブロックオプションと同様に、ここでのサイズ変更オプションは技術的には間隔オプションです。 ただし、2つのオプションは[中央揃え]と[幅広]です。 コンテナの中央に配置するか、画面全体の幅にするかを選択できます。

エディター自体でブロックの高さを調整するのはちょっとハックですが、機能します。 空のブロックフィールドでEnter / Returnキーを押すだけで、余分な空の段落ブロックを挿入して高さを拡張できます。

これは理想的とは言えない解決策です。 ただし、特にイベントブロックに実際の高さ調整オプションがない場合は、高速でピンチで機能します。

例3＃：WordPressで列を使用してブロックのサイズを変更する

サイズ変更が必要なブロックの設定パネルまたはコンテキストメニューにサイズ変更オプションがない場合は、ブロックエディターの列を使用してブロックのサイズを変更することもできます。 +ボタンのいずれかを押してColumnsブロックを検索するだけで、新しいブロックを追加できます。

Columnブロック内で、必要な他のブロックを追加できます。 検索オプションには、ブロックエディタのパターンも表示されます。 これらは、コンテンツが既にサイズ設定および配置されている状態で投稿またはページに挿入できるテンプレートであり、コンテンツがプレースホルダーに置き換わるのを待ちます。

最初から、Columnsブロックでは、列自体のサイズを選択できます。 これは6つの異なる方向に分割され、それぞれが個々の列に使用されるページの割合が異なります。

使用できる構成はこれらだけではありません。 ブロック内の青い+ボタンを使用して、いつでも新しい列を追加できます。 個々の列には独自の設定パネルがあり、列の幅だけをパーセンテージで調整できます。

デザインに適したサイズを取得するには、ある程度の実験が必要になる場合があります。 ただし、終了すると、フロントページに適切に設計された適切な間隔のコンテンツを表示できます。 ブロックエディタにある空の列は、フロントエンドでも空として表示されることに注意してください。

さまざまな列の幅、配置、および数を調整することにより、ブロックのサイズを変更したり、ほぼすべての方法で配置したりできます。

より多くのサイズ設定オプションが必要ですか？ より高度なページビルダーを検討してください

ブロックのサイズを変更するこれらの方法のいくつかは、制限を感じる可能性があることを認識しています。 制限が多すぎる場合は、より高度なページビルダーを検討する時期かもしれません。

たとえば、独自のDiviには、モジュール（ブロック）ごとにサイズ設定と変換のオプションがあり、グーテンベルクで可能であるよりもはるかに優れた形状、サイズ、間隔の制御が可能です。 ほとんどの高度なページビルダーもそうです。そのため、グーテンベルクのオプションが制限されすぎていることに気付いた場合は、Diviのようなものをチェックすることが次の最良のステップかもしれません。

CSSを使用してWordPressでブロックのサイズを変更する方法

各ブロックには、 [詳細設定]の下の[設定]パネルにCSSセクションがあります。 他のブロック固有の詳細設定に加えて、それぞれに追加のCSSクラスのフィールドがあります。 サイトに既に存在する場合でも、このブロック専用に作成する場合でも、この個々のブロックに必要なセレクターを割り当てることができます。

通常、個々のブロックにクラスの代わりにCSS IDを使用することをお勧めしますが、これはブロックエディターではサポートされていません（少なくともデフォルトでは）。 したがって、IDではなく、複数のクラスを使用して個々のブロックに対応する必要があります。 クラスは実際には要素タイプの大きなカテゴリをカバーすることを目的としていますが、IDは個々の要素を対象としています。 この場合、明確な命名規則を使用して、コード内で物事をまっすぐに保つことをお勧めします。

とにかく、テキストフィールドにクラスを入力するだけです。 このフィールドのクラス名の前にピリオド/ドットを含めないでください。

次に、[外観] – [カスタマイズ]に移動して、一番下にある[追加のCSS]セクションを見つけます。 CSSコードを作成または貼り付けて、ブロックのサイズを好みに合わせて変更します。

絶対値であるため、ピクセル（px）単位の測定値の使用は避けることをお勧めします。 できれば、 vw （ビューポートの幅） 、vh （ビューポートの高さ）、または％ （パーセンテージ）のいずれかを使用してブロックを調整します。 これらはそれぞれ、デバイスやその周辺の他のコンテンツを参照してスケーリングされます。

.block-1 {
	height:35vh;
	max-height:50vh;
}

.block-2 {
	width: 100vw;
}

.block-3 {
	max-width:80vw;
}

％とvw / vhも同様に機能しますが、異なることに注意してください。 それらはすべてパーセンテージで機能しますが、それらは異なるアンカーに関連しています。

パーセンテージの測定は、要素が保持されているコンテナに関連しています。 したがって、要素が配置されているセクションまたは行が画面の端に移動しない場合、 width：100％を設定しても境界に到達しません。

ただし、 vh / vwを使用すると、サイトの要素ではなく、デバイス自体のビューポートに関連するためです。 height：80vhを使用すると、モバイルデバイス、デスクトップ、タブレットのいずれに表示されているかに関係なく、このブロックが画面の高さの80％を占めるようにすることができます。

結論

WordPressのブロックエディターは、以前は利用できなかった（つまり、エディター自体の中で）膨大な数のカスタマイズオプションをユーザーに提供します。 WordPressでブロックのサイズを変更する方法を知ることは、ブロックエディターを最大限に活用できるようにするために不可欠です。 そして現在、フルサイト編集がレパートリーに含まれているため、これは時間の経過とともにさらに役立つスキルの1つです。

WordPressでブロックのサイズを変更することについて共有できるヒントとコツは何ですか？

3rieart /shutterstock.comによる記事特集画像