画像を重ねて表示

以下は、カラムズに画像を二枚。wp-block-columns の中に、wp-block-columnが2つある。どちらもtransform:translate(x,y)で動かせる。実際には、columnsにクラスを指定して、最初の子を右上に、次の子を左下に動かすようなスタイルを書いておくことが必要になる。htmlタグに直接書き込むなら、クラシックブロックかカスタムHTMLを使うことになる。

更に、移動させる方向に十分なマージンをセットしておくことも必要になると思える。代表的なパターンを2、3種類スタイルで用意しておくのが、一番かも知れない。そうすれば、スペーサーを使うことも無い。

ただし、画面幅に応じて、一列になった時のスタイルをどうするか考えて置かなければならない。ブレークポイントで、元に戻す。?

掲載日時: 2023年6月28日(水) 17:14