システムの更新情報をみる

ご利用中のSquare サービスに影響を及ぼす可能性のある問題が発生しています。詳細については、弊社のステータスページに随時更新いたします。

ホーム>サイトデザインおよびコンテンツ

Square オンラインビジネスの画像や背景をカスタマイズする

Square オンラインビジネス

無料のオンラインストアで販売チャネルを増やしてみませんか?

ウェブサイトの画像は、サイトに個性を与え、売上を伸ばし、オンラインで存在感をアピールするのに役立つ重要な要素です。Square オンラインビジネスのサイトエディタには大半のセクションに画像追加オプションがあり、以下のようなカスタマイズができます。

  • 画像ギャラリーセクションでは、複数の画像をアップロードし、静止画ギャラリーやスライドショーなどから適切なレイアウトスタイルを選択できます。

  • Instagramフィードセクションでは、Instagramアカウントと連携し、ソーシャルネットワークの画像をオンラインで同期、表示できます。

  • おすすめ商品セクションでは、お客さまがすぐに注文、購入できるよう、人気の商品やカテゴリを表示できます。

  • 一般のテキストセクションと画像セクションでは、複数のコンテンツフォームや、追加のカスタマイズオプションが利用可能です。

  • その他のほとんどのセクションに背景画像を追加できます。

ご注意:エディタで、商品とカテゴリの画像を直接Square オンラインビジネスに追加することもできます。

Square オンラインビジネスのサイトで背景以外の画像と背景画像を管理するためのヒントをご紹介します。

背景以外の画像と背景画像

Square-Online-Non-Background-vs-Background-Images-JP

サイトエディタで扱う画像は、以下の2つのタイプに大別できます。

  • 背景以外の画像:追加コンテンツの一種で、テキストと一緒にサイトに表示されます。通常は右クリックでコピーしたり、新しいブラウザタブで開いたりできます。前景画像と考えることもできます。

  • 背景画像:主要コンテンツではなく、背景以外の画像やテキストの背景(後ろ)に表示されます。サイトのデザインまたはスタイルの一部と考えることができ、右クリックでコピーしたり、新しいブラウザタブで開いたりはできません。

サイトに画像オプション付きセクションを追加する

Square-Online-Add-Section-with-Image-Option-JP

サイトに画像を追加するには、まずSquare オンラインビジネスのサイトの編集を開き、画像を追加するページを選ぶか、ページを新規作成するします。次に、[+] > [セクション] の順に選択してセクションメニューを開きます。

整理カテゴリのほとんどのセクションに、背景以外の画像が1つ含まれます。セクションを選び、ページでどのように見えるかを確認します。他のセクションを追加し、背景画像を編集することもできます。任意の画像を選んで [追加] を選択し、ページに追加します。

セクションに画像を追加する

Square-Online-Image-Asset-Manager-in-Editor-JA

セクションに画像を追加する手順は以下の通りです。

  • 背景以外の画像:編集パネル内の画像オプションで、[画像を追加] を選択します。

  • 背景画像:編集パネル内で [カスタマイズ] > [背景] の順に進み、ドロップダウンメニューから [画像] を選んで、[画像を追加] を選択します。

どちらの場合でもアセットマネージャーのポップアップウィンドウが開くので、画像を選択またはアップロードします。

画像管理ウィンドウを操作する

注意:プレミアム写真オプションにアクセスするには、Square オンラインビジネスのサイトのアップグレードが必要です。

画像管理ウィンドウでは、いくつかの方法で画像を追加することができます。

  • [マイ画像] では、選択されたウェブサイトにアップロードされた画像が一覧表示されます。複数のサイトをお持ちの場合は、「サイト」ドロップダウンメニューを使用して、対象のサイトに切り替えてください。
  • [マイロゴ] では、選択されたウェブサイトにアップロードされたロゴ画像が一覧表示されます。複数のサイトをお持ちの場合は、「サイト」ドロップダウンメニューを使用して、対象のサイトに切り替えてください。
  • [プレミアム写真] を選択すると、1億点以上の最高品質で使用料無料の写真にアクセスできます(アップグレードが必要)。
  • [Instagram] を選択すると、お使いのInstagramアカウントに接続して、サイト上でInstagramの画像を利用することができます。

利用可能な画像ファイル形式

新しい画像をアップロードするには、画像管理ウィンドウで [マイ画像] または [マイロゴ] にアクセスし、お持ちのコンピューターからアップロードしたいファイルのリンクを選択します。アップロード可能な画像の形式は以下のとおりです。

  • JPG
  • PNG
  • GIF

画像に関する推奨事項

Square オンラインビジネスで作成したサイトでの画像の利用については、以下の推奨事項をご覧ください。

