Web サイトサービス編集ツールの使い方 －「スタイル」タブ編

Houzz Pro の Web サイト サービスで編集作業をする際に、理解しておくべきツールバーの重要な機能があります。この記事では、左側のツールバーにある「スタイル」タブについて説明します。全体的な編集ツールの概要については、こちらの記事をご覧ください。

Webサイト サービス編集ツールの「スタイル」タブでは、ページ内のさまざまな要素の見た目を設定・管理できます。ここで行った変更は、ホームページ全体に反映されます。

「スタイル」タブにアクセスするには、Web サイト サービス編集ツールの左側のパネルで「スタイル」をクリックします。

色の設定

「色」セクション（カラーパネル）では、ホームページのブランドカラーを定義・管理することができます。「スタイル」タブ内の他の設定と同様に、ここで行った変更はホームページ全体に適用されます。つまり、ある色を更新すると、その色を使用しているすべての要素が自動的にその色へ更新されます。

ホームページ全体の色を調整するには、「スタイル」タブ内の［色］をクリックします。すると、「サイトの色」セクションに６つのベースカラーが表示されます。

ベースカラーの変更

サイトのベースカラーを変更するには、変更したい色のアイコンをクリックし、カラーピッカーを開きます。

ここでは以下のことが可能です。

• 色相の調整：下部のスライダーを動かして、色味を変更できます。
• 彩度の調整：メインのカラーパネル内でセレクターを左右に動かして、色の鮮やかさを調整できます。
• 明度の調整：メインのカラーパネル内でセレクターを上下に動かして、色を明るさ／暗さを調整できます。
• HEXコードの使用：特定の色を指定したい場合は、その HEX コードを下のボックスに直接入力できます。

変更が完了したら、カラーピッカーの外側をクリックすると、変更が保存されます。そして、直ちに変更した色が、ホームページの該当する箇所で反映されます。

ホームページには３種類カラープリセットが用意されており、いずれも自由に設定を変更できます。

カラープリセットの編集

既存のカラープリセットを変更するには、編集したいプリセットをクリックします。すると、設定画面が開きます。

左側の列には要素が表示されます。中央の列には、各要素に割り当てられた色が表示されます。そして右側の列には、それらの色の組み合わせがどのように見えるかのプレビューが表示されます。

変更したい色のアイコンをクリックすると、カラーピッカーが開きます。

カラーピッカーの下部には、ホームページのベースカラーが表示されます。黒枠で囲まれている場合は、その要素の色がサイト全体のベースカラーにリンクされていることを意味します。ベースカラーの色を変更すると、このプリセット内の該当要素の色も自動的に更新されます。

カラーピッカーから手動で色を選ぶこともできます。そうすると、その色選択は独立したものとなり、サイトのベースカラーとはリンクされなくなります。

カラープリセットの適用

カラープリセットは、ホームページのセクション、カード、ヘッダー、フッターに適用できます。

セクション

セクションに適用するには、Webサイト サービス編集ツールのメイン画面で目的のセクションをクリックします。すると、セクションの右上に［セクションの編集］ボタンが表示され、その右側に小さなペイントブラシのアイコンが表示されます。

このペイントブラシのアイコンをクリックして、適用したいカラープリセットを選択します。選択したセクションの色は、画面で即座に反映されます。

カード

セクションにプリセットを適用しても、その中のカードの色が変わらない場合があります。これは、カードが独自のカラープリセットを持つことができるためです。

カードのカラープリセットを調整したい場合は、変更したいカードを選択し、カードの右上に表示されたペイントブラシのアイコンをクリックして、適用したいカラープリセットを選択します。

注意：カードの場合、「セクションと同じ」という４番目のオプションがあり、それを選択すると、属しているセクションに適用されているカラープリセットを引き継ぐことができます。視覚的な一貫性を保ちたい場合に有効なオプションです。

ヘッダー・フッター

ヘッダーとフッターも、他のセクションと同様にカラープリセットを適用することができます。

更新するには、ヘッダーまたはフッターをクリックし、右上に表示されたペイントブラシのアイコンをクリックして、適用したいカラープリセットを選択します。

書体の設定

「書体」セクションでは、ホームページのフォントを定義・管理することができます。

ホームページのフォントを調整するには、「スタイル」タブ内の［書体］をクリックします。すると、ホームページ全体のフォント設定が表示されます。すべてのフォント設定を確認するには、下の方向へスクロールしてください。

書体プリセットの選択

サイトの書体設定を一括で変更したい場合は、「書体プリセット」を使って行うことができます。それにはまず、書体プリセットの一番上にある［見出し］ボタンをクリックします。

注意：新たに書体プリセットを選択すると、これまでに設定したフォントの設定がすべて上書きされます。

すると、「書体プリセット」の画面が開きます。別のプリセットを選択し、［保存］ボタンをクリックすると、ホームページ全体にその設定が適用されます。すべてのフォント設定が新しいプリセットに基づいて更新されます。

文字スタイルの調整

見出し、段落、ボタンなど、サイト全体で使われるテキスト要素の書体を調整することができます。

フォントを変更するには、変更したいフォントの項目をクリックし、「フォントファミリー」のドロップダウンメニューから新しいフォントを選択します。

当社のウェブサイトビルダーでは、1000種類以上のフォントを収録したGoogleフォントライブラリをすべて利用できます。人気のフォント一覧をスクロールするか、「その他のフォント」をクリックしてライブラリ全体から検索することも可能です。

You can adjust typography for site-wide text elements such as headings, paragraphs and buttons.

To change a font, click on the font you want to change. Click the Font family dropdown to choose a new font.

Our website builder uses the full Google font library, which contains over a thousand unique fonts. Scroll down the list of popular fonts, or click more fonts to search the full library.

書体ごとに、サイズ、太さ、文字間隔、行の高さも調整できます。たとえば、見出しのサイズを大きくすれば目立たせることができ、段落の間隔を調整すれば読みやすさが向上します。

You can also adjust the size, weight, letter spacing and line height for each font setting. For example, increasing your heading size makes it stand out, and adjusting paragraph spacing can improve readability.

その他のスタイル設定

色や書体の他に、「スタイル」パネルにはホームページの外観をカスタマイズするための設定が用意されています。これにはナビゲーション、フッター、ボタンとリンク、アイコン、区切り線、フォーム、レビュー、プロジェクトに関する設定が含まれます。ここですべての設定について詳しくは説明しませんが、こちらの記事では、プロジェクト ページの表示設定について説明しています。

関連情報

Web サイトサービス編集ツールの使い方 － 概要編

Web サイトサービス編集ツールの使い方 －「ページ」タブ編

Web サイトサービス編集ツールの使い方 －「設定」タブ編

ホームページのプロジェクト ページを編集する

その他、Houzz Pro の Web サイトサービスで構築したホームページやその編集方法などに関するヘルプ記事は、こちらをご覧ください。