この記事では、フォントの設定場所と、複数の設定が重なった場合にどのフォントが優先されるか（優先順位）について解説します。

サイト全体の共通フォントを設定する

まずは、サイト全体の基本となる「共通デフォルトフォント」の設定方法です。ここで設定したフォントは、個別に指定がない限り、サイト内のすべてのテキストに適用されます。

手順1：クイック設定を開く

「Lwクイック設定」または「外観→カスタマイズ画面」からを、「共通デフォルトフォント」の項目を確認します。[00:05]

初期値は「フォント指定なし」になっています。

手順2：使用したいフォントを選択する

リストからサイト全体に適用したいフォントを選択します。

おすすめは「Noto Sans JP」です。世界中で使われており、日本語がとても美しく表示されるバランスの良いフォントです。[00:47]

手順3：設定を保存してプレビューで確認する

フォントを選択したら保存し、実際のページを表示して変更が反映されているか確認します。

【重要】編集画面上では、共通デフォルトフォントの変更がリアルタイムで反映されない場合があります。設定後は必ず「プレビュー」画面や実際の公開ページで表示を確認してください。[02:05]

ブロックやパーツごとにフォントを設定する

共通設定とは別に、記事内の特定のブロックやサイドバーなどのパーツごとにフォントを指定することも可能です。

【注意】指定できるブロックと出来ないブロックがあります。

• 手順1：編集画面で対象のブロックを選択する[02:26]
• 手順2：サイドバーでフォントを指定する
  画面右側の設定サイドバーにあるフォント設定項目から、任意のフォントを選択します。

ここでフォントを指定すると、サイト全体の「共通デフォルトフォント」よりも優先して適用されます。逆に「未選択」にしておくと、共通デフォルトフォントがそのまま反映されます。[02:58]

ページごとにデフォルトフォントを変更する（固定ページのみ）

トップページや特定のランディングページ（LP）など、そのページだけ全体の雰囲気と変えたい場合は、ページ単位でデフォルトフォントを設定できます。

手順1：編集画面下部の設定エリアへ移動する

固定ページや投稿の編集画面を一番下までスクロールすると、LiteWord独自のページ設定オプションが表示されます。[04:09]

手順2：ページ専用のフォントを選択する

「フォント」という項目プルダウンから、そのページで使用したいフォントを選択して保存します。

ここで設定したフォントは、そのページ内における「基本フォント」となり、サイト全体の共通設定よりも優先されます。[05:08]

文字単位で個別にフォントを指定する

文章中の特定の単語や一文だけを強調したい場合、文字に対して直接フォントを指定することができます。

手順1：変更したい文字を範囲選択する

フォントを変えたいテキストをマウスでドラッグして反転選択します。

手順2：ツールバーからフォントを適用する

表示されるツールバーの中からフォント設定を選び、変更したいフォント（明朝体やゴシック体など）を適用します。[05:44]

この「文字への直接指定」は最も優先度が高く設定されています。共通設定やページ設定に関わらず、ここで指定したフォントが強制的に適用されます。

フォント設定の優先順位まとめ

LiteWordでは、以下の順序でフォントが優先的に適用されます。意図したフォントにならない場合は、より優先度の高い設定が残っていないか確認してください。[06:45]

• 優先度1（最強）：文字への直接指定
  ツールバーを使って文字単位で指定したフォントが最優先されます。
• 優先度2：ブロック・パーツごとの指定
  右側サイドバーでブロックごとに設定したフォントが次に優先されます。
• 優先度3：ページごとのデフォルトフォント
  編集画面下部で設定した、そのページ固有のフォント設定です。
• 優先度4（基本）：共通デフォルトフォント
  クイック設定で指定したサイト全体の基本フォントです。上記1～3の指定がない箇所すべてに適用されます。

この4段階構造を理解して使い分けることで、統一感を保ちつつ、バリエーション豊かなページデザインが可能になります。

共通カラー設定とは

