[WordPress編集]画像の重ね方

こんにちは。Alicefactoryの上田です。

WordPressで画像を扱う際、複数の画像を部分的に重ねて表示したいことがあります。
例えば、ロゴと背景画像を重ねたり、装飾用のフレームを追加したりする場合です。

本記事では、CSSのpositionプロパティを使った簡単な方法を紹介します。

要素を重ねる基本的な方法

重ねたい画像を準備する

ブロック一覧から「画像」ブロックを選択し、重ねて表示したい画像をページに貼り付けます。

画像1と画像2を貼り付けると以下のように表示されます。

注意
画像のサイズはCSSで指定するので、ここではサイズの指定はしません。

手順
1

画像をグルーピングする

Shiftキーを押しながら、CSSを適用したい画像を全て選択し、「グループ化」を選択します。

手順
2

CSSクラス名を指定(追加)する

(1)重なりを変えたい要素(画像)全てに「CSSクラス名」をつける。

  1. 要素(写真)を選択する。
  2. 右側のメニューから「高度な設定」を開き、「追加CSSクラス」欄に好きな名前をつけます。
  • クラス名は半角スペースならなんでもOKだが、サイト内で使用していないクラス名にすること
  • 既にクラス名が記載されている場合は、半角スペースで区切って入力する

(2)手順2で設定したグループにも「CSSクラス名」をつける。

  1. 左側の「リストビュー」からグループを選択する。
  2. 右側のメニューから「高度な設定」を開き、「追加CSSクラス」欄に好きな名前をつけます。
  • クラス名は半角スペースならなんでもOKだが、サイト内で使用していないクラス名にすること
  • 既にクラス名が記載されている場合は、半角スペースで区切って入力する
手順
3

CSSを記載する

グループの「カスタムCSS」にCSSを記載します。

  1. 左側の「リストビュー」からグループを選択する。
  2. 右側のメニューから「高度な設定」を開き、「追加CSSクラス」欄に好きな名前をつける。

CSSの例

例えば、このページのサンプル画像のCSSは次のようになります。

.container2 {
position: relative;
width: 100%;
height: 350px;
}

.gazou_red {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
opacity: 0.7;
z-index: 1; /* 背景画像が後ろ */
}

.gazou_blue {
position: absolute;
top: 50px;
left: 50px;
width: 300px;
height: 300px;
opacity: 0.7;
z-index: 2; /* 上に重ねる */
}

簡単に解説します。

.container2 {
position: relative;
width: 100%;
height: 350px;
}

  • CSSを指定するグループ(CSSクラス名container2)に関するCSSです。先頭に「.」をつけるのをお忘れなく
  • position: relative; :必ず記載
  • width: 100%;:二つの要素を描画するエリアの幅です。通常は100%でOK
  • height: 350px;:二つの要素を描画するのに必要なエリアの高さです
    今回は高さ300pxの要素を上下に50pxずらしているので、必要な高さは
    300px+50px=350pxとなります

.gazou_red {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
opacity: 0.7;
z-index: 1; /* 背景画像が後ろ */
}

.gazou_blue {
position: absolute;
top: 50px;
left: 50px;
width: 300px;
height: 300px;
opacity: 0.7;
z-index: 2; /* 上に重ねる */
}

  • 赤い画像(CSSクラス名gazou_red)と青い画像(CSSクラス名gazou_blue)に関するCSSです。先頭に「.」をつけるのをお忘れなく
  • position: absolute; :必ず記載
  • top: 0;:container2で設定した描画エリアの上部からの距離を指定します。「top: 0;」は描画エリアの上部から0px、つまり描画エリアの上部に接して描画します。
  • left: 0;:container2で設定した描画エリアの左からの距離を指定します。「left: 0;」は描画エリアの左端から0px、つまり描画エリアの左端に接して描画します。

    gazou_blueはtop: 50px;、left: 50px; なので、描画エリアの上から50px、左端から50pxの位置に描画しています
  • width: 300px;:画像の幅です
  • height: 300px;:画像の高さです
  • opacity: 0.7;:要素の透明度です。0.7は透明度70%になります。記載しなければ、不透明になります
  • z-index: 1;:画像の重なり順序です。数字が大きいほど上に表示されます
    この例では、gazou_redが1、gazou_blueが2なので、青い画像が上に表示されます

※CSSの詳細については、詳しく説明しているサイトがたくさんあるのでそちらを参照してください。

手順
4

アニメーションと組み合わせる(オプション)

プラグイン「Blocks Animation: CSS Animations for Gutenberg Blocks」とCSSを組み合わせることで、動きのあるコンテンツを簡単に制作することができます。いろいろ試してみてください。

アニメーションと組み合わせた例


画像2をフェードイン


画像2をロールイン


画像2を上から移動後に拡大


画像2をバウンズ


画像2を裏返す


画像2を中央支点で回転


画像2を右からスライドイン


画像2をズームイン


画像2をロールイン


画像2を鼓動

まとめ

画像をCSSで重ねるだけで、プロフェッショナルライクなホームページを制作することができます。
また、アニメーションプラグインと組み合わせることで簡単に動きのあるコンテンツにすることもできます。いろいろ試してみてください。

この記事についてのご質問やご要望がございましたら、お気軽に下記までお問い合わせください。

お気軽にお問い合わせください。080-5662-2307受付時間 9:00-18:00 [ 土・日・祝日除く ]

お問い合わせ