カラムのレスポンシブ化？
-
スプレッドシート(＝ス○)とGoogleフォーム(＝グ○)を埋め込んで、カラムを使って3つづつ
ス1 ス2 ス3
グ1 グ2 グ3
ス4 ス5 ス6
グ4 グ5 グ6
と表示しています。
ページを小さくしたとき
ス1 ス2
グ1 グ2
ス3
グ3
ス4 ス5
グ4 グ5
ス6
グ6
と表示されてしまうのですが、これを
ス1 ス2
グ1 グ2
ス3 ス4
グ3 グ4
ス5 ス6
グ5 グ6
と2つずつ表示されるようにしたいです。 -
お問い合わせいただいているサイトあるいはページのURLを教えていただけますか？
一般に、カラムブロックは左から右に順に情報を表示させ、おっしゃるような変更はできません。デバイス幅に応じてコンテンツの表示方法を変更できるブロックとして Layout Grid Block (英語) というものがございますが、外部のスプレッドシートから情報を埋め込んでいるとおっしゃっていますので、今回はこの方法が利用できない可能性もあります。一度そちらもお試しいただけますでしょうか？
よろしくお願いいたします。
-
下書き段階なのでhtmlを
『<!– wp:heading {“level”:5} –>
<h5>見出し</h5>
<!– /wp:heading –><!– wp:columns {“align”:”wide”} –>
<div class=”wp-block-columns alignwide”><!– wp:column –>
<div class=”wp-block-column”>スプレッドシートのグラフGoogleフォーム</div>
<!– /wp:column –><!– wp:column –>
<div class=”wp-block-column”>スプレッドシートのグラフGoogleフォーム</div>
<!– /wp:column –><!– wp:column –>
<div class=”wp-block-column”>スプレッドシートのグラフGoogleフォーム</div>
<!– /wp:column –></div>
<!– /wp:columns –><!– wp:columns {“align”:”wide”} –>
<div class=”wp-block-columns alignwide”><!– wp:column –>
<div class=”wp-block-column”>スプレッドシートのグラフGoogleフォーム</div>
<!– /wp:column –><!– wp:column –>
<div class=”wp-block-column”>スプレッドシートのグラフGoogleフォーム</div>
<!– /wp:column –><!– wp:column –>
<div class=”wp-block-column”><!– 空白 –>
</div>
<!– /wp:column –></div>
<!– /wp:columns –>』 -
ご連絡ありがとうございます。今回ご希望のレイアウトは、テーマそのものの編集が必要となるため、ビジネスプランへのアップグレード、並びにご自身で作成されたコードが必要となります。
代替策としまして、大きい画面でも2列のみ表示させるようにするのはいかがでしょうか？
今後ともよろしくお願いいたします。
-
-
PCで広い画面で表示されている時は横3列。PCの画面を狭くしたときや、タブレットでは2列。スマホでは一列と、それぞれ振り分けたレイアウトを作るのも手段です。わたしはそれのほうが、作業工程は簡易になっています。取りまとめて作業をするのは、PCではいいけど、スマホでは使えないタグなど、不便ですからね。
- トピック「カラムのレスポンシブ化？」には新しい返信をつけることはできません。
WordPress.com 日本語フォーラム 