アイキャッチ追加
投稿一覧アイキャッチを追加してみた。
後は、このグリッドのスタイルをどの程度オーバーライドできるか。
幅広に３列が、600前後で一列になる。かなり狭くなるまで、３列、２列を経過するようにしたい。calcでギャップ分の調整をしているので、ギャップが幾らになっているのかを探る必要がある。
gapは、1.25emだが、個別の投稿をグループで囲み、その上下左右に30pxのパディングがある。両者のサイズ調整が必要になる。
-
Hello world!
安房.jpサイト へようこそ。これは最初の投稿です。編集または削除してコンテンツの作成を始めてください。
-
-
-
-
-
この下にブロックをコピーしたコードを置いた。パディング30pxになっている。これを修正して独自パターン化すれば良い。
<!-- wp:query {"queryId":10,"query":{"perPage":6,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"flex","columns":3},"align":"wide"} -->
<div class="wp-block-query alignwide"><!-- wp:post-template {"align":"wide"} -->
<!-- wp:group {"style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"inherit":false}} -->
<div class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:post-title {"isLink":true} /-->
<!-- wp:post-featured-image /-->
<!-- wp:post-excerpt /-->
<!-- wp:post-date /--></div>
<!-- /wp:group -->
<!-- /wp:post-template --></div>
<!-- /wp:query -->var 6.2.3 で次のように変化した。
<!-- wp:query {"queryId":10,"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","layout":{"type":"grid","columnCount":3}} -->
<!-- wp:group {"style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"inherit":false}} -->
<div class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:post-title {"isLink":true} /-->
<!-- wp:post-featured-image /-->
<!-- wp:post-excerpt /-->
<!-- wp:post-date /--></div>
<!-- /wp:group -->
<!-- /wp:post-template --></div>
<!-- /wp:query -->