画像ブロックに効果とアニメーションを追加する

画像ブロ⁠ックにインパクトのある視覚効果を追加して⁠、訪問者の注意を引きます⁠。

最終更新日 2024年10月18日

サイトの画像ブロ⁠ックに効果を追加して⁠、画像をよりスタイリ⁠ッシ⁠ュに見せることができます⁠。画像が常に動くようにアニメ⁠ーシ⁠ョンを追加する効果や⁠、訪問者がサイトのそのセクシ⁠ョンをスクロ⁠ールしたときにのみ表示される効果などがあります⁠。これらの効果を適用する方法は⁠、創造エデ⁠ィタ⁠ー セクシ⁠ョンとクラシ⁠ック エデ⁠ィタ⁠ー セクシ⁠ョンのどちらに画像を追加したかによ⁠って異なります⁠。

始める前に

  • 画像エフ⁠ェクトは⁠、単一の画像にアニメ⁠ーシ⁠ョンを追加します⁠。バ⁠ージ⁠ョン7⁠.1を使用している場合は⁠、サイト全体のアニメ⁠ーシ⁠ョンを使用してサイト全体にアニメ⁠ーシ⁠ョンを適用できます⁠。
  • 個⁠々の画像ブロ⁠ックのアニメ⁠ーシ⁠ョンは⁠、サイト全体のアニメ⁠ーシ⁠ョンにオ⁠ーバ⁠ーライドされます⁠。
  • 編集した⁠.gif フ⁠ァイルに画像エフ⁠ェクトを追加すると⁠、静的な⁠.jpg フ⁠ァイルに変換されます⁠。
  • サイトに視覚効果を追加する前に⁠、アクセシビリテ⁠ィに関するリソ⁠ースを確認することをおすすめします⁠。

創造エデ⁠ィタ⁠ーで画像ブロ⁠ックに効果を適用する

創造エデ⁠ィタ⁠ー セクシ⁠ョンの画像ブロ⁠ックに画像を追加した後⁠、画像をダブルクリ⁠ックするとエデ⁠ィタ⁠ーが開きます⁠。その後⁠、次の操作を行います⁠。

  1. [⁠デザイン⁠] をクリ⁠ックし⁠、[⁠画像エフ⁠ェクト⁠] をクリ⁠ックします⁠。
  2. メニ⁠ュ⁠ーから効果を選択します⁠。効果に加えた変更は⁠、サイトのプレビ⁠ュ⁠ーに表示されます⁠。
  3. [⁠保存⁠] をクリ⁠ックして変更を保存し⁠、そのまま編集を続けるか⁠、[⁠終了⁠]⁠、そして [⁠保存⁠] の順にクリ⁠ックしてエデ⁠ィタ⁠ーを閉じます⁠。

画像エフ⁠ェクトのスタイル

次の画像エフ⁠ェクトから選択できます⁠。

  • なし - オ⁠ーバ⁠ーレイの不透明度を設定するほかに効果はありません⁠。
  • 液状 - 画像に波紋のような効果を与えます⁠。
  • フ⁠ィルム グレイン - アニメ⁠ーシ⁠ョンする静的オ⁠ーバ⁠ーレイを画像に追加します⁠。
  • パララ⁠ックス - 訪問者がスクロ⁠ールすると画像が動きます⁠。
  • 屈折線 - 直線のパタ⁠ーンをかぶせて画像を屈折させます⁠。
  • 屈折円 - 円のパタ⁠ーンをかぶせて像を屈折させます⁠。

画像エフ⁠ェクトをクリ⁠ックし⁠、設定アイコンをクリ⁠ックして⁠、詳細パネルで効果をカスタマイズします⁠。

Image_block_image_effects_settings_icon.png

詳細パネルで任意のカテゴリ⁠ーをクリ⁠ックしてドロ⁠ップダウン メニ⁠ュ⁠ーを展開し⁠、次のようなその他のオプシ⁠ョンを表示します⁠。

  • 効果のサイズと形状のカスタマイズ
  • 液状などのモ⁠ーシ⁠ョンによる効果の速度と方向を編集する

