フルワイドなサイトが増えてきている。

現在のテーマは、コンテンツワイズを決めて、幅広、全幅ブロックは、マイナスマージンで広げているが、エディタ内でのワードプレス側の処理との違いが生じてきており、フロント側では、別のスタイル処理を行う結果になっている。

現在のテーマを修正するか、新しいテーマにすべきか。

インラインフレームを外したスライダーのテスト、画像（未）

2

タイトル　メンバー

タイトル　プロファイル

タイトル　コンタクト

タイトル　グループ

結局のところ、ブロックテーマを使わない限り、投稿パターンや、クエリーブロック、投稿テンプレートを適切に使うことは困難なようだ。インデックスページやカテゴリーページ自体で使うべきということらしい。

非ブロックテーマを使う限り、ショートコードでやることは、止む無しということかも知れない。

投稿内で使うのは、難しいが、固定ページ内では用途を限定すればそれなりに使えるかも知れない。

見出しを作成し、全幅にする。
テキストを中央寄せにして、
背景色を追加

テキストに背景色を付けて全幅にしてみた。スタイルを細々調整するよりは簡単にできた。後は、必要に応じて、パでイングなどを調整すれば良い。
好ましくは無いと思うが、前後に空白改行を置くことでも調整できる。

子テーマのスタイルで、テーマサポートに、ブロックスタイル、幅広、横幅を追加した。
エディタ上では、両方とも適用された。
ワイドウィジェットカテゴリ指定で、サイドバーを消し、コンテント幅制限を削除したらフロントでも適用された。
子テーマのスタイルで、テーマサポートに、ブロックスタイル、幅広、横幅を追加した。
エディタ上では、両方とも適用された。
html :where(.wp-block)[data-align=wide]{max-width:1100px;}
html :where(.wp-block)[data-align=full]{max-width:none;}
になっている。フロントの要素には、alignwide, alignfullスタイルが付与されている。これらは、フロントの要素だけに付与されるらしい。

ワードウィジェットカテゴリ指定で、サイドバーを消し、コンテント幅制限を削除したらフロントでも適用された。
viewport-wide, viewport-wide-bg との調整が必要
本来なら、html幅の制限との調整も必要だが！

取り敢えず、両者ともviewport-wide と同じスタイルを当て、alignwideは、max1100となるよう、パディングを計算して調整。
画面幅が1100px以で計算するように修正。サイドバーがあっても広がるので、修正。

上下のマージンの調整などが必要、段落同様に1emにするか。？

グループで囲み、グループを全幅にしてみた。内側のカラムズは、840px幅になっている。
が、フロント画面では一杯に広がる。合わせるなら、フロント用のスタイル追加が必要
内側のカラムズに、wp-blockクラスを付与した。
viewport-wide-bgでは、背景の確認ができないので、こっちを使うほうがわかり易いかも。

wp-blockクラスは、マージンに副作用があるため、外側の全幅グループに、content-block-wrapper 付与にした。

背景画像の上下に、スペーサーを入れてある。スタイルで調整するより便利かも知れない。

カラムブロックで

カラムブロックで囲むと、画面幅が780px前後で一列になる。後出のカラムズクラスの付与なら、630px位で１列に。カラム幅とギャップの指定で、細かな調整が可能になる。グループは、インナーが余分だが。不思議なのは、クラスは外側に付与しているのに、画像はインナーの中で２列になっている。？
それで良いということらしい。ブレークで明示的に制御しない限り、中間のものも、最下位の要素までも、すべてブレークするらしい。

横並びブロックで、ラップにすると縦になる。

figureにflex:1 0 300pxなどを指定するとかない細かくコントロールできる。ベストか？
グローで広がるが、画面幅300以下で、画像がはみ出る。シュリンク１にすると、画像が小さいと、エディタ上で広がらない、
右寄せにしても、エディタ上ではセンタリングされたまま。？　wp-blockクラス付与でセンタリングしたことに問題があったので、外した。

フルワイドにも対応している。内部にショートコードを置くこともできる。オーバレイ用のspanと、画像用のimgタグ、インナーコンテナー用のdivタグが、絶対配置で含まれている。これだけで殆ど、用が足りている。カバーは様々な用途に利用できる。多少のクラスの追加で、再利用ブロック又はブロックパターン化して使える。

この下のカバーブロックは、ブロックエディタの機能だけで作成してある。オーバーレイと、インナーコンテナーのZインデックスが１。

タイトルを入力
改行もできるが
カラーが黒
設定エリアでテキストを白に

外側のブロックがflexで、center center になっている。
カバーブロックの中にショートコードをいれることもできる。
画像２枚のカラムにwp-blockクラス付与、フロントでも、コンテンツ幅に！

通常の段落、何も指定せず。テキストの装飾は、インラインの簡単なツールを除き、段落単位でしか、背景色を付けたりすることができない。やるなら、少ない文字数の段落を作り、インラインブロックにするしかない。vertical-align:middel
パディングを細かく制御するなら、クラスを指定して外部スタイルで、

グループはインナーを余分に作るるので、横並び若しくは、クラシックブロックでやるのが適当。背景色を付けたブロック（.has-background）は、外部スタイルでpadding:0.5em位に！

タイポグラフィをSに

タイポグラフィをMに、背景グラデの使い方が面倒、ポイントを選んで、RGB直打ちがベストかも知れない。

タイポグラフィをLに

タイポグラフィをXLに

マージンがデフォルトの1emのままなので、かなり行間が空く。ハイライトでも辞職を変えるとmarkタグが付く。

1

2

3

スタイルだけで段落を丸数字にできた。あとは、絶対配置にして貼り付ければ良い。