マルチカラム
マルチカラムブロックがあるが、カラム間のコンテンツの高さを自動的に調整するには、CSSのcolumnsを使いたい。が、そのようなブロックは存在しない。通常の段落ブロックで暮らすなどを指定することでマルチカラムとして扱うことはできないか。この下にワードプレスのカラムブロックを挿入してみる。
色々と試してみた結果として、高度な設定でクラスを a5columns と指定することでマルチカラムとして扱われるよう、スタイルを設定した。
段落（ｐ）に指定した時は、段落が、グループ化したDIVに指定した時は、その中のインナーDIVがマルチカラムとして扱われるようにした。列数は、基本２列とし、メディアクエリーで、１列又は３列になるようにした。
先頭にテキストを入力してみる。右のカラム中に文字は流れ込んでいる。やはり、左側のカラムの中にテキストを追加していっても、右側のカラムの中に流れることは無い。これは、こういうものと諦めるしか無いのか。
この段落を「HTMLとして編集」し、スタイルでcolumnsを指定すると、「変なものが含まれている」というようなエラーになってしまう。カラムの中に画像、この場合はインライン画像を入れるとどうなるのだろうか。
画像は、base.cssdで、display:blockとし、max-width:を100%にしている。このあたりが不具合の要因になりそうな気がする。
シフト・ブレークで、改行自体はできる。パラグラフの中にインライン画像を挿入すると、インラインのスタイルタグが付加され、デフォルトで１５０ｐｘのスタイルにされてしまうようだ。なおかつ、ソースセットが書き込まれてしまうので、大変なコードになってしまう。この状態では、インライン画像は使えないことになる。
<p style="columns:2">コードブロックで段落を作成し、スタイルタグを追加してみる。が、何も起こらない。そのままコードとして表示されているだけ。タグは、スペシャルキャラクターとして記号化されている。</p>カスタムHTMLブロックとして作成してみる。プレビューするとビジュアルが確認できるが、ビジュアルなままでの編集はできない。columns:3をスタイルで指定してみた。プレビューすると、確かにマルチカラムになっているものの、そのままの状態では編集できない。ｈｔｍｌの状態に戻して編集することになる。ただし、各列の高さなどは自動的に調整してくるなどの利点はある。
見出し、レベル３の見出し
通常の段落、最初の段落。見出しと複数の段落を囲んでグループ化し、カラムズクラスをセットする。
ここが二番目の通常の段落。外側のDIVだけにクラスを指定した筈なのに、なぜかマルチカラムになっている。
三番目の通常の段落。
もう一つ段落を追加してみる。この段落は、グループの次にあるのか。それともグループの中にあるのか。グループの次、即ち外にあるようだ。だが、ドラッグしてグループの中にいれることができる。
グループブロックを直接選択することができる。そのままでは中に何も書けない。グループの中に段落を作成すると、テキストが入力できるようになる。400×400の画像が何故か、150に？