WordPressブロックエディターレスポンシブレイアウトの導入のヒント

現在、ワードプレスでウェブサイトを構築する場合、多くの人がゾーンブロックエディタ(別名Gutenberg Editor）を使ってページを編集することができる。使いやすいだけでなく、レイアウト面でも強くなっているモジュールが付属しており、特にレスポンシブデザインのサポートはかなり充実している。

この記事では、WordPress独自のブロックエディターパソコン、タブレット、携帯電話でも見栄えよく機能するページレイアウトの作り方。

グループ」と「カラム」ブロックによるインフラ構築

あるブロックエディター一般的なレスポンシブ・レイアウトは、通常 「グループ」ブロック（グループ） 歌で応える 「カラム」ブロック それを実現するために

"フォーム"ブロックは複数の要素をまとめてラップできるので、背景やスペーシングなどを簡単に均一に設定できる。そして"列"ブロックは左右、3カラム、またはそれ以上の分割カラム構造で作成でき、グラフィックコンテンツを並べて表示するのに最適です。

例えば、左右構造のモジュールを作る場合：

モバイルでは、この2つのカラムは追加処理なしで自動的に上下の構造になり、とても便利だ。

ブロックエディターには、各ブロックに関連するスタイル設定があり、これらのパラメーターを調整することを学ぶことで、レイアウトをより柔軟にすることができる。

幅の設定Content Width"、"Wide"、"Full Width "などのモードを選択できます。背景色を画面全体に広げたい場合は、「全幅」を使用します。
スペーシング: 「ブロック・スペーシング」と「インナー・マージン」を使うことで、要素と要素の間に十分な余白ができ、ページが見やすくなる。
アレンジメントグループブロック内のコンテンツは、縦または横に並べることができ、コンテンツは中央揃え、左揃え、右揃えなど、さまざまな表示ニーズに合わせることができます。

これらの設定は、ビジュアルに影響を与えるだけでなく、コンテンツを異なるスクリーンにうまく適応させることもできる。

パソコンではより多くのコンテンツを表示したいが、携帯電話では適さない場合がある。ブロックエディタのテーマによっては、「モバイルまたはデスクトップでブロックを隠す」機能をサポートしており、柔軟に対応できます。

例えば、こうだ：

条件を表示する」機能をサポートしているテーマやプラグインを使用している場合、たとえば次のようになります。ケイデンスもしかしたらブロックの生成また、より細かいコントロールを可能にするプラグインもある。

エディターが完成したら、必ず実機で結果を確認してください。エディタで異なるデバイスをプレビューすることは可能ですが、実機での結果の方が問題をより反映します。

携帯電話、タブレット端末、または異なるサイズのブラウザウィンドウを開いてページを確認することをお勧めします：

ページにテーブル、イメージギャラリー、動画がある場合、小さな画面でのコンテンツのオーバーフローを避けるため、ブロックが提供する「Adaptive」設定を使用することをお勧めします。

WordPressのブロックエディターで行うレスポンシブ・ウェブページ重要なのは、グループ、カラム、スペーシング、整列、非表示をうまく使うことだ。構造さえしっかりしていれば、コードを書かなくても、携帯電話でもタブレットでも、ページは自然に調整される。

多くの人は、レスポンシブを行うためには高度なプラグインやビジュアライゼーションツールを使用する必要があると考えているが、WordPressにはエディタが付属しており、使い慣れたエディタさえあれば、美しく実用的なウェブページを作ることもできる。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み