フルワイド画像サンプル
WordPressテーマ『deer』でできる
LP用フルワイドな画像ブロックのサンプルページ
WordPressテーマ『deer』では、以下のショートコードを使うと、固定ページのランディングページのテンプレートで横幅一杯の画像を使うことが出来ます。
調整可能なフルワイド画像(tob4)
↓ 調整可能なフルワイド画像は、以下のように記述してみてください。
[tob4 backimg="https://fanfare-co-ltd.com/deer-demo-03/wp-content/uploads/2021/08/shutterstock_1511973794-1.jpg" height="600" position="top" attachment="scroll" size="cover" x="50" y="50"] ここに画像上に置くコンテンツ [/tob4]
調整可能なフルワイド画像では、
- position:画像の基準位置
- size:サイズ
- height:高さ
- attachment:動き
- x,y:画像の上に載せるコンテンツの場所(x軸上の位置、y軸上の位置)
をより細く設定できるようになりました。
具体的には以下のようにショートコードの中身を設定します。
- backimg=”背景画像のURL”:背景にしたい画像のURLを入れます。
- position=”位置”:”位置”の中身は”top”,”center”,”bottom”で画像の基準位置を調整できます
- size=”サイズ”:”サイズ”の中身は”auto”,”cover”,”contain”などで調整できます
- height=”高さ”:”高さ”の中身は数値で高さを変更できます(例 “500”)※数字のみで入力してください
- attachment=”動き”:”動き”は”fixed”,”scroll”のどちらかで設定してください。
- x=”中身のx軸の位置”:”中身のx軸の位置”は画像の上に載せる文字などの位置を調整する数字(例”50″)1~100の間で調整してください。
- y=”中身のy軸の位置”:”中身のy軸の位置”は画像の上に載せる文字などの位置を調整する数字(例”50″)1~100の間で調整してください。
上記の内容を何も設定しないと、backimg=”” position=”center” attachment=”scroll” size=”cover” height=”500″ x=”50 y=”50″で設定されます。