このテーマの公式紹介ページをのぞいてみたときのことですが、写真の配置が以下のようになっていました。

公式テーマページのデモサイト

画像が重なっているうえに、段差をつけて配置されていますね。これっていったいどうやっているのでしょうか? いろいろ触っていたら見つけましたので、紹介していきます!

「パターン」機能

WordPressのテーマの中には、そのテーマ独自のレイアウトを組んでくれる「パターン」機能があります。

上の絵の場合だと、まず横並びにしたいから「カラム」ブロックを選んで、画像ブロックを左に2個、右に2個配置して・・・と操作しないといけないのですが、この手間が省けます。記事編集画面で、以下の手順に従って操作してください!

  1. 左上の「+(プラス)」マークをクリック。
  2. すぐ下のタブ「パターン」をクリック。
  3. 画像の重ね合わせをクリック。

すると、プレビュー通りの配置で画像が表示されます。

この表示をするには、「カラム」の「重ね合わせ」で可能。

この画像配置は、「カラム」の「重ね合わせ」という設定のようです。これを使えば、「パターン」を使用しなくても自分で作成できます。これまた記事編集画面で、以下の手順に従って操作してください!

  1. 左上の「+(プラス)」マークをクリック。
  2. 「カラム」ブロックを選択。(ここでは50/50を選択。)
  3. 左側のブロックをクリックし、「画像」ブロックを選択。
  4. 画像を選択
  5. 右側も同様。
  6. 「カラム」ブロックをクリックして選択(二つの画像の間ぐらいをクリック。)
  7. 右サイドバー「ブロック」タブ。「スタイル」欄。「重ね合わせ」を選択。

こうすると、画像を少しずらしていい感じに重ね合わせてくれます。

「カラム」の「重ね合わせ」

ちょっといろいろ動かしてみた

1. 枠付けてみた。

それぞれのカラムには、「画像」ブロックが入っているので、枠線をつけてみることが可能です!

画像をクリック → スタイル で変更可能

つけてみるとこんな感じ。公式テーマページの感じと同じようになってきましたね。

2. カラムを増やしてみた

カラムを6列ぐらいにして重ね合わせしてみました。どうやら、1(列目)と2、3と4、といった感じで奇数列と偶数列が重なるようですね。

6カラムの場合

おんなじ写真ばっかりで変な感じですがご了承ください(笑)

3. 配置をズラしてみた。

「パターン」機能で追加したブロックをよく見てみると、右側のカラムは「スペーサー」がついているようですね。このスペーサーで画像配置のバランスを調節するようです!

スペーサーで配置調節

まとめ

今回は「カラム」の「重ね合わせ」についてみていきました!twentytwentyoneの特徴とも呼べる機能で、画像をたくさん乗せる場合には、ただ規則的に並べるよりも動きが出ておしゃれに感じますね!

皆さんもカラムを増やしたり、画像を見出し、段落ブロックに変えたりといろいろ試してみてください。

私はこの機能を使って、下のようなプロフィールページを作ってみました!

デモサイト↓↓
さいとうのほのぼのブログ – ~ゆっくりゆったりホームページづくり~ (saitokou.com)


みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください!
WordPressデザインサービスは以下から承っております。

ワードプレスホームページを新規導入します テンプレート付き!!初めての導入、初心者の方にオススメ!!

関連記事

  • 関連記事
  • おすすめ記事
  • 特集記事
TOP