【無料で配布】新SHiFTで早速できる！文字入りスライドショーの作り方

とうとう新BiNDupが10月1日にリリースされました。
それに伴いスライドショー機能「SHiFT」も長い年月を経てフルリニューアルとなりましたが、もう使っていただけましたか？

新SHiFTについては以前軽く開発の裏側も交えて以下記事でご説明しましたので、今回は設定の基本と、タイトルとコメント入りスライドショーの簡単なカスタマイズ方法をご紹介したいと思います。

一目瞭然！インターフェースが刷新

とりあえずどう変化したかご説明・・・するまでもなく全てが変わりました。
今まで使っていた方からすると戸惑いがあるかもしれませんが、格段に使いやすくなっていますのですぐに慣れていただけると思います。

Before

After

見るべきエリアはこちら！新設定画面について

主に新しい機能についてご紹介します。

テキスト設定

一部テンプレートを除き、スライド画像１つ１つにタイトルとコメントを設定することができます。（テンプレートによってはタイトル設定だけのデザインもあります）。
こちらで表示されるものについてはDressで調整可能です。

サイズ設定

サイズについてより細かく設定できるようになりました。
PCとスマホでサイズを変えられるだけでなく、様々なデザイン事情にも対応できるようになりました。

それぞれ画面幅を1200px時の見え方の違い。※「拡大しない」時はブロック内コンテンツ幅を960pxに設定しスライドを中央寄せにしています。

詳細設定の仕様を解説

詳細設定の仕様は下記のようになります。

• デフォルト（チェックなし）：画面サイズに合わせてスライドの縦横比率を維持します
• 拡大しない：画面サイズが設定サイズを超えても、サイズを維持します→固定幅レイアウトにおすすめ
• 高さを固定：横幅は変化しますが、高さは指定サイズを維持します→高さを取りすぎたくない時におすすめ

高さを固定の方はデフォルト状態とは違い高さを一定にできるメリットがありますが、その分画像が見切れてしまうデメリットもあります。見切れてもいいような（雰囲気重視の）画像には相性が良いと思います。
拡大しないも一長一短なところがあるので、レイアウトやデザインによって使い分けましょう。

ナビゲーション設定

戻る・進むボタンや、スライド数に合わせてナビゲーション表示の切り替えができます。
スライド画像の状況に合わせて、ホワイトとブラックの２種を用意。

タイトルとコメント入りスライドショーはデザイン変更可能

SHiFTで設定したタイトルとコメントは、Dressで自由にカスタマイズできるようになりました。
※カスタマイズできないスライドテンプレートもあります

Dressの編集画面でSHiFTのあるエリアに今適用しているスライドテンプレート名で「●●●：コメント」と表示されているので、そこをクリックするだけで設定箇所にたどり着けます。
あとはいつも通り、タイトルや本文の設定を変更するだけです。
ナビゲーションとして使うなら、より文字が目立つように、カスタマイズしておくといいですね。

サンプルではケンバーンズを使用しているので「ケンバーンズ：コメント」のエリアを選択

ちょこっとカスタマイズ

せっかくなので「AQUAFOODS」のビルボードを少しカスタマイズしてみました。
変更した箇所は以下です。テキストをただ設定するよりも画像の色に左右されずに文字が見やすくなったのではないでしょうか。

サンプルを見る

主な設定箇所「●●●：コメント＞コメントの囲み」

• 配置方法：絶対配置
• 内側の余白
• 横幅
• 角丸（PCのみ）
• 背景色

細かい設定値などは、サイトデータを配布しますのでそちらをご確認ください！
今回作成したサイトデータは2019年10月1日にアップデートした最新のBiNDup環境でお使い頂けます。