問い合わせメールの改造版、カスタマイズ性、自動返信メールのオプションなどを追加してみた。

テスト開始。スタイルが未設定だった。

横並びブロックをうまく使えば、３列から２列、１列に変化するレイアウトを作れるのではないか。カラムズ・プロパティを使う場合との違いについて検証してみることにする。

縦の列にするため、横並びの直下には盾積みを入れる。複数行に折り返す設定にするので、

列幅が一定以上にならないようにする必要がある。

cssのcolumnsプロパティを検証してみる。この下に、クラシックブロックを利用して、column-width:240px;text-align:justify;で枠を作成する。

カスタムフィールド機能の活用についてテストしてみる。スクリプトの追加なしで、どの程度使えるかの確認。

カスタムフィールドを表示するには、右端の３点アイコンから、「設定」「パネル」「カスタムフィールド」の順に選択する。これで、編集画面の下方にカスタムフィールドフォームが表示されるようになる。

申込みフォームなどを詳細に作成したい要望が強いようなので、フォームをカスタマイズできるように拡張の予定。ショートコードは、テストフォームという名前で作成し、カスタムデータをセットして、コンタクトフォームを呼ぶようにした。

編集フォーム内で、選択や選択範囲のハイライト表示などをどのようにしているか、少し詳細に観察してみる。クリックによる段落の選択は、メニュー表示だけのようであり、段落自体にアウトラインなどは表示しない。メニューは、マウスダウン時点で表示されている。セレクション（選択範囲）に関しては、マウスアップ時にも何も変化しない。段落用に表示されたメニューの中から処理を選択するだけらしい。

入力途中でメニューが消えることがある。が、マウスオーバーで表示される。段落にアウトライン表示されることがあるが、どのようなタイミングで表示されるのかが不明。メニューの中の段落アイコンにマウスオーバーで、対象段落にアウトライン表示がされるようだ。複数段落にまたがる選択は、選択中にメニューが消えるが、マウスアップ時にメニューが表示される。メニューの表示位置は、選択のスタート位置を含む段落。

各種アラインメントのテストをする。

パラグラフのアラインメント、このパラグラフは何も指定していない。

このパラグラフでは、センタリングを指定してみる。

基本の構成ブ

センタリング、class=”has-text-align-center” .. style.min.css で text-align:center が指定されている。

ブロックエディタには、カラムズ、横並びなどレイアウトに使えるものがあるが、なぜか、CSSのcolumnsプロパティを使えるものが無い。単にカラムを別けてコンテンツを整理するだけなら、最も楽そうなのになぜだろう。複数行にまたがるレイアウトならグリッドが使い易いが、横一列ににしたいだけなら、カラムズプロパティが最も適しているように思うのだが。

館山城です。

クリックすると色が変わります。