3. テーマ設定
テーマ設定では、特集ページ全体の基本的なデザイン(配色、フォントなど)を定義します。事前に用意されたテーマを選択し、必要に応じて主要な色をカスタマイズすることで、ブランドイメージに合ったページを簡単に作成できます。
テーマ設定は、エディタの左ナビゲーションで「テーマ」モードを選択して行います。
テーマの選択
設定エリアの上部には、利用可能なテーマの一覧が表示されます。
(利用可能なテーマのプレビューが並んでいるスクリーンショット)
- テーマのプレビュー: 各テーマのサムネイル画像や名前を見て、デザインの雰囲気を確認します。
- テーマの適用: 適用したいテーマをクリックします。
- ライブプレビューの確認: 選択したテーマがライブプレビューエリアに即座に反映されます。ページ全体の配色やフォントなどが変わるのを確認してください。
テーマカラーのカスタマイズ
選択したテーマをベースに、主要な色(プライマリカラー、アクセントカラーなど)を個別に変更して、より細かくブランドイメージに合わせることができます。
(カラーピッカーが表示されている、プライマリカラー、アクセントカラーなどの設定項目のスクリーンショット)
- プライマリカラー (Primary Color): サイト全体で最もよく使われる基本色です。ボタンの背景色、主要な見出しの色などに影響します。
- アクセントカラー (Accent Color): プライマリカラーと対比的に使われ、リンクの色や特定の要素の強調色などに影響します。
- 背景色 (Background Color): ページ全体のデフォルトの背景色です。
- テキストカラー (Text Color): ページ全体のデフォルトのテキスト(本文)の色です。
- (その他、テーマ固有のカスタマイズ可能カラーがあれば記載。例: セカンダリカラー、ボーダーカラーなど)
各色の設定項目をクリックすると、カラーピッカーが表示されるので、任意の色を選択するか、カラーコード(例: #FF5733
)を直接入力します。
フォント設定 (※もしあれば)
テーマによっては、使用するフォントファミリーを選択・変更できる場合があります。
(もしフォント設定があれば、ここに操作方法を記載)
- (例: 「フォントファミリー」ドロップダウンから、使用したいフォント(ゴシック体、明朝体など)を選択します。)
これでテーマ設定は完了です。 次は「5. ページ設定とメタ情報」で、ページ自体の基本的な情報(タイトル、説明文など)を設定する方法を見ていきましょう。