• 0k
  • 0
ウェブデザイン \ 2013年7月24日

HTML5グリッドアニメーションギャラリーでサイトをもっと動的に

数日前、Wixスタッフはロサンゼルスを拠点とするサーカス団「Le Tigre Tent」の素晴らしいWixサイトを発見しました。何が素晴らしかったかというと、グリッドアニメーションギャラリーをホームページに活用し、まるで目の前でサーカスが行われているかのような気分にしてくれたことです。

WixホームページビルダーのHTML5ギャラリーを上手に使ったWebサイト例

Le Tigre Tent のホームページ

この機能は、設定方法がとても簡単なのにも関わらず、Wixサイトの中でもあまり見かけることが少ない機能の一つです。今回は、シンプルな手順で、ホームページを格段にパワーアップしてくれるこのグリッドアニメーションギャラリーの設定方法をご紹介します。このグリッドアニメーションはどのページ追加してもいいのですが、特に「ホーム」ページで活用することで、訪問者がサイトを訪れた瞬間にあっと驚くサイトを作ることができます。

今回はこちらのHTMLテンプレートを使って使い方を説明しますが、もちろんWixのHTML5テンプレートならどれを使ってもグリッドアニメーションが利用できます!

WixホームページビルダーのHTML5サイト編集画面を開きます

  • ホームページにてギャラリーを追加したい部分を選択します
  • ボックスを追加して、ギャラリーの背景に利用しましょう。こうすることでギャラリー全体に奥行きがでます。[追加]> [図形と区切り線]をクリックして、[ボックス]を選択します

Wixホームページビルダーでボックスを追加してギャラリーに奥行きを出します

  • ギャラリーに使用したい部分全体に追加したボックスを引き伸ばします
  • ボックスをクリックして[スタイルの変更]をから色や影などをカスタマイズしましょう

WixホームページビルダーのHTML5エディタで影や色を選択しスタイルを変更します

  • 次に、ギャラリーを追加します。追加アイコンをクリックして、[ギャラリー]を選び、グリッドアニメーションを選択します

WixホームページビルダーのHTML5エディタでグリッドアニメーションギャラリーを追加します

  • ギャラリーをボックスのサイズに合わせて引き伸ばします
  • ギャラリー部分をクリックして、[設定]を選択してデザインをカスタマイズします
  • 好きなように列や行数を変更しましょう
  • 余白の間隔(pixel)を0から10までの間で選びましょう
  • 変換(画像の切り替え効果)を選択します

WixホームページビルダーのHTML5エディタでギャラリーの間隔や行数をカスタマイズします

  • 切り替え時間をお好みで設定します(5が最も遅い速度です)
  • 「自動再生ボタンの表示」と「ナビゲーションボタンの表示」はオフにすることをおすすめします。
  • 「画像クリック時の動作」にて好きな動作を選択します
  • [スタイルの変更]をクリックして、色やマウスオーバーしたときのテキストなど、ギャラリーのデザインをカスタマイズしましょう

WixホームページビルダーのHTML5エディタでギャラリーのスタイルを自由にカスタマイズします

  • ここで、ギャラリーをクリックして、[画像の整理]を選択します

WixホームページビルダーのHTML5エディタでギャラリーにオリジナル画像を追加できます

  • [画像の追加]をクリックして、マイイメージ、またはWixの無料画像から追加したい画像を選択します

WixホームページビルダーのHTML5ギャラリーに無料写真素材やオリジナル画像を追加します

  •  各画像にタイトルや説明を追加したり、画像の順番を変更することができます
  • 最適な画像数は、ギャラリーの列や行数によって異なります。3列x3行の場合は、最低でも27枚の画像があるギャラリーにバリエーションがでます
  • ギャラリーの準備が整ったら、[保存]をして[プレビュー]をクリックし、思い通りにデザインがされているか一度確認してみましょう。ギャラリーの切り替え速度や余白の調節、画像の順序を変更することができます。

さあこちらが完成版です:

Wixホームページエディタで作成されたサイトにグリッドアニメーションギャラリーが追加されました

ライター: The Wix Team
Wix

今すぐ Wixブログ を
無料購読しよう!

Wixブログを購読しよう 役立つ情報をいち早くゲット!

正しいメールアドレスを
入力して下さい

正しいメールアドレスを
入力して下さい Email already exists

正しいメールアドレスを
入力して下さい Invalid email

Wixブログを購読 \ 

WebデザインやWix新機能についての
最新情報を無料でお届けします!

正しいメールアドレスを
入力して下さい

正しいメールアドレスを
入力して下さい Email already exists

正しいメールアドレスを
入力して下さい Invalid email