画像エフ⁠ェクトのタイプに応じて⁠、効果のコア コンポ⁠ーネントを変更する際に使用できる設定が異なります⁠。ランダムな設定を試してみるには⁠、効果を選択するときにシ⁠ャ⁠ッフル アイコンをクリ⁠ックするか⁠、効果の詳細パネルで [⁠ランダム化⁠] をクリ⁠ックします⁠。

各効果をテストして⁠、どのような効果があるか⁠、サイトでどのように機能するかをよく理解することをおすすめします⁠。

クラシ⁠ック エデ⁠ィタ⁠ーで画像ブロ⁠ックに効果を適用する

クラシ⁠ック エデ⁠ィタ⁠ー セクシ⁠ョンの画像ブロ⁠ックに画像を追加した後⁠、画像をダブルクリ⁠ックするとエデ⁠ィタ⁠ーが開きます⁠。その後⁠、次の操作を行います⁠。

  1. [⁠デザイン⁠] をクリ⁠ックし⁠、[⁠アニメ⁠ーシ⁠ョン⁠] をクリ⁠ックします⁠。
  2. リストから効果を選択して⁠、画像とテキストに適用します⁠。オプシ⁠ョンを選択すると⁠、ペ⁠ージにプレビ⁠ュ⁠ーが表示されます⁠。

アニメ⁠ーシ⁠ョン スタイルをブロ⁠ックする

ブロ⁠ック全体をアニメ⁠ーシ⁠ョン化するには⁠、次の設定から選択します⁠。

  • なし - サイト全体のアニメ⁠ーシ⁠ョン設定を無視し⁠、アニメ⁠ーシ⁠ョンは適用されません⁠。
  • サイトの既定 - ブロ⁠ックはサイト全体のアニメ⁠ーシ⁠ョン設定に合わせます⁠。
  • フ⁠ェ⁠ード イン - ブロ⁠ックがフ⁠ェ⁠ード インします⁠。
  • 上にスライド - ブロ⁠ックが上にスライドします⁠。
  • 水平クリ⁠ップ - 水平方向のレイヤ⁠ーにブロ⁠ックが読み込まれます⁠。
  • 垂直クリ⁠ップ - 垂直方向のレイヤ⁠ーにブロ⁠ックが読み込まれます⁠。
  • チルト ア⁠ップ - ブロ⁠ックが上方に傾いてズ⁠ーム インします⁠。
  • チルト ダウン - ブロ⁠ックが下方に傾いてズ⁠ーム インします⁠。
  • フ⁠ォ⁠ーカス イン - ぼやけたブロ⁠ックが表示されたのち⁠、ピントが合います⁠。
  • 滑り込み - 画像とテキストがどちらか一方から内側にスライドします⁠。
  • 滑り出し - 画像とテキストが中心から外側にスライドします⁠。
  • カスタム - 画像とテキストのアニメ⁠ーシ⁠ョンを個別に設定します⁠。

画像とテキストを別⁠々にアニメ⁠ーシ⁠ョンさせる場合は [⁠カスタム⁠] をクリ⁠ックし⁠、以下の設定から選択します⁠。

  • なし
  • フ⁠ェ⁠ード イン
  • 上にスライド
  • 下にスライド
  • 左からスライド
  • 右からスライド
  • フ⁠ォ⁠ーカス イン

これらの設定を使用したコラ⁠ージ⁠ュ画像ブロ⁠ックの例を次に示します⁠。

  • アニメ⁠ーシ⁠ョン - カスタム
  • 画像アニメ⁠ーシ⁠ョン - 右からスライド
  • テキスト アニメ⁠ーシ⁠ョン - 左からスライド
Image_blocks_animations_appear_as_the_block_loads.gif

トラブルシ⁠ュ⁠ーテ⁠ィング

