カスタムパターン

元のパターン

このパターンをコピーして、カスタムパターン用のスクリプトを作成する。幅広は、クエリーパターンと、投稿テンプレートの両方を幅広にしないと有効にならない。
最新のバージョンでは、「パターン/再利用ブロックの作成」メニューが追加され、ここでパターン作成ができるようになっている。

  • 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 と同時にインラインスタイル…

最終更新日時: 2023年8月14日(月) 14:01