背景以外の画像:

  • サイト上のページに背景以外の画像を追加する際は、長辺が1000ピクセル以下のJPEGファイルを使用することをおすすめします。
  • 高画質の画像をサイト上で表示させたい場合は、フォトグラファー向けの写真ホスティングサイト(Flickr.comなど)を利用して、そこから画像をサイトへと埋め込むことをおすすめします。Squareでは、数多くのサイトで使用される画像をすべてホストする必要があるため、圧縮されていない高解像度の画像に対応するよう設計されていません。画質の低下を防ぐためにも、他社の画像ホスティングサービスの利用をご検討ください。

背景画像:

  • サイトデザインの一部として表示される画像(ヘッダー、バナー、背景画像など)については、2,000x1,000ピクセル以上の画像を使用することをおすすめします。この条件を満たす画像では、どの画面サイズでも見映えよく表示されます。

セクショングループを編集する

セクションの一部(グループと呼ばれる)をコピーできるレイアウトもあり、ページに別のセクションを追加しなくてもコンテンツや画像を追加することができます。編集パネルの [グループ] に、現在のセクションに含まれるグループのリストが表示されます。

新しい画像とテキストのグループ(デフォルトのテキストが使用されます)を挿入するには、[グループを追加] を選択します。既存のグループをコピーするには、[•••] > [複製] を選択します。新規作成または複製したグループが編集パネルのリストに追加されます。グループをドラッグしてリスト内の別の場所にドラッグすると、ページ上のグループの順序を変更できます。

背景以外の画像を編集する

Square-Online-Edit-Non-Background-Image-JP

背景以外の画像を編集する

Square オンラインビジネスのサイトで使用する背景以外の画像を編集するには、次の手順を行います。

  1. Square オンラインビジネスのサイトエディタから、編集する画像があるページにアクセスします。
  2. 画像のあるセクションを選択して、画像自体を選択すると編集パネル内に画像オプションが表示されます。
  3. [編集] を選択して、必要に応じて各要素を調整します。調整した内容を画像に適用したくない場合は、[元に戻す] を選択します。
  4. 編集を [保存] したらサイトを [公開] して、変更点が反映されていることを確認します。

注意:選択中のレイアウトの種類により、表示される画像編集オプションの数は異なります。

背景以外の画像を置き換える・削除する

別の画像をアップロードするには、編集パネルの [置き換える] を選択します。また画像を削除したい場合は、ゴミ箱のアイコンを選択します。元の状態に戻したい場合は、矢印をクリックすると、1つ前の状態に戻ります。

背景以外の画像にリンクや代替テキストを追加する

編集パネルで画像にリンクを追加したり代替テキスト追加したりすることで、SEO対策ができるほか、ウェブサイトアクセシビリティの改善にもつながります。詳しくは、サイトにリンクを追加するウェブサイトのページを最適化(SEO)するをご覧ください。

注意:「ウェブアクセシビリティ」とは、身体に障がいを持つ方など、さまざまな利用者を考慮して、どなたにとっても使用しやすいサイトを構築することです。画像アクセシビリティの向上についてさらに詳しくは、Square オンラインビジネスで作成したサイトのウェブアクセシビリティをご覧ください。

背景以外の画像に右クリック防止を追加する

オンラインで公開する画像を許可なく使用されることのないよう、完全に保護するのは難しいのが現状です。ただし不正利用の防止対策として、Square オンラインビジネスのサイトでパスワードによるページ保護機能を使用することで、対象ページのコンテンツの表示を制限することができます。

また一部のブラウザで、かんたんに画像をコピー・保存できないようにするため、ページ上での右クリックを無効にすることもできます。この操作で完全に保護されるわけではありませんが、ある程度のコピー行為を抑えるのに役立ちます。右クリックを無効にするには、次の手順を行います。

  1. Square オンラインビジネスの概要ページから、[設定] > [追跡ツール] の順に選択します。
  2. [新規コードを追加] を選択します。
  3. ポップアップウィンドウ内の対応するフィールドに、コードの名前とコード自体を入力します。コードの例は、以下をご参照ください。
  4. フッターにコードを配置するには、[body末尾] を選択します。
  5. [保存] を選択します。
  6. Square オンラインビジネスのサイトエディタからサイトを [公開] して、変更がライブになっているか確認します。

コードの例: <body oncontextmenu=”return false;”>

こちらでご紹介した方法のほかにも、デジタル画像を扱うビジネス(例:写真家)では、ウォーターマークやデジタルスタンプを画像に追加する「グラフィックプログラム」が利用されています。これは、画像の不正利用を直接的に防ぐものではありませんが、ウォーターマークにより画像が二次編集に適さない状態になっているため、間接的な不正利用対策として役立ちます。

背景画像を編集する

Square-Online-Edit-Background-Image-JP