まず、LiteWordの「Lwクイック設定」に含まれる「共通カラー設定」について解説します。ここでは、サイト全体の雰囲気を決定づける「メインカラー」と、ボタンや強調部分に使われる「アクセントカラー」の2色を設定できます。

クイック設定は、サイト運営において「最低限これだけは決めておいてほしい」という項目をまとめたものです。まずはここでベースとなる色を確定させましょう。

ステップ1：メインカラー（Main Color）を決める

まず、「メインカラー」の設定を行います。これはサイト全体で最も多く使われる色であり、サイトの基調となる色[00:14]です。

メインカラーによってサイト全体の雰囲気が大きく変わります。今後行うビジネスの内容や、ご自身の発信したいイメージに合わせて色を選定してください。

ステップ2：変更を保存して実際の画面を確認する

カラーピッカーで好みの色（例：緑色など）を選択したら、「変更を保存」をクリックします。

実際のサイトを表示してリロードすると、ヘッダーや背景の一部などが指定した色に変更されていること[00:51]が確認できます。

ステップ3：アクセントカラー（Accent Color）を決める

次に「アクセントカラー」を設定します。アクセントカラー[01:38]は、サイト内で強調したい部分に使用される色です。

アクセントカラーとは？
「お問い合わせボタン」や「注目させたいパーツ」、またはリンクにマウスを乗せた時（ホバー時）の色などに適用されます。ユーザーの目を引きたいポイントで自動的に使用されます。

ステップ4：アクセントカラーの反映を確認する

色を選択して保存した後、サイトを確認してください。ボタンの色や、マウスカーソルを合わせた時の色[02:18]などが変更されているはずです。

動画内では、サイトの統一感を出すために、メインカラーと同系色を設定する例を紹介しています。

補足：さらに細かい色設定を行いたい場合

クイック設定では主要な2色のみを設定しますが、より詳細な設定も可能です。

WordPress管理画面の「外観」＞「カスタマイズ」を開き、「共通カラー設定（色）」[03:09]メニューへと進んでください。

カスタマイザー画面では、メイン・アクセントカラー以外にも、文字色（テキストカラー）などの詳細な設定項目が用意されています。

はじめに：フッターとは

フッターとは、ウェブページの最下部に表示される領域のことです。一般的に、コピーライト表記、運営者情報、連絡先、プライバシーポリシーへのリンク、SNSリンクなどが配置されます。フッターのデザインを調整することで、サイト全体の印象や利便性を向上させることができます。

1. フッターデザイン設定画面へのアクセス

フッターのデザイン変更は、WordPressのカスタマイズ画面から行います。

1.1. WordPressダッシュボードへのログイン

1. ウェブサイトのトップページURLの末尾に「/wp-admin」と入力し、アクセスします。
2. ログイン画面が表示されたら、WordPressのユーザー名とパスワードを入力し、「ログイン」ボタンをクリックします。

1.2. カスタマイズ画面への移動

1. WordPressダッシュボードの左側メニューから「外観」にマウスカーソルを合わせます。
2. 表示されたサブメニューから「カスタマイズ」をクリックします。

1.3. フッター設定画面へのアクセス

1. カスタマイズ画面の左側メニューから「デザイン設定」をクリックします。
2. 次に「フッター」をクリックします。

2. フッターデザインのパターンを選択する

フッター設定画面内にある「パターンの選択」をクリックします。

• ここで、フッターの基本的なレイアウトパターンを選択できます。初期状態では「未選択」になっている場合があります。
• 「パターン1」や「パターン2」など、用意されているパターンにチェックを入れると、フッターのデザインが切り替わります。プレビューで確認しながら選択してください。
• 将来的には、さらに多くのデザインパターンが追加される予定です。

3. 選択したデザインパターンの詳細を設定する

デザインパターンを選択後、カスタマイズ画面のメニューで一つ前の階層に戻ると、「パターン1の設定」や「パターン2の設定」といった、選択したパターンに応じた詳細設定項目が表示されます。これをクリックして設定を進めます。

