カスタムパターン
元のパターン
このパターンをコピーして、カスタムパターン用のスクリプトを作成する。幅広は、クエリーパターンと、投稿テンプレートの両方を幅広にしないと有効にならない。
最新のバージョンでは、「パターン/再利用ブロックの作成」メニューが追加され、ここでパターン作成ができるようになっている。
-
Hello world!
安房.jpサイト へようこそ。これは最初の投稿です。編集または削除してコンテンツの作成を始めてください。
-
全幅背景内のコンテンツ再度
全幅背景内のコンテンツ幅コンテンツ、幅広コンテンツ、背景画像有り、無しなどのテストを再度まとめて行う。 全幅背…
-
wave.svg
幅500px, 高さ50pxにセットしたら、width=500 height=50 と同時にインラインスタイル…
-
物件情報タイトル
カスタムフィールドでは無く、テーブルを使って作成し、カスタムパターン化する方法を試す。 価格 1,200万円 …
-
カスタムフィールドテスト
カスタムフィールドテスト用の投稿です。 個別投稿又は投稿一覧に表示するスクリプトのテストです。 (抜粋文)
-
カスタム画像
カスタム画像表示用ショートコードのテストです。 この投稿だけ、上に何かがあるような。
上記をコピーしてカスタマイズしたパターン
投稿テンプレートに背景色は、更にグループで囲んで全幅にする必要がある。クエリーパターンを全幅にできるが、背景色をセットできない。背景画像もセットできない。カバーの中に入れるのが良いかも。幅広の中では、見た目も不可。カバーでは問題が。(後述)
各投稿の背景は、グループのもう一つ外の枠(li.wp-block-post)にセットする必要がある。これはスタイルシート側になるかも。
-
Hello world!
安房.jpサイト へようこそ。これは最初の投稿です。編集または削除してコンテンツの作成を始めてください。
-
全幅背景内のコンテンツ再度
全幅背景内のコンテンツ幅コンテンツ、幅広コンテンツ、背景画像有り、無しなどのテストを再度まとめて行う。 全幅背…
-
wave.svg
幅500px, 高さ50pxにセットしたら、width=500 height=50 と同時にインラインスタイル…
-
物件情報タイトル
カスタムフィールドでは無く、テーブルを使って作成し、カスタムパターン化する方法を試す。 価格 1,200万円 …
-
カスタムフィールドテスト
カスタムフィールドテスト用の投稿です。 個別投稿又は投稿一覧に表示するスクリプトのテストです。 (抜粋文)
-
カスタム画像
カスタム画像表示用ショートコードのテストです。 この投稿だけ、上に何かがあるような。
<!-- wp:query {"queryId":11,"query":{"perPage":6,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"align":"wide"} -->
<div class="wp-block-query alignwide"><!-- wp:post-template {"align":"wide","backgroundColor":"vivid-cyan-blue","layout":{"type":"grid","columnCount":3}} -->
<!-- wp:group {"style":{"spacing":{"padding":{"top":"1rem","right":"1rem","bottom":"1rem","left":"1rem"}}},"backgroundColor":"white","layout":{"inherit":false}} -->
<div class="wp-block-group has-white-background-color has-background" style="padding-top:1rem;padding-right:1rem;padding-bottom:1rem;padding-left:1rem"><!-- wp:post-featured-image /-->
<!-- wp:post-title {"isLink":true} /-->
<!-- wp:post-date /-->
<!-- wp:post-excerpt /--></div>
<!-- /wp:group -->
<!-- /wp:post-template --></div>
<!-- /wp:query -->
コンテンツ幅のページ内での、幅広
クエリーループと投稿テンプレートで幅広アイコンを選択
-
Hello world!
安房.jpサイト へようこそ。これは最初の投稿です。編集または削除してコンテンツの作成を始めてください。
-
全幅背景内のコンテンツ再度
全幅背景内のコンテンツ幅コンテンツ、幅広コンテンツ、背景画像有り、無しなどのテストを再度まとめて行う。 全幅背…
-
wave.svg
幅500px, 高さ50pxにセットしたら、width=500 height=50 と同時にインラインスタイル…
-
物件情報タイトル
カスタムフィールドでは無く、テーブルを使って作成し、カスタムパターン化する方法を試す。 価格 1,200万円 …
幅広にして、カバーにいれると、フロント側のレイアウトが崩れる。(この下)
全幅内の幅広(クエリールプ、投稿テンプレート共に幅広アイコン選択)は、スタティック配置にし、インラインマージンをゼロにする。全幅内のコンテンツ幅は、単にcontent-blockクラスを追加指定する。
カバー(全幅)ブロック内のパターン
-
Hello world!
安房.jpサイト へようこそ。これは最初の投稿です。編集または削除してコンテンツの作成を始めてください。
-
全幅背景内のコンテンツ再度
全幅背景内のコンテンツ幅コンテンツ、幅広コンテンツ、背景画像有り、無しなどのテストを再度まとめて行う。 全幅背…
-
wave.svg
幅500px, 高さ50pxにセットしたら、width=500 height=50 と同時にインラインスタイル…
-
物件情報タイトル
カスタムフィールドでは無く、テーブルを使って作成し、カスタムパターン化する方法を試す。 価格 1,200万円 …
-
カスタムフィールドテスト
カスタムフィールドテスト用の投稿です。 個別投稿又は投稿一覧に表示するスクリプトのテストです。 (抜粋文)
-
カスタム画像
カスタム画像表示用ショートコードのテストです。 この投稿だけ、上に何かがあるような。
4列は、フレックスにしてセンタリング
各エントリーは、flex:0 0 280px で固定幅になる。
-
Hello world!
安房.jpサイト へようこそ。これは最初の投稿です。編集または削除してコンテンツの作成を始めてください。
-
全幅背景内のコンテンツ再度
全幅背景内のコンテンツ幅コンテンツ、幅広コンテンツ、背景画像有り、無しなどのテストを再度まとめて行う。 全幅背…
-
wave.svg
幅500px, 高さ50pxにセットしたら、width=500 height=50 と同時にインラインスタイル…