Wix Studio エディタ:サイトスタイルを管理する
読了時間:5分
サイトのテキストスタイル、色、ページトランジションをすべて一か所で管理します。時間を節約し、デザインの一貫性を保つことができます。
サイトスタイルにアクセスする方法
![サイトスタイルパネルのすべてのタブが表示された GIF](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/12/23/91d430c8-55de-4f39-abaf-72c27fb1f875/966a7046-df77-425e-b4e7-c8990dc6a628.gif)
この記事では、以下の項目について説明します:
タイポグラフィスタイルを編集する
6つの見出し(H1 - H6)と 3つの段落スタイルの合計 9つのタイポグラフィスタイルをカスタマイズして保存し、サイト全体で使用することができます。各スタイルのフォント、色、書式設定を変更して、希望する見た目に合わせます。
ヒント:
H1 - H6 は見出しタグで、これらのタイトルに自動的に割り当てられます。見出しタグに従ってタイトルをトップダウンの階層構造に保つことで、SEO とアクセシビリティの両方に役立ちます。
タイポグラフィスタイルを更新する方法:
- エディタ左側の「サイトスタイル」
をクリックします。
- 「タイポグラフィ」をクリックします。
- 「タイポグラフィを編集」アイコン
をクリックします。
- 必要に応じてタイポグラフィをカスタマイズします。
- ドロップダウンを使用してフォントを変更します。
- テキストサイズを調整します。
- あらゆる画面サイズで理想的に表示されるように、テキストを比例してスケーリングします。
- テキストを太字または斜体にします。
- テキストの行と文字の間隔を設定します。
- 「適用」をクリックします。
![サイトスタイルパネルの「タイポグラフィ」タブで、見出し 2 のスタイルを編集しているスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/12/23/2e42a78e-ff06-4fe6-adeb-6cf325da8cb5/98d3fd51-d488-4b16-aeb4-32a38a1702c8.png)
重いカスタムフォントを使用している場合:![デフォルトのフォントを最初に読み込むために、Wix Studio エディタでクリックする必要があるトグル](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/12/23/3f6703e6-9b68-41e1-b475-fe7eedc69835/e414e528-340a-48dc-93c8-3c99844c014c.jpeg)
パネルの下部にある「デフォルトのフォントでサイトの読み込みを最適化」トグルを有効にします。このトグルを有効にすると、カスタムフォントが完全にダウンロードされるまで、訪問者のブラウザに読み込み速度の速いデフォルトのフォントを一時的に表示するように指示します。
![デフォルトのフォントを最初に読み込むために、Wix Studio エディタでクリックする必要があるトグル](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/12/23/3f6703e6-9b68-41e1-b475-fe7eedc69835/e414e528-340a-48dc-93c8-3c99844c014c.jpeg)
ページにテキストのスタイルを追加する
保存したタイトルと段落は、「要素を追加」パネルから使用できるようになります。「テキスト」をクリックし、「テキストテーマ」下で該当するスタイルを希望の場所にドラッグします。
![「要素を追加」パネルで利用可能なテキストテーマのスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/12/23/53273460-acec-412c-8cbf-f141b777932c/b34c1afe-ccb6-44a2-a825-5331f328b775.jpg)
テキスト要素にスタイルを適用する
ページ上の既存のテキスト要素にタイポグラフィスタイルを適用することもできます。要素上で「テキストを編集」をクリックし、要素設定パネルの「テーマ」ドロップダウンから該当するスタイルを選択します。
![テキスト要素にタイポグラフィスタイルを適用できる要素設定パネルの「デザイン」セクションのスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/12/23/9ddb8258-967f-4cb0-9e8c-fb78c58d8ae9/56f23c0e-613a-4a46-ac40-ef74d9ccd922.jpg)
要素のスタイル(テーマ)を選択した後に要素のフォント、サイズ、または色を変更すると、「デザインオーバーライド」が作成されます。つまり、選択したスタイルの更新はこのテキスト要素には適用されません。
ただし、オーバーライドを使用してテキスト要素にスタイルを再度適用することはできます。「テーマ」ドロップダウンを開き、下部の「変更をリセット」をクリックします。
![オプションをクリックして、テキスト要素の変更をリセットし、選択したタイポグラフィスタイルを再度適用しています](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/12/23/1f8b7be7-f95e-45b8-ad87-aacfac87f67b/b6df3d4e-bec4-4942-83fe-db1ea80bbf78.jpg)
サイトの色を変更する
サイトのカラーパレットを定義します。カラーパレットは、サイト内での用途や場所を反映したカテゴリー別に分けられています。たとえば、アクションの色はボタンやリンクでよく使用されます。
各カテゴリーのメインカラー、またはパレット内の特定の色合いをカスタマイズできます。
ヒント:
このアクションは、変更したい色の要素に即座に影響します。たとえば、追加したおすすめ要素や、この色を使用した他の要素などです。
サイトの色を変更する方法:
- エディタ左側の「サイトスタイル」
をクリックします。
- 「色」をクリックします。
- 実行する内容を選択します:
- 特定の色合いを調整する:色合いにマウスオーバーし、「編集」アイコン
をクリックします。
- 色を変更する:「カラー範囲を編集」アイコン
をクリックします。
- 特定の色合いを調整する:色合いにマウスオーバーし、「編集」アイコン
![サイトスタイルパネルの「色」タブのスクリーンショット。色合いにマウスオーバーして編集しています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/12/23/ec5100dd-ea3a-4ce0-b4ee-cb53f7e6432d/ef1adade-a52b-48a9-80eb-987c984fc479.png)
ページトランジションを追加する
ページトランジションを追加して、訪問者にとってより魅力的なナビゲーション体験にします。「サイトスタイル」パネルからトランジションを選択すると、サイトのすべてのページに表示されます。
ページトランジションを追加する方法:
- エディタ左側の「サイトスタイル」
をクリックします。
- 「ページトランジション」をクリックします。
- リストからトランジションを選択します:
- なし:訪問者がページ間を移動しても、トランジションは表示されません。
- アウトイン:現在のページがフェードアウトし、新しいページがフェードインします。
![サイトスタイルパネルの「ページトランジション」タブのスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/12/23/ef4b65dc-5cd2-4a47-8ffd-7578a7055366/a2b236b2-70ba-44dd-ba40-0eb3e290858d.png)
お役に立ちましたか?
|