Wix ヘルプセンター
    ホーム
  1. サイトの作成
  2. Editor X
  3. Editor X でのデザイン
    4. Editor X：カスタムカーソルを追加する

Editor X：カスタムカーソルを追加する

読了時間：5分
Editor X は、代理店とフリーランサー向けの新しいプラットフォームである Wix Studio に移行します。Wix Studio について
サイトのブランドや雰囲気に合わせ、マウスカーソルをカスタマイズしてみましょう。カスタムカーソルは、訪問者が操作する特定のページ、セクション、または要素（コンテナや画像など）に適用することができます。カーソルは、豊富なデザインの中から選択するか、独自の画像ファイルをアップロードして追加することができ、必要に応じてサイズを変更することもできます。
ヒント：
カスタムカーソルには、JPG、PNG、SVG のいずれかの画像ファイルを使用することができます。カーソルが見やすく表示されるよう、カスタムカーソルには背景と対照的な色で、境界線が鮮明なものを使用してください。
ページのセクションごとに、異なるカスタムカーソルを適用したサイトの一例。
この記事では、下記の項目について説明します：
ヒント：
親要素と子要素に異なるカスタムカーソルを追加すると、サイトのエクスペリエンスをさらにカスタマイズすることができます。これにより、たとえば訪問者が子要素を操作した際、親要素に適用したカーソルではなく、子要素独自のカーソルを表示させることができるようになります。

カスタムカーソルを追加する

訪問者が特定のページ、セクション、または要素でマウスを操作した際に表示されるカーソルを変更します。カスタムカーソルは、豊富なデザインから選択して追加することも、独自の画像ファイル（JPG、PNG、SVG）をアップロードして追加することも可能です。
注意：
カーソルに加えた変更はサイトの編集中にキャンバスには表示されません。カーソルの動作を確認するには、「プレビュー」に移動するか、ライブサイトを表示してください。

カスタムカーソルを追加する方法：

  1. Editor X で該当するページ、セクション、または要素を選択します。
  2. 上部の「要素設定パネル」アイコン  をクリックします。
  3. 「デザイン」タブ  をクリックします。
  4. 「カーソル」をクリックします。
  5. カーソルを追加します：
    1. 「追加」をクリックします。
    2. （メディアマネージャー内）表示されるカーソルのいずれかを選択するか、「画像または SVG ファイルを追加」をクリックして独自のファイルをアップロードします。
    3. 準備ができたら、「サイトに追加する」をクリックします。
  6. （オプション）右上の「プレビュー」をクリックして、サイト上でカーソルがどのように表示されるかを確認します。
要素設定パネルで、ページのヘッダーにカスタムカーソルを追加する様子を示したスクリーンショット。
次のステップ：
  • 他のページにもカーソルを適用する場合は、「その他のページに適用する」をクリックすると、カーソルを他のサイトページにすばやく追加することができます。
  • 別の画像やサイズを選択して、ブレイクポイントごとにカーソルをカスタマイズすることもできます。

カスタムカーソルのサイズを変更する

サイトで適切に表示されるよう、カーソルのサイズを変更します。
カーソルのサイズは、16x16 ～ 128x128 ピクセルの範囲内で設定することをおすすめします。カーソルが推奨サイズよりも大きい場合は、訪問者のブラウザにカーソルが表示されなくなる可能性があります。また、逆に推奨サイズよりも小さい場合は、訪問者にカーソルが不鮮明に表示される恐れがあります。

カスタムカーソルのサイズを変更する方法：

  1. Editor X で該当するページ、セクション、または要素を選択します。
  2. 上部の「要素設定パネル」アイコン  をクリックします。
  3. 「デザイン」タブ  をクリックします。
  4. 「カーソル」をクリックします。
  5. 「サイズ」下のスライダーをドラッグします。
要素設定パネルで、「カーソル」下のスライダーをドラッグして、カーソルのサイズを変更する様子を示したスクリーンショット。
ヒント：
「メディア 」下のプレビューには、ライブサイトでカーソルを表示した際の実際のサイズが表示されます。

カスタムカーソルを変更する

追加したカスタムカーソルは、いつでも変更することができます。表示されるカーソルのいずれかを選択するか、新しい画像ファイルをアップロードしてカーソルを変更します。

カスタムカーソルを変更する方法：

  1. Editor X で該当するページ、セクション、または要素を選択します。
  2. 上部の「要素設定パネル」アイコン  をクリックします。
  3. 「デザイン」タブ  をクリックします。
  4. 「カーソル」をクリックします。
  5. 「メディアを変更」をクリックします。
  6. （メディアマネージャー内）カーソルを選択するか、新しいカーソルをアップロードします。
  7. 「更新」をクリックします。
要素設定パネルで、「カーソル」下の「メディアを変更」をクリックして、新しいカーソルに変更する様子を示したスクリーンショット。

カスタムカーソルを削除する

カスタムカーソルは、必要に応じていつでも削除することができます。これにより、訪問者に再びデフォルトのカーソルを表示させることができます。

カスタムカーソルを削除する方法：

  1. Editor X で該当するページ、セクション、または要素を選択します。
  2. 上部の「要素設定パネル」アイコン  をクリックします。
  3. 「デザイン」タブ  をクリックします。
  4. 「カーソル」をクリックします。
  5. 「メディアを変更」横の「削除」アイコン をクリックします。
要素設定パネルでメディアを削除しているスクリーンショット

お役に立ちましたか？

|

この記事では下記を説明します：

  • カスタムカーソルを追加する
  • カスタムカーソルのサイズを変更する
  • カスタムカーソルを変更する
  • カスタムカーソルを削除する