Web制作サービス「BiNDup」で作れるスライドショーについて、前回は基本の作り方を紹介しました。それだけでも、商品やイベントページへの導入として「使える」ナビゲーションになりますが、画像に載せるテキストにもうひと手間を加えて、より効果的なオリジナリティの高いスライドショーに仕上げましょう。
▼前回の記事はこちら
Dressでカスタマイズ可能なテンプレート
SHiFTに収録されているテンプレートによって、カスタマイズできる幅が異なります。そのうち、「ダイナミック」カテゴリーの5種類のテンプレートと「カタログ」テンプレート内の「カード」「カルーセル・インデックス」については、デザイン管理機能「Dress」でタイトル周りのカスタマイズが可能です。具体的には、コメント、コメントタイトル、コメント囲みをそれぞれ編集できるので、思い通りのデザインに仕上げることも夢ではありません。
タイトルの文字サイズを変更する
今回は「ジャンボトロン」のテンプレートを例にタイトルの文字サイズを変更する手順を説明します。
なお、同じサイト内で共通のスライドショーを配置したい場合などテーマ全体に適用する方法は最後に紹介します。
はじめに、編集したいスライドショーが配置されたページをサイトエディタで開き、［デザイン編集］をクリックしてDressを起動しておきます。
Dressで編集するパーツを選択する
Dressの画面が開いたら、編集するパーツ（ここでは［ジャンボトロン：コメント］のネームタグをクリックします。こうすることによって、選択したパーツだけにデザインの変更を適用します。
コメントタイトルを編集する
上から［選択項目］、［詳細設定］それぞれ選択されていることを確認し、編集したい項目（ここでは［ジャンボトロン：コメント>コメントタイトル］）をクリックします。
より詳細にカスタマイズしたい場合は、先に［高度な設定を表示］から［＋］をクリックして、変更したい項目を選びます。
今回は［文字サイズ］を選んでから数値を入力して、［完了］をクリックします。数値を入力すると、プレビュー画面にリアルタイムで反映されるので、バランスを見ながら設定するといいでしょう。
可読性を上げるため、文字の背景に囲みを追加する
次に、テキストの背景や枠線、余白などのボックススタイルを編集します。ここでは、シンプルな背景を付けるにとどめますが、段落や余白、位置などを細かく設定することで、コメントの配置を思い通りに変更することも可能です。
コメント（テキスト）エリアの背景に色を付けて文字を強調します。文字の編集のときと同じように［選択項目］→［詳細設定］の画面で、［ジャンボトロン：コメント > コメントの囲み］をクリックします。
背景の色を設定する
追加する設定の選択ウインドウが表示されたら、今度は「ボックススタイル」の中から［背景］をクリックします。位置の指定など細かい設定を行う場合は、［高度な設定を表示］をオンにします。
ここでは、ブラックを選択し、スライドが透けて見えるように透過度を50%に設定しました。テンプレートのテーマに合ったカラーがあらかじめ用意されていますが、好きなカラーを指定することも可能です。
テキストエリアの幅を変更する
続いて、背景の色を乗せるエリアを調整します。ここでは、端から端まで背景にしたいので、テキストエリアの幅を指定します。
「ボックススタイル」のカテゴリから［幅］を選択し、サイズを入力したら、最後に［完了］をクリックします。ウインドウをある程度広げた状態でも両端が空かないようにする場合は、［100%］にするといいでしょう。
モバイルの表示を調整する
PC用のWebブラウザでは、問題なく表示できました。一方、スマートフォンではどうでしょう。プレビューをモバイルに切り替えて見ると、これでは文字のサイズが大きすぎますね。そこで、スマホに合わせて調整します。
［まとめて表示］を選択する
［選択項目］→［詳細設定］の画面で、［まとめて表示］ボタンをクリックします。これは、この先の設定項目に進んだ時に、共通の設定とモバイルの設定を両方表示するためです。続いて［ジャンボトロン：コメント>コメントタイトル］をクリックします。
文字サイズを調整する
ここでは大きすぎる文字を調整したいので、［文字サイズ］をクリックします。
［モバイル向けの設定］のスイッチをONにして、文字のサイズを調整します。プレビューを見ながらちょうどよく収まるサイズに設定したら、［完了］をクリックします。
このように、スマホでの見え方を確認して調整が必要な場合は、［モバイル向けの設定］で適宜設定を行います。
スライドショーのテーマ全体に変更を適用する方法
冒頭で説明したように、ここまでの設定は、編集前に選択したパーツに限って適用されるため、別のページに同じテンプレートのスライドショーを追加しても、設定は反映されません。
同じサイト内で同じテンプレートのスライドショーを複数設置する場合で、なおかつスライドショーのコメント周りのデザインを統一したいときは、スライドショーのテーマ全体に共通の設定を適用することができます。最後にその方法を紹介しましょう。
Dressで詳細設定を開く
まずは、サイトエディタで［デザイン編集］をクリックしてDressの画面を表示します。［詳細設定］を選択してから、［＋］をクリックします。
編集したいパーツを選択する
次に、デザインを編集したいパーツを選択します。ここでは、SHiFTのスライドショーを編集したいので［スライドショー］をクリックします。
–
スライドショーのテーマを選択する
最後に、設定したいスライドショーのテーマを選択します。本記事中で使った［ジャンボトロン：コメント］を選択（ハイライト）すると、すでに設定されているデザインが反映されます。
なお、ここに表示されていないテーマは、編集できないのでご注意を。
Dressを使ってテンプレート＋αのスライドショーを作ろう
新しいSHiFTは、新しいテーマに加え、編集項目も増えて効果的なスライドショーが作れるようになりました。でも、「もうちょっと味のあるフォントにしたい」「テキストを右寄せにしたい」など、「あとちょっとこうしたい」を実現するために、手間を惜しまずDressを活用することをオススメします。細部にまでこだわった納得のWebサイトが完成したときの喜びはプライスレスですよ！
POINT
- スライドショーのテンプレートによってカスタマイズできる幅が異なる
- スマホの見せ方の調整が必要な場合は［モバイル向けの設定］で適宜設定できる
- サイト内で複数のスライドショーに共通のデザイン（テーマ）を当てることもできる