このテーマの公式紹介ページをのぞいてみたときのことですが、写真の配置が以下のようになっていました。
画像が重なっているうえに、段差をつけて配置されていますね。これっていったいどうやっているのでしょうか？ いろいろ触っていたら見つけましたので、紹介していきます！
「パターン」機能
WordPressのテーマの中には、そのテーマ独自のレイアウトを組んでくれる「パターン」機能があります。
上の絵の場合だと、まず横並びにしたいから「カラム」ブロックを選んで、画像ブロックを左に2個、右に2個配置して・・・と操作しないといけないのですが、この手間が省けます。記事編集画面で、以下の手順に従って操作してください！
- 左上の「＋（プラス）」マークをクリック。
- すぐ下のタブ「パターン」をクリック。
- 画像の重ね合わせをクリック。
すると、プレビュー通りの配置で画像が表示されます。
この表示をするには、「カラム」の「重ね合わせ」で可能。
この画像配置は、「カラム」の「重ね合わせ」という設定のようです。これを使えば、「パターン」を使用しなくても自分で作成できます。これまた記事編集画面で、以下の手順に従って操作してください！
- 左上の「＋（プラス）」マークをクリック。
- 「カラム」ブロックを選択。（ここでは50/50を選択。）
- 左側のブロックをクリックし、「画像」ブロックを選択。
- 画像を選択
- 右側も同様。
- 「カラム」ブロックをクリックして選択（二つの画像の間ぐらいをクリック。）
- 右サイドバー「ブロック」タブ。「スタイル」欄。「重ね合わせ」を選択。
こうすると、画像を少しずらしていい感じに重ね合わせてくれます。
ちょっといろいろ動かしてみた
1. 枠付けてみた。
それぞれのカラムには、「画像」ブロックが入っているので、枠線をつけてみることが可能です！
つけてみるとこんな感じ。公式テーマページの感じと同じようになってきましたね。
2. カラムを増やしてみた
カラムを6列ぐらいにして重ね合わせしてみました。どうやら、1（列目）と2、3と4、といった感じで奇数列と偶数列が重なるようですね。
おんなじ写真ばっかりで変な感じですがご了承ください（笑）
3. 配置をズラしてみた。
「パターン」機能で追加したブロックをよく見てみると、右側のカラムは「スペーサー」がついているようですね。このスペーサーで画像配置のバランスを調節するようです！
まとめ
今回は「カラム」の「重ね合わせ」についてみていきました！twentytwentyoneの特徴とも呼べる機能で、画像をたくさん乗せる場合には、ただ規則的に並べるよりも動きが出ておしゃれに感じますね！
皆さんもカラムを増やしたり、画像を見出し、段落ブロックに変えたりといろいろ試してみてください。
私はこの機能を使って、下のようなプロフィールページを作ってみました！
デモサイト↓↓
さいとうのほのぼのブログ – ～ゆっくりゆったりホームページづくり～ (saitokou.com)
みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください！
WordPressデザインサービスは以下から承っております。
