WordPressテーマdeerのデモサイト(旅ブログ)

WordPressテーマdeerのデモサイト(旅ブログ)

フルワイド画像サンプル

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″で設定されます。

WordPressテーマdeerのデモサイト(旅ブログ)