背景画像を編集する

背景画像の明暗を調整して、Square オンラインビジネスのセクションの読みやすさを改善できます。明るい画像は、デフォルトの暗いテキストの色に対してより明るくでき、暗い画像は、デフォルトの明るいテキストの色に対してより暗くできます。Square オンラインビジネスのサイトのセクションの読みやすさを調整するには、以下の手順を行います。

  1. Square オンラインビジネスのサイトエディタから、調整する背景画像があるページにアクセスします。
  2. 画像のあるセクションを選択して、編集パネルから [カスタマイズ] > [背景] の順にアクセスします。
  3. [編集] を選択し、スライダーを動かして画像の読みやすさを調整します。
  4. 編集を [保存] したらサイトを [公開] して、変更点が反映されていることを確認します。

必要に応じて、背景画像にズームしたり傾き調整したりもできます。

背景画像を置き換える・削除する

別の画像をアップロードするには、編集パネル内で [「…」] > [置き換え] の順に選択します。また画像を削除したい場合は、ゴミ箱のアイコンを選択します。元の状態に戻したい場合は、「元に戻す」矢印を使用すると、1つ前の状態に戻ります。

背景画像を色に変更する

Square オンラインビジネスのセクションの背景画像を色に変更するには、以下の手順を行います。

  1. Square オンラインビジネスのサイトエディタから、調整する背景画像があるページにアクセスします。
  2. 画像のあるセクションを選択して、編集パネルから [カスタマイズ] > [背景] の順にアクセスします。
  3. ドロップダウンメニューから [選択済みの色] を選択して、あなたが選択したサイト色に変更します。または [カスタム色] を選択して、別の色に変更します。

詳細については、Square オンラインビジネスでウェブサイトの色を選択するをご覧ください。

背景ビデオを編集する

ご注意:ビデオを背景として使用するには、Square オンラインビジネスのサブスクリプションのアップグレードが必要です。

背景には高画質のGIFのほか独自のビデオもアップロードでき、コンテンツに躍動感が生まれます。まず、ウェブページのメインバナーセクションを選択し、編集パネルで背景オプションとして [ビデオ] を選択します。ビデオファイルは、ここからいつでも変更、削除できます。また、ビデオの開始時間、終了時間、再生速度を調整することも可能です。

ご注意:ビデオファイルの最大サイズは20GBです。

また、YouTubeなどのビデオホストや独自のファイルを利用すれば、背景以外のビデオにサウンドやその他の機能を付けてサイトに追加できます。詳しくは、ウェブサイト上の動画をご覧ください。

モバイルサイトの画像オプション

モバイル用ウェブサイトとパソコン用ウェブサイトを別々に編集することはできませんが、画像オプションはモバイル用ウェブサイト専用のものが用意されています。これを使用し、端末の画面サイズに合わせて画像を表示できます。これには以下のオプションがあります。

モバイルサイトで使用する背景画像の焦点を調整する

Square オンラインビジネスで作成したモバイルサイトで、セクションの背景画像のフォーカス(焦点)を調整することができます。これにより、その画像のオブジェクトに注目を集めることができます。操作は次の手順を行います。

  1. Square オンラインビジネスのサイトエディタから、モバイルサイト用に背景画像を設定したいページにアクセスします。
  2. 画像のあるセクションを選択して、編集パネルから [カスタマイズ] > [背景] の順に選択します。
  3. 引き続き、[] > [画像の主題を設定] の順に選択します。
  4. 背景画像の中心オブジェクトに、カーソル(点)を合わせます。これでモバイル版サイトでも常に、画像のオブジェクトが中心で表示されるようになります。
  5. 完了したら [保存] を選択します。モバイルビューに切り替えると、この変更が行われたモバイルサイトを確認できます。必要に応じて、デスクトップビューで再調整を行います。
  6. サイトを [公開] して、変更がライブになっているか確認します。

トラブルシューティング

Square オンラインビジネスに複数の画像を同じファイル名でアップロードした場合、実際のウェブサイトで画像が思ったように表示されないことがあります。たとえば、画像が別のページに突然表示される、画像の場所が入れ替わる、画像がまったく表示されないなどの問題が生じる可能性があります。このような事態を避けるため、各画像に固有の名前を付けてからサイトエディタにアップロードしてください。

すでにこの問題が生じている場合は、以下の手順でトラブルシューティングを試みます。

  1. Square オンラインビジネスのサイトの編集で、正しく表示されない画像をすべて削除します。

  2. パソコンまたは端末で、すべての画像に固有のファイル名を付けます。

  3. サイトエディタで、画像をウェブサイトに再アップロードします。

  4. [公開] をクリックして、変更点がサイトに反映されているかを確認します。

お探しの答えが見当たりませんか?