安房５ミニマム

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

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

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

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

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

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

基本の構成ブ

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

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

館山城です。

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

横並びブロックのレスポンシブ対応のチェック。

ブロックに背景を付けると、1.25, 2.375emのパディグが付く。basisなどの指定なし。
nowrapのため、数が増えると、レイアウトが崩れる。

横並びの方がシンプルに枠一つで囲むだけ、グループの方は枠に中に更にインナーがあり、モア形式一覧では縦並びだが、シングル表示では横に並んでいる。スタイルはグリッドになっているようだ。

横並びの中に、縦並びをいれるしか無いかも。

カラムブロックのレスポンシブ対応をチェックしてみる。

まずは、同じ幅の２カラムブロックから。

ブロックエディタには、コンテンツのレイアウトの助けになるようなツールというか、ブロックが結構たくさんある。デザインブロックというグループになるようだ。当初は、「カラム」だけだったような気もするが、ワードプレスのバージョンがあがるにつれて、どんどん増えてきているようだ。スペーサーなどというブロックまである。その昔、スペーサーなどというもの（多くの場合、GIF画像だった。）を使ってはいけないと言っていた時代もあったような。ここでもう一度整理してみる。

テーブルのセルの結合について確認してみる。ブロックエディタのデフォルトのテーブルではセルの結合はできなかったと思う。MCEなどの高度なプラグインを使えば、簡単にできるが、できればプラグインは使いたくない。カスタムHTMLやクラシックブロックなどを使えばどの程度までできるかを確認してみる。

モアリンクのスタイルもセットしてある筈なのでテストしてみる。