ふらり立ち寄るほどに

地元がどんどん好きになる道の駅

新鮮食材を使った食堂もおすすめです

mainimg-slide1-text-y

  • 土台フレームにもよりますが、一般的にはcontentsの上(headerの下)に置いて下さい。
  • sectionと同じように左右の余白を取りたい場合、padding-x-partsを追加して下さい。
    (class="mainimg-slide1-text-y padding-x-parts")
  • 画面幅800px以下の端末向けに小さな画像を使いたい場合は、htmlのsrcsetで指定されている画像ファイル名を準備したものに書き換えて下さい。デフォルトでは大きな端末用と同じファイルが指定されています。mediaの値はcssのメディアクエリと同じなので、例えば縦長端末用などの指定もできます。
  • デフォルトは3枚構成ですが、4枚目を追加したい場合は、html側の3枚目のブロックをコピペし、img3-partsをimag4-partsに書き換えて、画像ファイル名も4枚目に変更して下さい。
  • 1枚目の画像のアスペクト比がそのままスライドショー全体に反映されます。
  • スライドショー上のテキストは、画面幅によって、スライドショーの下に縦書きテキストが突き抜けてきますが、そういう仕様です。突き抜けさせたくない場合は、文字数や配置場所を調整して下さい。
  • スライドショー上のテキストは、画面幅800px以下でスライド下に横書き表示に切り替わります。表示が不要なら#mainimg-text {display: none;}のみにして下さい。
《Web Design:Template-Party》