3.1. 表示/非表示の切り替え

各パターンの設定項目内で、フッター全体や特定の要素（例：SNSセクション、コピーライト表示部、ロゴ、ウィジェットエリアなど）を表示するか非表示にするかをチェックボックスで切り替えられます。

3.2. SNS設定

• 表示とデザイン: SNSアイコンセクションの表示/非表示、背景色、アイコンの色などを設定できます。
• 表示するSNSとリンク: 表示したいSNSの種類（X、YouTube、Instagram、LINE、メールなど）のアイコンを選択し、それぞれのリンク先URLを設定します。最大4つまで設定可能です。

3.3. コピーライト設定

• 表示と内容: コピーライト表示部の表示/非表示を選択し、表示するテキスト内容を自由に入力できます。
• テキストの色: コピーライト文言の文字色を変更できます。

3.4. ロゴ設定（対応パターンのみ）

パターン2など、一部のデザインパターンではフッターにロゴを表示できます。

• 表示タイプと内容: ロゴを「画像」で表示するか、「テキスト」で表示するか、または「表示しない」かを選択します。
  • 画像の場合：ロゴ画像をアップロードまたはメディアライブラリから選択します。
  • テキストの場合：表示するテキストを入力し、必要に応じて色やフォントを選択します。
• サイズ調整: ロゴのサイズを、PC、タブレット、スマートフォンそれぞれの表示に合わせて調整できます。

3.5. ウィジェットエリアの表示設定（対応パターンのみ）

パターン2など、一部のデザインパターンではフッター内に専用のウィジェットエリアを設けることができます。このエリアを表示するかどうかを選択できます。実際にウィジェットエリアにコンテンツを追加する作業は、後述のウィジェット設定画面で行います。

4. フッターにウィジェットを配置する

デザインパターンで表示設定したウィジェットエリアや、テーマ共通で用意されているフッター用ウィジェットエリア（例：「フッター上1」「フッター上2」「フッター上3」）にコンテンツを追加するには、WordPressのウィジェット設定画面を使用します。

4.1. ウィジェット設定画面へのアクセス

1. WordPressダッシュボードに戻ります。（カスタマイズ画面を開いたまま、別のタブでダッシュボードを開いても構いません）
2. 左側メニューの「外観」にマウスカーソルを合わせ、「ウィジェット」をクリックします。

4.2. フッター関連ウィジェットエリアへの追加

ウィジェット設定画面には、利用可能なウィジェットエリアが表示されています。

• フッター上のウィジェットエリア: 「フッター上1」「フッター上2」「フッター上3」といった名称のエリアが用意されている場合があります。これらは通常、フッターのメインコンテンツ部分の上部や、フッター内で横並びに配置されるエリアです。
• デザインパターン内のウィジェットエリア: 「3.5. ウィジェットエリアの表示設定（対応パターンのみ）」で表示するように設定した、特定のデザインパターン専用のウィジェットエリア。

4.3. ウィジェットの追加と設定

1. 画面左側（またはブロックエディタの場合は「+」ボタン）から追加したいウィジェット（例：画像、テキスト、カスタムHTML、カテゴリーリスト、検索バーなど）を選択します。
2. 選択したウィジェットを、目的のフッター関連ウィジェットエリアにドラッグ＆ドロップするか、ウィジェット名の横にあるオプションから追加先エリアを指定します。
3. 追加後、各ウィジェットが必要とする設定（画像選択、テキスト入力、HTMLコード記述など）を行います。テキストウィジェットやカスタムHTMLウィジェットは、アフィリエイトバナーなどの埋め込みにも利用できます。

4.4. 表示位置の確認

「フッター上1」「フッター上2」「フッター上3」のように番号で区切られたウィジェットエリアは、一般的に番号順に左から右、または上から下に並んで表示されます。実際にウィジェットを配置してみて、サイトのプレビューで表示位置を確認するのが最も確実です。