画像エフ⁠ェクトがサイトに表示されない場合は⁠、次の点に注意してください⁠。

  • コンテンツがアニメ⁠ーシ⁠ョンしない場合は⁠、サポ⁠ートされているブラウザ⁠ーを使用していることを確認してください⁠。
  • 画像エフ⁠ェクトは⁠、WebGL (⁠デバイスのグラフ⁠ィ⁠ック プロセ⁠ッサ⁠ーと連動するツ⁠ール⁠) をサポ⁠ートするブラウザ⁠ーとデバイスにのみ表示されます⁠。ブラウザ⁠ーがこのツ⁠ールをサポ⁠ートしているかどうか確認するには⁠、get⁠.webgl⁠.orgにアクセスしてください⁠。ブラウザ⁠ーがWebGLをサポ⁠ートしていない場合⁠、セクシ⁠ョンの背景は静的な状態で表示されます⁠。

ヒント

サイトがバ⁠ージ⁠ョン7⁠.1の場合⁠、訪問者はデバイス設定から一部のアニメ⁠ーシ⁠ョン機能をオフにすることができます⁠。これにより⁠、サイトの閲覧時に表示される動きが少なくなります⁠。たとえば⁠、Macユ⁠ーザ⁠ーがデバイスで画面の動きを減らすことを選択した場合⁠、画像ブロ⁠ックや背景画像について有効にしたアニメ⁠ーシ⁠ョンは⁠、その訪問者に対してアニメ⁠ーシ⁠ョン表示されません⁠。

その他のアニメ⁠ーシ⁠ョンと効果

サイトのバ⁠ージ⁠ョンや効果を追加する場所によ⁠っては⁠、バナ⁠ー画像⁠、背景動画⁠、セクシ⁠ョン背景画像などの代替画像を使用して⁠、同様の効果やアニメ⁠ーシ⁠ョンを画像に適用することができます⁠。

各タイプの詳細については⁠、リンクされているガイドをご覧ください⁠。

効果 サイトのバ⁠ージ⁠ョン サイト エデ⁠ィタ⁠ー 備考

背景動画

7⁠.0⁠、7⁠.1

クラシ⁠ック⁠、創造エデ⁠ィタ⁠ー

バナ⁠ー画像と動画

7⁠.0

クラシ⁠ック

  • さまざまなテンプレ⁠ートでさまざまなタイプのバナ⁠ー画像がサポ⁠ートされています

セクシ⁠ョンの背景用ア⁠ート

7⁠.1

創造エデ⁠ィタ⁠ー

  • Squarespaceプラ⁠ットフ⁠ォ⁠ームで抽象的な形⁠、パタ⁠ーン⁠、色を使用して生成します
  • パタ⁠ーンをアニメ⁠ーシ⁠ョン化できます

セクシ⁠ョンの背景画像の効果

7⁠.1

創造エデ⁠ィタ⁠ー

サイト全体のアニメ⁠ーシ⁠ョン

7⁠.1

クラシ⁠ック⁠、創造エデ⁠ィタ⁠ー

  • サイトのほとんどのエリアに適用されますが⁠、一部のエリアでは他のエリアよりも効果が顕著に現れます⁠。
  • 主に⁠、ペ⁠ージをスクロ⁠ールするときに画像⁠、テキスト⁠、その他のブロ⁠ックがどのように表示されるかに影響します⁠。
  • 個⁠々のブロ⁠ックやその他のエリアのアニメ⁠ーシ⁠ョンはサイト全体のアニメ⁠ーシ⁠ョンをオ⁠ーバ⁠ーライドします⁠。
Footer Image
  • コミ⁠ュニテ⁠ィからサポ⁠ートを受ける

  • 高度なカスタマイズについて⁠、コミ⁠ュニテ⁠ィからサポ⁠ートを受けられます⁠。

  • Squarespace Expertを雇う

  • 経験豊富なデザイナ⁠ーや開発者から力を借りて⁠、オンラインで目を引くサイトを構築しまし⁠ょう⁠。

画像ブロックに効果とアニメーションを追加する