Wix エディタ:モバイルエディタについて
読了時間:11分
モバイルでサイトを素敵に見せたいですか?モバイルエディタを使用して、機能的でプロフェッショナルなモバイル表示を作成しましょう。
ページのレイアウトを最適化し、背景を変更し、デスクトップコンテンツを非表示にし、モバイル専用パーツに置き換えます。さらにエクスペリエンスを向上させるために、「トップへ戻る」ボタンやモバイルアクションバーなどのパーツを追加できます。
この記事では、次の項目について説明します:
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2021/05/25/71c90c5e-7959-4bd8-ba1e-8010b2f40c61/ec3592b0-3f92-4e66-83d8-7407801f7265.gif)
重要:
互換性のあるモバイル端末とブラウザの一覧はこちらをご覧ください。
モバイルエディタを使用する
エディタ上部にあるモバイルアイコン
をクリックすると、いつでもモバイルエディタにアクセスできます。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2021/05/25/3df957ac-4bc1-43e6-9df7-1fa0ef4f381d/116d3875-ded3-4d24-9b66-a4fa54c9de2a.png)
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2021/07/02/d23789a3-c9dc-409d-aa1e-eddb8b7042cf/3cbff571-6aa4-4d96-903f-d8bceb3ca69c.png)
モバイル表示はデスクトップ表示を反映したもので、すべて同じパーツとコンテンツが表示されます。フォント、画像、パーツは自動的にサイズ変更され、最適な表示が可能になるため、モバイル体験を真にユニークなものにすることができます。
左側のメニュー
エディタの左側には、モバイル向け表示をカスタマイズするために必要なツールがあります。新しいパーツの追加、サイトページ間の移動、非表示のデスクトップパーツへのアクセス、ページレイアウト最適化などがあります。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2021/05/25/c844c407-4565-4a2d-b11c-66a01cf321ff/e7c70f46-ae76-49df-a4fd-0b7f2f571440.gif)
非表示のデスクトップパーツ
Wix は、デスクトップサイトのコンテンツを使用して、モバイル版のサイトを自動的に作成します。このプロセスでは、モバイル向けに最適化されていないパーツは自動的に非表示になります(例:ホバーアクション、サードパーティ製アプリなど)。
エディタ左側にある「非表示のパーツ」アイコン
をクリックします。モバイルに表示したくないパーツがある場合は、必要に応じて非表示にしたり、再表示したりできます。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2021/05/25/e6ab1674-64f1-47d3-b995-89831da1eef5/60cd4cc7-f184-4da4-9872-dc46e49eff00.png)
こちらをクリックして手順を確認しましょう
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2021/07/02/a42f9f5c-01a7-4e94-bb2e-06da772c59da/df889d4b-a50e-432d-90ad-80ffdf19275c.png)
モバイル表示をカスタマイズする
モバイルエディタを使用すると、サイトをモバイルに合わせて自由にカスタマイズできます。細かい調整をしてデスクトップサイトと同じ雰囲気を保つことも、モバイル向けに異なるデザインを作成することもできます。モバイルでデザインを変更しても、デスクトップ版には影響しません。
以下をクリックして詳細をご覧ください:
モバイルテキストのサイズを変更する
パーツにアニメーションを追加する
モバイルメニューをカスタマイズする
ページセクションを並べ替える
ページ背景を変更する
モバイル専用パーツを追加する
モバイルエディタでは、必要な数のパーツをモバイル表示に追加できます。これらのパーツはモバイル向けに完全に最適化されているため、サイズを気にする必要はありません。「追加」パネルからテキスト、画像、ボタン、埋め込みなどを直接追加できます。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/b05f5084-8296-4ca9-8f22-b63e9f9efe42/2022/07/11/61a873c3-1f71-4a97-85ba-7fedcf6629c0/4e0c4efd-599b-4726-bc9b-e9b462466548.jpg)
モバイルで追加したパーツは、デスクトップ版のサイトには表示されません。モバイル専用パーツにはアイコン
でマークされるため、何がどこに表示されるかを簡単に知ることができます。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2021/05/25/29ba2f12-e49c-4224-adb9-a0a0385e5c07/35ec17c4-2c1b-4855-bf63-c52b2c49d9aa.png)
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2021/07/02/b53bffa5-f15f-40e0-b0b9-0240328d19a6/64dec916-9db5-43a5-b859-82ab61e1a20b.png)
ヒント:
モバイル専用パーツはデスクトップエディタに貼り付けることはできません。追加パネルを使用して、デスクトップエディタにパーツを追加できます。
モバイルツール
モバイルツールパネルには、エンゲージメントを高め、モバイルでのサイトナビゲーションを簡単にする便利な機能があります。
訪問者を歓迎するウェルカム画面、行動を促すためのモバイルアクションバー、長いページの下部にトップへ戻るを追加しましょう。Android で Chrome を使用している訪問者は、サイトにアクセスした後にブラウザのスタイルカラーを変更することもできます。
こちらをクリックして手順を確認しましょう
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2021/07/02/8eb7eac6-92ae-4f1a-a4ac-a89552644b93/ef59686b-e76b-4955-a891-c4a4fc120483.png)
ページレイアウト最適化を使用する
重要:
新エディタを使用してサイトを構築している場合、ページレイアウト最適化ツールにはアクセスできません。これは、Wix が新エディタで自動的にモバイルレイアウトを最適化するためです。
ページレイアウト最適化は、サイトページのモバイルレイアウトを更新するのに役立つツールです。モバイル用に最適なレイアウトになるように、ページ上のパーツを自動的に並べ替えます。
こちらをクリックして手順を確認しましょう
最適化されたレイアウトが気に入らない場合:
「元に戻す」をクリックすると、元のページレイアウトに戻すことができます。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2021/07/02/3390ba7d-916a-4cbc-a44f-72e0bd48b57a/6044799a-dd12-4053-8f24-d3ecd0056ae2.png)
デスクトップ版を使用する場合:
お役に立ちましたか?
|