5. 設定を保存してサイトに反映する

5.1. カスタマイズ画面での保存

フッターのデザインパターン選択や詳細設定など、カスタマイズ画面で行った変更は、画面上部にある「公開」ボタンをクリックすることで保存され、サイトに反映されます。

5.2. ウィジェット設定の保存

ウィジェット設定画面で行った変更（ウィジェットの追加、削除、並べ替え、内容編集）は、多くの場合、操作後に自動的に保存されます。ブロックベースのウィジェットエディタではない従来のウィジェット画面の場合や、明示的な「保存」ボタンがある場合は、それをクリックしてください。

はじめに：ドロワーメニューとは

ドロワーメニューは、主にスマートフォンでサイトを表示した際に、画面の端にあるボタン（ハンバーガーメニューアイコンなど）をタップすると、横からスライドして表示されるナビゲーションメニューです。このメニューのデザインを調整することで、スマートフォンでのサイトの印象や利便性を向上させることができます。

1. ドロワーメニューに表示する項目を設定する

ドロワーメニューに表示するページリンクなどの項目は、WordPressの標準機能であるメニュー設定で管理します。

1.1. メニュー設定画面へのアクセス

1. WordPressダッシュボードにログインします。
2. 左側メニューの「外観」にマウスカーソルを合わせ、「メニュー」をクリックします。

1.2. メニュー項目の作成と選択

1. メニュー設定画面で、ドロワーメニューとして表示したいメニュー項目（トップページ、固定ページへのリンク、カテゴリーリストなど）を追加、並べ替え、階層化します。
   • 既存のメニューを選択する場合: 画面上部にある「編集するメニューを選択」で、ドロワーメニューに使用したいメニューを選びます。
   • 新しいメニューを作成する場合: 「新しいメニューを作成しましょう。」リンクからメニューを新規作成します。
2. メニューの編集が完了したら、画面下部へスクロールします。

1.3. メニューの位置設定

1. 「メニュー設定」セクション内の「メニューの位置」または同様の項目の中から、「スマホメニュー（ドロワーメニュー）」あるいは「ドロワーメニュー」と記載されたチェックボックスを探し、チェックを入れます。
2. 最後に「メニューを保存」ボタンをクリックします。

2. ドロワーメニューのデザイン設定画面へアクセスする

ドロワーメニューの背景色やフォントなどのデザイン要素は、WordPressのカスタマイズ画面で変更します。

2.1. カスタマイズ画面への移動

1. WordPressダッシュボードの左側メニューから「外観」にマウスカーソルを合わせます。
2. 表示されたサブメニューから「カスタマイズ」をクリックします。

2.2. ドロワー設定画面へのアクセス

1. カスタマイズ画面の左側メニューから「デザイン設定」をクリックします。
2. 次に「ドロワー」をクリックします。

3. ドロワーメニューのデザインパターンを選択する

ドロワーメニューのデザイン設定画面には「パターンの選択」という項目があります。 LiteWordテーマ（バージョン1）の現時点では、ドロワーメニューのデザインパターンは1種類のみ提供されています。将来的には複数のデザインパターンから選択可能になる予定です。

4. ドロワーメニューのデザイン詳細を設定する（パターン1）

現在利用可能なデザインパターンの色やフォントなどを変更できます。設定は「パターンの選択」の下に表示される各項目で行います。

4.1. 色の設定

• 1階層目の背景色: ドロワーメニューの主要な階層の背景色です。初期設定は青系の場合が多いですが、任意の色に変更可能です。
• 2階層目の背景色: メニュー項目にマウスオーバーした際や、子メニューが表示された際の背景色です。
• 色の変更とリセット: 各色設定項目のカラーピッカーをクリックして色を選択するか、カラーコードを直接入力します。初期設定に戻したい場合は「クリア」をクリックしてください。

4.2. フォントの設定

