マルチカラム

マルチカラムブロックがあるが、カラム間のコンテンツの高さを自動的に調整するには、CSSのcolumnsを使いたい。が、そのようなブロックは存在しない。通常の段落ブロックで暮らすなどを指定することでマルチカラムとして扱うことはできないか。この下にワードプレスのカラムブロックを挿入してみる。
色々と試してみた結果として、高度な設定でクラスを a5columns と指定することでマルチカラムとして扱われるよう、スタイルを設定した。
段落(p)に指定した時は、段落が、グループ化したDIVに指定した時は、その中のインナーDIVがマルチカラムとして扱われるようにした。列数は、基本2列とし、メディアクエリーで、1列又は3列になるようにした。

やはり、左側のカラムの中にテキストを追加していっても、右側のカラムの中に流れることは無い。これは、こういうものと諦めるしか無いのか。この段落を「HTMLとして編集」し、スタイルでcolumnsを指定すると、「変なものが含まれている」というようなエラーになってしまう。

<p style="columns:2">コードブロックで段落を作成し、スタイルタグを追加してみる。が、何も起こらない。そのままコードとして表示されているだけ。タグは、スペシャルキャラクターとして記号化されている。</p>

カスタムHTMLブロックとして作成してみる。プレビューするとビジュアルが確認できるが、ビジュアルなままでの編集はできない。columns:3をスタイルで指定してみた。プレビューすると、確かにマルチカラムになっているものの、そのままの状態では編集できない。htmlの状態に戻して編集することになる。ただし、各列の高さなどは自動的に調整してくるなどの利点はある。

見出し、レベル3の見出し

通常の段落、最初の段落。見出しと複数の段落を囲んでグループ化し、カラムズクラスをセットする。

ここが二番目の通常の段落。外側のDIVだけにクラスを指定した筈なのに、なぜかマルチカラムになっている。

三番目の通常の段落。

グループブロックを直接選択することができる。そのままでは中に何も書けない。グループの中に段落を作成すると、テキストが入力できるようになる。

もう一つ段落を追加してみる。この段落は、グループの次にあるのか。それともグループの中にあるのか。グループの次、即ち外にあるようだ。だが、ドラッグしてグループの中にいれることができる。

メインボトムコンテンツ