カラー設定・フォント
カラー・フォント設定 — カスタマイザーマニュアル
> 設定場所: 外観 → カスタマイズ → 「共通設定 - カラー（色）」/「共通設定 - フォント」
> カスタマイザーで開く: カラー設定を開く ｜ フォント設定を開く
> このページのURL: https://lite-word.com/manual/colors-fonts/
サイト全体の色とフォントを一括管理する設定。カスタマイザーで設定した値はCSS変数として全ページに自動反映される。
設定手順
サイトの色を変更する
- 外観 → カスタマイズ を開く
- 「共通設定 - カラー（色）」 を開く
- メインカラーを選ぶ（ボタン・リンク・見出し装飾など多くの要素に反映される）
- アクセントカラーを選ぶ（ホバー時やサブ要素に使われる）
- 必要に応じてテキスト色・リンク色・カラー1〜3を設定
- 「公開」 で保存
サイトのフォントを変更する
- 外観 → カスタマイズ を開く
- 「共通設定 - フォント」 を開く
- サイト全体のフォントファミリーを選ぶ（迷ったら「Noto Sans JP」がおすすめ）
- フォントウェイトを選ぶ（400=標準、500=やや太め）
- 固定ページ・投稿ページで別フォント・サイズにしたい場合は個別に設定
- 「公開」 で保存
カラー設定（color_sec）
設定一覧
| 設定ID | ラベル | タイプ | デフォルト値 | 説明 |
|---|---|---|---|---|
color_main |
メインカラー | カラーピッカー | #1a72ad |
サイト全体のブランドカラー。ボタン・見出し装飾など多くの要素に反映 |
color_accent |
アクセントカラー | カラーピッカー | #d34a4a |
ホバー時やサブ要素の補助色 |
color_text |
通常の文字の色 | カラーピッカー | #060606 |
本文テキストの色 |
color_1 |
カラー１ | カラーピッカー | メインカラーと同じ | 自由に使える追加カラー。ブロックの色設定で選択可能 |
color_2 |
カラー２ | カラーピッカー | メインカラーと同じ | 自由に使える追加カラー。ブロックの色設定で選択可能 |
color_3 |
カラー３ | カラーピッカー | メインカラーと同じ | 自由に使える追加カラー。ブロックの色設定で選択可能 |
color_link_common |
リンクテキストの色 | カラーピッカー | #0066cc |
本文中のリンクの色 |
color_link_icon_switch |
新規タブの場合にアイコンの表示 | セレクト | — | 「表示する」/「表示しない」から選択 |
リンクアイコン表示について
- 「表示する」 → 新しいタブで開くリンクに小さなアイコンが付く。外部リンクだとユーザーに伝わりやすい
- 「表示しない」 → アイコンなし。デザインをスッキリさせたい場合
生成されるCSS変数
カスタマイザーで設定した色は、以下のCSS変数としてサイト全体に出力される。
| CSS変数 | 対応する設定 / 固定値 |
|---|---|
--color-main |
メインカラーの値 |
--color-accent |
アクセントカラーの値 |
--color-text |
通常の文字の色の値 |
--color-1 |
カラー１の値 |
--color-2 |
カラー２の値 |
--color-3 |
カラー３の値 |
--color-link-common |
リンクテキストの色の値 |
--color-background-all |
固定値: #f4f4f4 |
--color-sub |
固定値: #0e1013 |
--color-page-bg-pc |
固定値: #fff |
--color-page-bg-sp |
固定値: #fff |
--color-content-bg-pc |
固定値: #fff |
--color-content-bg-sp |
固定値: #fff |
--color-black |
固定値: #060606 |
--color-blue |
固定値: #4a90e2 |
--color-red |
固定値: #d34a4a |
--color-yellow |
固定値: #f9d648 |
フォント設定（font_sec）
サイト全体のフォント（Body）
| 設定ID | ラベル | タイプ | デフォルト値 |
|---|---|---|---|
font_body |
フォントファミリー | セレクト | gothic（ゴシック体） |
font_body_weight |
フォントウェイト | セレクト | 400 |
固定ページのフォント（Page）
固定ページだけ別のフォント・サイズに変更できる。
| 設定ID | ラベル | タイプ | デフォルト値 |
|---|---|---|---|
font_page |
フォントファミリー | セレクト | （サイト全体と同じ） |
font_page_weight |
フォントウェイト | セレクト | （サイト全体と同じ） |
font_page_size_pc |
フォントサイズ（PC） | セレクト | 17px |
font_page_size_tb |
フォントサイズ（タブレット） | セレクト | 16px |
font_page_size_sp |
フォントサイズ（SP） | セレクト | 16px |
投稿ページのフォント（Single）
ブログ記事など投稿ページ専用のフォント設定。
| 設定ID | ラベル | タイプ | デフォルト値 |
|---|---|---|---|
font_single |
フォントファミリー | セレクト | （サイト全体と同じ） |
font_single_weight |
フォントウェイト | セレクト | （サイト全体と同じ） |
font_single_size_pc |
フォントサイズ（PC） | セレクト | 17px |
font_single_size_tb |
フォントサイズ（タブレット） | セレクト | 16px |
font_single_size_sp |
フォントサイズ（SP） | セレクト | 16px |
フォントサイズの選択肢
12px 〜 20px（1px刻み）から選択可能。
| サイズ | 用途の目安 |
|---|---|
| 12〜13px | 非常に小さい。注釈やフッター向き |
| 14px | 小さめ。キャプションや補足テキスト |
| 15〜16px | 標準的な本文サイズ。迷ったらこれ |
| 17〜18px | やや大きめ。読みやすさ重視 |
| 19〜20px | 大きめ。シニア向けやインパクト重視 |
選べるフォント一覧
無料 日本語フォント（12種）
| フォント名 | 種類 | 特徴 |
|---|---|---|
| gothic | ゴシック | デフォルト。システムゴシック体 |
| mincho | 明朝 | システム明朝体 |
| Noto Sans JP | ゴシック | おすすめ。 Googleの標準フォント。読みやすく汎用性高い |
| Zen Kaku Gothic New | ゴシック | モダンでスッキリ。企業サイト向き |
| Sawarabi Gothic | ゴシック | 柔らかい印象のゴシック |
| Murecho | ゴシック | 丸みのあるモダンゴシック |
| IBM Plex Sans JP | ゴシック | テクノロジー系に合う |
| BIZ UDPGothic | ゴシック | ユニバーサルデザイン。行政・医療向け |
| Noto Serif JP | 明朝 | 格式高い印象。和風・高級感のあるサイトに |
| Sawarabi Mincho | 明朝 | 柔らかい明朝体 |
| M PLUS Rounded 1c | 丸ゴシック | カジュアルで親しみやすい |
| Kosugi Maru | 丸ゴシック | 可愛らしい印象 |
無料 英語フォント（14種）
| フォント名 | 種類 | 特徴 |
|---|---|---|
| Roboto | サンセリフ | Google標準。汎用的 |
| Lato | サンセリフ | 柔らかいサンセリフ |
| Montserrat | サンセリフ | モダン。見出し向き |
| Sora | サンセリフ | 幾何学的でクリーン |
| Josefin Sans | サンセリフ | エレガントでスタイリッシュ |
| Open Sans | サンセリフ | 読みやすい定番フォント |
| Raleway | サンセリフ | 細身でモダン |
| Coming Soon | 手書き風 | カジュアルな手書き |
| Lacquer | デザイン | インパクトのあるペイント風 |
| Abril Fatface | デザイン | 太い飾り付きフォント。見出し向き |
| Lavishly Yours | 筆記体 | 華やかな筆記体 |
| Sacramento | 筆記体 | 上品な筆記体 |
| Hurricane | 筆記体 | 流れるような筆記体 |
| Dancing Script | 筆記体 | エレガント。装飾向き |
プレミアム 日本語フォント（23種・有料会員限定）
| フォント名 | 種類 |
|---|---|
| Zen Maru Gothic | 丸ゴシック |
| Dela Gothic One | デザイン |
| Zen Kaku Gothic Antique | ゴシック |
| DotGothic16 | デザイン |
| RocknRoll One | デザイン |
| Shippori Mincho | 明朝 |
| Shippori Mincho B1 | 明朝 |
| Hina Mincho | 明朝 |
| Zen Old Mincho | 明朝 |
| Yuji Mai | デザイン |
| Yuji Syuku | デザイン |
| Zen Kurenaido | デザイン |
| Zen Antique | デザイン |
| New Tegomin | 明朝 |
| WDXL Lubrifont JP N | デザイン |
| Kaisei Decol | デザイン |
| Potta One | 丸ゴシック |
| Hachi Maru Pop | デザイン |
| Rampart One | デザイン |
| Stick | デザイン |
| Yusei Magic | 手書き風 |
| Klee One | 手書き風 |
| Mochiy Pop P One | デザイン |
FAQ
カラーについて
Q. メインカラーを変えたら、どこに反映されますか？
A. ボタン、リンク、見出し装飾、テーブルのアクセント、各種ブロックの装飾など、サイト全体の多くの要素にCSS変数 --color-main を通じて一括反映されます。
Q. カラー1〜3は何に使いますか？
A. ブロックエディタの色選択で使える追加カラーです。デフォルトはメインカラーと同じ色ですが、よく使うブランドカラーを登録しておくと便利です。
Q. 背景色（--color-background-all など）はカスタマイザーから変更できますか？
A. 現在は固定値（#f4f4f4、#fff 等）として出力されており、カスタマイザーからの変更はできません。変更が必要な場合はカスタムCSSで上書きしてください。
フォントについて
Q. おすすめのフォントはどれですか？
A. 迷ったら Noto Sans JP（ゴシック）がおすすめです。Googleの標準フォントで読みやすく、あらゆるジャンルのサイトに合います。明朝体なら Noto Serif JP が安定しています。
Q. フォントウェイトはどれを選べばいいですか？
A. 400（標準）が最も読みやすいです。やや太めにしたい場合は 500 を選んでください。見出し専用フォントでない限り、700以上は本文には太すぎることが多いです。
Q. 固定ページと投稿ページで別のフォントを使えますか？
A. はい。「サイト全体のフォント」とは別に、固定ページ・投稿ページそれぞれにフォントファミリー、ウェイト、サイズを個別設定できます。
Q. プレミアムフォントを使うには？
A. LiteWordの有料プランに加入すると、23種の追加日本語フォントが選択肢に表示されるようになります。
Q. フォントサイズはPC・タブレット・スマホで別々に設定できますか？
A. はい。固定ページ・投稿ページのフォントサイズは、PC / タブレット / スマホそれぞれ12px〜20pxの範囲で個別に設定できます。
関連ページ
最終更新: 2026-03-15 09:00