ドロワーメニュー内で使用されるテキストのフォントを変更できます。

4.3. 表示するメニューの選択（再確認）

「1. ドロワーメニューに表示する項目を設定する」で設定したメニューの中から、実際にドロワーメニューとして使用するメニューをここで再度選択することも可能です。

4.4. 今後の機能拡張について

現バージョン（バージョン1）で詳細設定が可能な項目は上記が主ですが、今後のアップデートでさらに詳細なカスタマイズ機能が追加される予定です。

5. ドロワーメニュー下ウィジェットエリアにコンテンツを追加する

ドロワーメニューが開いた際、メニュー項目の下部にウィジェットエリアが設けられており、任意のコンテンツを追加できます。この設定はWordPressのウィジェット設定画面で行います。

5.1. ウィジェット設定画面へのアクセス

1. WordPressダッシュボードに戻ります。
2. 左側メニューの「外観」にマウスカーソルを合わせ、「ウィジェット」をクリックします。

5.2. 「ドロワーメニュー下」ウィジェットエリアへの追加

ウィジェット設定画面に「ドロワーメニュー下」という名称のウィジェットエリアがあります。このエリアに、表示したいウィジェットをドラッグ＆ドロップなどで追加します。

5.3. 追加可能なウィジェットの例

• 画像ウィジェット: バナー画像などを表示する場合に使用します。画像アップロードまたはメディアライブラリから選択し、必要に応じてリンク先URLを設定できます。
• カテゴリーウィジェット: サイト内のカテゴリー一覧を表示します。
• テキストウィジェット (HTML利用可): 任意のテキストやHTMLコードを記述できます。アフィリエイトバナーの埋め込みなどにも活用できます。

6. 設定を保存してサイトに反映する

6.1. カスタマイズ画面での保存

ドロワーメニューのデザイン設定（色やフォントなど）を変更した場合は、カスタマイズ画面の上部にある「公開」ボタンを必ずクリックして設定を保存し、サイトに反映させてください。

6.2. ウィジェット設定の保存

ドロワーメニュー下のウィジェットエリアにウィジェットを追加・編集した場合は、ウィジェット設定画面で「保存」ボタンをクリックするか、ブロックベースのウィジェットエディタの場合は自動保存されていることを確認してください。

ナビゲーションメニューの設定はこちらです。

はじめに：ヘッダーデザインでできること

ヘッダーはサイト最上部に表示される、サイトの顔となる要素です。LiteWordでは、複数のデザインパターン選択、ロゴ、メニュー、情報表示バー、アクションボタンの表示内容やデザインを細かく設定できます。

1. 設定画面へのアクセス

ヘッダーデザインの設定は、WordPressのカスタマイズ画面から行います。

1.1. WordPressダッシュボードへのログイン

1. ウェブサイトのトップページURLの末尾に「/wp-admin」と入力し、アクセスします。
2. ログイン画面が表示されたら、WordPressのユーザー名とパスワードを入力し、「ログイン」ボタンをクリックします。

1.2. カスタマイズ画面への移動

1. WordPressダッシュボードの左側メニューから「外観」にマウスカーソルを合わせます。
2. 表示されたサブメニューから「カスタマイズ」をクリックします。

2. ヘッダーデザインの基本設定（デザインパターンの選択）

カスタマイズ画面で、ヘッダーデザインの基本的なパターンを選択します。

2.1. ヘッダー設定画面へのアクセス

1. カスタマイズ画面の左側メニューから「デザイン設定」をクリックします。
2. 次に「ヘッダー」をクリックします。

2.2. デザインパターンの選択

1. ヘッダー設定画面内の「パターンの選択」をクリックします。初期状態では「未選択」の場合があります。
2. LiteWordテーマ（バージョン1）では、パターン1、パターン2、パターン3の3種類から選択可能です。各パターンをクリックすると、プレビュー画面でデザインが切り替わるので、好みのものを選択してください。

