Gutenbergのカバーブロックで背景画像を固定する方法
Kadenceテーマを使う理由の一つに, Gutenbergエディターに準規しながら, それを拡張する機能を持っている、つまり, 今後も進化発展していくと予想されるGutengergエディターと共存していこうという方向性である。
夜景
ブロックの背景画像を固定させる手順
上のような, 固定した背景画像を作成した手順を実際の画像を使って説明する。
( Kadence Blockのタブを使っている。)
カバーブロックはメディアの中にある
背景の画像を選ぶ
文字の部分 (ここでは「夜景」とした) を入力した後は, 右上の歯車をクリックしてKadence Blockの編集画面を出す。
右がKadence Blockの編集画面。この状態は, 文字に関する編集画面になっている。
写真のどこか１箇所をクリックすると, 下のように画像の編集画面になる。
固定背景のスイッチをマウスで右に移動させると, 背景画像が固定される。
これで, ほぼ完成。しかし, このサイトでは, 文字色を黒に設定しているので, このままでは, 「夜景」の文字は, 黒で表示されることになる。そこで, 次は, 文字色を設定する。
黒い「夜景」の文字をクリックして, 文字に関する編集画面に移る。
テキストの色の丸い部分をクリックするとカラーパレットが現れる。
画像の中で, よく映える色を選ぶ。ここでは, 白を選んだ。
以上で完成。
編集中のパーツの部分をクリックすることで, そのパーツの設定画面が現れるので, 最初は戸惑うこともあるが, 慣れると感覚的に操作出来るようになる。
夜景
Elementorでの背景画像の固定
Elementorでも背景画像を固定することが出来る。
これが, Elementorにおける背景画像を固定するための操作画面である。
背景のスタイルから, 背景タイプをクラシックに設定して背景画像を設置すると画像の下に位置, 添付 という設定項目が現れる。添付のメニューから固定を選ぶと,背景画像が固定される。
この機能に感激し, Elementorを是非使えるようになりたいと思い, Elementorと相性が良いとされているテーマを探すことになった。
ところが, 大変残念なことに, その下に書いてあるように、背景画像が固定出来るのは, DeskTopだけで, Mobileでは固定されない。
一方, Gutenbergのカバーというブロックは, mobileにも対応している。
Kadenceテーマは, 今後, 進化をしていくことが期待されるGutengerg Blockと共存しながらも, 特別なデザインにしたいページを作成する時には, Elementorもを使うことも出来る。