header-logo
Wix の使用方法を学び、サイトとビジネスを構築する。
直感的な Wix 機能でサイトをデザインして管理する。
定期購入、プラン、請求を管理する。
ビジネスを運営し、サイト会員とつながる。
ドメインの購入、サイトへの接続と移管方法を学ぶ。
ビジネスとウェブプレゼンスを成長させるツールを入手する。
SEO とマーケティングツールで知名度を上げる。
より効率的な作業を支援する高度な機能を利用する。
解決策や既知の問題について確認し、問い合わせる。
placeholder-preview-image
コースとチュートリアルでスキルを習得する。
ウェブデザインやマーケティングなどのヒントを得る。
検索エンジンからのトラフィックを増やす方法について学ぶ。
フルスタックプラットフォームでカスタムサイトを構築する。
あなたの目標達成をサポートするエキスパートを見つけましょう。
placeholder-preview-image

Wix エディタ:サイトのパーツの順序について

4分
ライブサイトのパーツは、DOM 順序と呼ばれる特定の順序で読み込まれて表示される仕組みになっています。この順序は、視覚的な役割だけでなく、アクセシビリティの点でも非常に重要な役割を担っています。
サイトのパーツが表示される順序は自動で決まりますが、必要に応じて手動で変更することができます。
この記事では、以下の項目について説明します:

サイトのパーツが表示される順序

サイトに追加したパーツは、ページのレイヤーに組み込まれ、特定の順序で表示されます。この順序は、パーツの読み込みと表示順を指定する DOM 順序によって制御されています。
パーツが表示される順序は、サイトのパフォーマンスにとって非常に重要です。また、この DOM 順序は、訪問者がスクリーンリーダーなどの支援技術や Tab キーを使用してページ内を移動する際の順序としても使用されるため、アクセシビリティの観点からも欠かすことができないものとなっています。
なお、Wix では一般的にページを読み進める方向に合わせ、DOM 順序は自動的に左から右、上から下になるよう設定されます。

パーツが表示される順序を手動で変更する

自動 DOM 順序は、デスクトップサイトでは自動的に有効になります。DOM 順序がサイトの視覚的な順序と一致している場合は、順序はそのままにしておくことをおすすめします。ただし、DOM 順序がサイトの視覚的な順序と一致していない場合は、アクセシビリティウィザードを使用して、それらを手動で変更することができます。
サイトの DOM 順序を確認する方法:
エディタのプレビューでサイトを表示するか、実際のライブサイトを表示し、キーボードの「Tab キー」を使用してパーツ間を移動することで、サイトの DOM 順序を確認することができます。

DOM 設定を変更する方法:

  1. エディタトップバーにある「設定」を選択します。
  2. アクセシビリティ設定」を選択します。
  3. ウィザード右上の「その他のアクション」アイコン  を選択します。
  4. 高度なアクセシビリティ設定」を選択します。
  5. 自動 DOM 順序」を選択します。
  6. パネルのトグルを無効にします。
  7. ポップアップ画面で「オフにする」を選択します。
  8. エディタ左下で「レイヤー」アイコン  を選択します。
  9. リストを確認し、重複するパーツを削除します。これには、スクリーンリーダー使用者を混乱させる可能性のある不必要な重複パーツを含みます。
  10. 残りのパーツをドラッグし、希望の順序に変更します。

潜在的な問題とトラブルシューティングの手順

サイトの DOM 順序に問題があると、サイトのパフォーマンスやアクセシビリティに影響が生じる可能性があります。サイトの DOM 順序に関する潜在的な問題とそれらの解決方法については、以下をクリックしてご確認ください。