2.3. ページごとの設定について

「パターンの選択」項目では、デザインパターンを適用する範囲を以下から選択できます。

• 全ページ共通
• 固定ページ
• 投稿ページ
• アーカイブページ

まずは「全ページ共通」で設定することをおすすめします。ページの種類によってヘッダーデザインを変更したい場合は、「固定ページ」や「投稿ページ」などを選択し、個別にデザインパターンを指定することも可能です。例えば、投稿ページのみパターン3を適用する、といった設定が行えます。

2.4. 各デザインパターンの特徴

各デザインパターンの主な特徴は以下の通りです。

• パターン1: ロゴが中央に配置され、画面幅が縮小するとロゴが左側に移動するデザインです。メニュー項目にマウスオーバーすると下線が表示されます。
• パターン2: ロゴが左側、その右隣にメニューが並び、最も右側にアクションボタンが配置されるデザインです。
• パターン3: ヘッダーに背景色が設定されており、アクションボタンがメニューの右端に隣接して表示されるシンプルなデザインです。

2.5. デザインの確認（PC画面が小さい場合）

PCの画面サイズが小さい場合、ハンバーガーメニュー（三本線のアイコン）やドロワーメニューのボタンが表示されることがあります。全体のデザインが確認しづらい場合は、ブラウザの表示倍率を調整してください。Windowsの場合、Ctrlキーを押しながら「-（マイナス）」キーを押すと表示が縮小されます。

3. ヘッダーデザインの詳細設定

基本のデザインパターンを選択後、さらに細かい設定を行います。

3.1. 設定の保存

デザインパターンを選択したら、画面上部にある「公開」ボタンをクリックして、設定を一度保存してください。

3.2. インフォメーションバーの設定

選択したデザインパターンに応じて、詳細設定項目が表示されます。インフォメーションバーは、ヘッダーの最上部に表示される帯状のエリアです（パターンによっては初期状態で非表示の場合もあります）。

• 表示/非表示: 「表示する」または「表示しない」を選択します。
• テキスト: バーに表示するテキストを入力します。空欄の場合は、WordPressのキャッチフレーズが表示されます。
• リンク先URL: バーをクリックした際のリンク先URLを設定します。
• その他: フォント、背景色、文字色などを設定できます。

3.3. ロゴの設定

ヘッダーに表示されるサイトロゴを設定します。

• 表示タイプ: 「画像」「テキスト」「表示しない」から選択します。
  • テキスト: サイトのタイトルまたは任意のテキストをロゴとして表示します。
  • 画像: 「ロゴ画像を選択」ボタンから画像をアップロード、またはメディアライブラリから選択します。ドラッグ＆ドロップでのアップロードも可能です。
• ロゴサイズ: PC、タブレット、スマートフォンそれぞれで個別にサイズを調整できます。設定画面下部のデバイス切り替えボタンでプレビューを確認しながら、スライダーでサイズを変更します。

3.4. メニューの設定

ヘッダーに表示するナビゲーションメニューを選択します。

• あらかじめWordPressのメニュー設定画面（「外観」＞「メニュー」）で作成したメニューの中から、ヘッダーに表示したいものを選択します。
• ヘッダーメニューのフォント、背景色、文字色なども設定可能です。

3.5. アクションボタンの設定

一部のヘッダーパターンでは、目立たせたいリンク先へ誘導するためのアクションボタンを設置できます。

• 表示/非表示: ボタンを表示するかどうかを選択します。
• テキスト: ボタンに表示するテキストを入力します。
• リンク先URL: ボタンをクリックした際のリンク先URLを設定します。
• デザイン: ボタンの文字色と背景色を設定できます。

3.6. 他のパターンでの設定について

ここで説明したインフォメーションバー、ロゴ、メニュー、アクションボタンなどの詳細設定項目は、パターン1、パターン2、パターン3のいずれを選択した場合でも、ほぼ同様の手順で設定できます。