header-logo
はじめましょう!Wix でサイトやビジネスを構築する方法をご紹介します。テンプレートを使用してサイトをカスタマイズしたり、パートナーに依頼してウェブプレゼンスを確立しましょう。
サイトの作成Wix エディタの使い方とサイトコンテンツの管理方法について学びましょう。訪問者のプライバシーを保護し、サイトをよりアクセシブルにします。
アカウント・お支払いアカウント設定を確認し、定期購入とプレミアムプランを管理、請求内容を把握しましょう。
Wix モバイルアプリの使用Wix Owner アプリを使用してビジネスを効率的に運営し、訪問者と関わり、コミュニティを構築しましょう。
ドメインの接続ドメインの購入・接続・移管方法と、サイトデータを安全に保つ方法について理解しましょう。
ビジネスの管理支払いの受け付け、分析、訪問者とのつながりなど、ビジネスを構築し成長させるための適切なツールを見つけましょう。
サイトの宣伝検索エンジンでサイトを宣伝し、メルマガを送信し、有料広告を掲載する方法を学びましょう。
Wix Studio・パートナー・エンタープライズWix Studio、パートナー、エンタープライズアカウントを最大限に活用し、ビジネスを拡大しましょう。
ヘルプサイトのパフォーマンスや技術的な問題を解決するための情報を入手しましょう。製品ロードマップでは今後の機能について確認できます。
placeholder-preview-image
Wix Learnコースとチュートリアルでスキルを習得する。
Wix ブログウェブデザインやマーケティングなどのヒントを得る。
SEO ラーニングハブ検索エンジンからのトラフィックを増やす方法について学ぶ。
Website developmentフルスタックプラットフォームでカスタムサイトを構築する。
placeholder-preview-image
この記事では下記を説明します:
  • モバイルサイトからセクションを非表示にする
  • モバイルサイトのセクションを並び替える
  • セクションにスクロールエフェクトを追加する
  • セクションのシェイプ区切りをカスタマイズする

Wix エディタ:モバイルサイトのセクションを管理する

この記事内
  • モバイルサイトからセクションを非表示にする
  • モバイルサイトのセクションを並び替える
  • セクションにスクロールエフェクトを追加する
  • セクションのシェイプ区切りをカスタマイズする
コンテンツが整理されて表示されるように、サイトはいくつかのセクションに分かれています。また、セクションごとに分けることでページやパーツを簡単に配置することもできます。
モバイルサイトのセクションを管理して、モバイルサイト訪問者にすっきりとしたレイアウトとスムーズな体験を提供しましょう。

モバイルサイトからセクションを非表示にする

モバイル版サイトのセクションを簡単に非表示にして、訪問者に合わせてカスタマイズすることができます。これはデスクトップサイトには影響しないため、気が変わった場合は、いつでもセクションを再表示できます。

セクションを非表示にする方法:

  1. モバイルエディタ内でセクションをクリックします。
  2. 「非表示」アイコン  をクリックします。
モバイルエディタでセクションが選択されています。カーソルが「非表示」アイコンにマウスオーバーしています。

非表示のセクションを表示する方法:

  1. モバイルエディタ左側で「モバイル上で非表示」アイコン  をクリックします。
  2. 該当するセクション横の「表示」をクリックします。
「モバイル上で非表示」パネル。カーソルが非表示にしたセクション横の「表示」ボタンにマウスオーバーしています。

モバイルサイトのセクションを並び替える

セクションを移動させて、モバイルサイトに表示される情報の順序を整理します。これは、モバイル版のサイトで、地図や会社の電話番号など、サイト上のさまざまなコンテンツを強調したい場合に特に便利です。

セクションを並び替える方法:

  1. エディタ上部のツールバーで「ズームアウト」アイコン  をクリックします。
  2. セクションをクリックし、いずれかの矢印をクリックします:
    • セクションを下に移動 :選択したセクションをその下のセクションの下部に移動させます。
    • セクションを上に移動 :選択したセクションをその上のセクションの上部に移動させます。
モバイルエディタでセクションが選択されています。カーソルが下に移動オプションにマウスオーバーしています。
  1. (オプション):セクションの下部をドラッグしてセクションの間に隙間を作成したり、セクションとそのパーツを一緒に移動させたりすることもできます。
モバイルサイトでセクションをドラッグしている GIF。
ヒント:
セクション内のパーツを再配置する際は、グリッド線を使用してパーツを等間隔に調整します。

セクションにスクロールエフェクトを追加する

セクションの背景にクールなスクロールエフェクトを追加して、モバイルサイト訪問者に目を引く体験を作りましょう。背景の種類(単色、画像、動画)に応じて、さまざまなエフェクトから選択し、モバイルサイトをより魅力的にすることができます。

セクションの背景にスクロールエフェクトを追加する方法:

  1. モバイルエディタ内でセクションをクリックします。
  2. 「アニメーション」アイコン  をクリックします。
  3. スクロールエフェクトを選択します。
モバイルエディタにおけるセクションのスクロールエフェクトパネル。「傾斜」オプションが選択されています。
備考:
表示されるエフェクトオプションは、セクションの背景の種類によって異なります。 モバイルサイトのスクロールエフェクトについてはこちら

セクションのシェイプ区切りをカスタマイズする

シェイプ区切りは、セクションのコンテンツを整理するために使用するグラフィックシェイプです。デスクトップエディタのセクションにシェイプ区切りを追加すると、自動的にモバイルサイトに引き継がれます。
必要に応じて、区切りを調整してカスタマイズしたり、モバイルサイトで非表示にすることができます。これはデスクトップサイトには影響しないため、モバイルサイト訪問者のニーズに最適なレイアウトを作成できます。

モバイルでシェイプ区切りを調整する方法:

  1. モバイルエディタ内でセクションをダブルクリックします。
  2. 「シェイプ区切り」アイコン  をクリックします。
  3. 「上」または「下」タブを選択します(区切りを追加した場所によって異なります)。
  4. モバイルサイトのシェイプ区切りを調整する方法を選択します:
    • シェイプを変更する: セクションの新しいシェイプを選択します:
      • Wix 画像・動画素材:パネルで新しいオプションを選択するか、「その他のシェイプ」をクリックして Wix カタログからオプションを選択します。
      • 独自のシェイプを使用する:「もっと見る」をクリックしてメディアマネージャーを開き、「+アップロード」を選択してアップロードし、独自のシェイプをセクションに適用します。
    • デザインをカスタマイズする:「デザインを編集」をクリックして、モバイルサイトの区切りの外観を変更します。 モバイル用にシェイプ区切りをカスタマイズする方法はこちら
    • 区切りを削除する:パネルで「なし」をクリックして、モバイルサイトのセクションから区切りを削除します。
モバイルエディタ内のセクションの区切りの「デザインを編集」パネル。高さの設定を調整しています。
注意:
「モバイルに追加」パネルから、モバイル専用のシェイプ区切りをセクションに追加することはできません。デスクトップエディタから追加したシェイプ区切りのみを変更または調整できます。デスクトップでシェイプ区切りを追加する方法はこちら

Helpmate

こんにちは、さん

さらにヘルプが必要ですか?
Unlock personalized helpLog in to get the most out of Helpmate.