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

Wix Studio エディタ:サイトスタイルを管理する

6分
サイトのテキストスタイル、色、ページトランジションをすべて一か所で管理します。時間を節約し、デザインの一貫性を保つことができます。
Wix Studio エディタのサイトスタイルパネルのすべてのタブが表示された GIF
この記事では、以下の項目について説明します:

タイポグラフィスタイルを編集する

6つの見出し(H1 - H6)と 3つの段落スタイルの合計 9つのタイポグラフィスタイルをカスタマイズして保存し、サイト全体で使用することができます。各スタイルのフォント、色、書式設定を変更して、希望する見た目に合わせます。
ヒント:
H1 - H6 は見出しタグで、これらのタイトルに自動的に割り当てられます。見出しタグに従ってタイトルをトップダウンの階層構造に保つことで、SEO とアクセシビリティの両方に役立ちます。

タイポグラフィスタイルを更新する方法:

  1. エディタ左側の「サイトスタイル をクリックします。
  2. タイポグラフィ」をクリックします。
  3. 実行する内容を選択します:
サイトスタイルパネルの「タイポグラフィ」タブで、見出し 1 のスタイルを編集しています
重いカスタムフォントを使用している場合:
パネルの下部にある「デフォルトのフォントでサイトの読み込みを最適化」トグルを有効にします。このトグルを有効にすると、カスタムフォントが完全にダウンロードされるまで、訪問者のブラウザに読み込み速度の速いデフォルトのフォントを一時的に表示するように指示します。
デフォルトのフォントを最初に読み込むために、Wix Studio エディタでクリックする必要があるトグル

ページにテキストのスタイルを追加する

保存したタイトルと段落は、「要素を追加」パネルから使用できるようになります。「テキスト」をクリックし、「テキストテーマ」下で該当するスタイルを希望の場所にドラッグします。
「要素を追加」パネルで利用可能なテキストテーマのスクリーンショット

テキスト要素にスタイルを適用する

ページ上の既存のテキスト要素にタイポグラフィスタイルを適用することもできます。要素上で「テキストを編集」をクリックし、要素設定パネルの「テーマ」ドロップダウンから該当するスタイルを選択します。
テキスト要素にタイポグラフィスタイルを適用できる要素設定パネルの「デザイン」セクションのスクリーンショット
要素のスタイル(テーマ)を選択した後に要素のフォント、サイズ、または色を変更すると、「デザインオーバーライド」が作成されます。つまり、選択したスタイルの更新はこのテキスト要素には適用されません。
ただし、オーバーライドを使用してテキスト要素にスタイルを再度適用することはできます。「テーマ」ドロップダウンを開き、下部の「変更をリセット」をクリックします。
オプションをクリックして、テキスト要素の変更をリセットし、選択したタイポグラフィスタイルを再度適用しています

サイトの色を変更する

サイトのカラーパレットを定義します。カラーパレットは、サイト内での用途や場所を反映したカテゴリー別に分けられています。たとえば、アクションの色はボタンやリンクでよく使用されます。
各カテゴリーのメインカラー、またはパレット内の特定の色合いをカスタマイズできます。
ヒント:
このアクションは、変更したい色の要素に即座に影響します。たとえば、追加したおすすめ要素や、この色を使用した他の要素などです。

サイトの色を変更する方法:

  1. エディタ左側の「サイトスタイル をクリックします。
  2. 」をクリックします。
  3. 実行する内容を選択します:
    • 特定の色合いを調整する:色合いにマウスオーバーし、「編集」アイコン  をクリックします。
    • 色を変更する:「カラー範囲を編集」アイコン  をクリックします。
サイトスタイルパネルの「色」タブのスクリーンショット。色合いにマウスオーバーして編集しています。

ページトランジションを追加する

ページトランジションを追加して、訪問者にとってより魅力的なナビゲーション体験にします。「サイトスタイル」パネルからトランジションを選択すると、サイトのすべてのページに表示されます。

ページトランジションを追加する方法:

  1. エディタ左側の「サイトスタイル をクリックします。
  2. ページトランジション」をクリックします。
  3. リストからトランジションを選択します:
    • なし:訪問者がページ間を移動しても、トランジションは表示されません。
    • アウトイン:現在のページがフェードアウトし、新しいページがフェードインします。
サイトスタイルパネルの「ページトランジション」タブのスクリーンショット
Wix Studio エディタのサイトスタイルパネルのすべてのタブが表示された GIF
サイトスタイルパネルの「タイポグラフィ」タブで、見出し 1 のスタイルを編集しています
「要素を追加」パネルで利用可能なテキストテーマのスクリーンショット
テキスト要素にタイポグラフィスタイルを適用できる要素設定パネルの「デザイン」セクションのスクリーンショット
オプションをクリックして、テキスト要素の変更をリセットし、選択したタイポグラフィスタイルを再度適用しています
サイトスタイルパネルの「色」タブのスクリーンショット。色合いにマウスオーバーして編集しています。
サイトスタイルパネルの「ページトランジション」タブのスクリーンショット