Skip to content
Rakubo ドキュメントサイト

3. テーマ設定

テーマ設定では、特集ページ全体の基本的なデザイン（配色、フォントなど）を定義します。事前に用意されたテーマを選択し、カラースキームやコンポーネントスタイルをカスタマイズすることで、ブランドイメージに完全に合致したページを作成できます。

テーマ設定は、エディタの左ナビゲーションで「テーマ」モードを選択して行います。

テーマの選択

設定エリアの上部には、利用可能なテーマの一覧が表示されます。

テーマ選択エリア (利用可能なテーマのプレビューが並んでいるスクリーンショット)

  1. テーマのプレビュー: 各テーマのサムネイル画像や名前を見て、デザインの雰囲気を確認します。
  2. テーマの適用: 適用したいテーマをクリックします。
  3. ライブプレビューの確認: 選択したテーマがライブプレビューエリアに即座に反映されます。ページ全体の配色やフォントなどが変わるのを確認してください。

高度なテーマカスタマイズ

Rakuboの最新バージョンでは、テーマカラーエディタが強化され、より細かなカスタマイズが可能になりました。

テーマカラーエディタ

テーマカラーエディタを使用すると、テーマの主要カラーだけでなく、細部まで調整できます。

テーマカラーエディタ (カラーピッカーと拡張カラー設定のスクリーンショット)

基本カラー設定

  • プライマリカラー (Primary Color): サイト全体で最もよく使われる基本色です。ボタンの背景色、主要な見出しの色などに影響します。
  • セカンダリカラー (Secondary Color): プライマリカラーを補完する色で、サブ見出しやセカンダリボタンなどに使用されます。
  • アクセントカラー (Accent Color): 特定の要素を目立たせるための色です。リンクやハイライト要素に影響します。
  • 背景色 (Background Color): ページ全体のデフォルトの背景色です。
  • テキストカラー (Text Color): ページ全体のデフォルトのテキスト（本文）の色です。

拡張カラー設定

「拡張設定」タブをクリックすると、より詳細なカラー設定ができます：

  • ヘッダー背景色: ページヘッダーの背景色
  • ヘッダーテキスト色: ヘッダー内のテキスト色
  • フッター背景色: ページフッターの背景色
  • フッターテキスト色: フッター内のテキスト色
  • ボーダーカラー: 境界線の色
  • エラーカラー: エラーメッセージや警告表示に使用される色
  • 成功カラー: 成功メッセージに使用される色

各色の設定項目をクリックすると、カラーピッカーが表示されるので、任意の色を選択するか、カラーコード（例: #FF5733）を直接入力します。

コンポーネントスタイルエディタ

新機能の「コンポーネントスタイルエディタ」では、ページ内の各コンポーネントタイプのスタイルをグローバルに設定できます。

コンポーネントスタイルエディタ (コンポーネントスタイルエディタのスクリーンショット)

編集可能なコンポーネント

以下のコンポーネントのグローバルスタイルを設定できます：

  • ボタン: 形状、角の丸み、影の有無
  • カード: 背景色、境界線、角の丸み、影
  • 見出し: フォント、サイズ、太さ、色
  • リンク: テキスト装飾、ホバー効果
  • 入力フィールド: 境界線スタイル、フォーカス時の効果
  • テーブル: 境界線、ヘッダースタイル、縞模様の有無

スタイルの編集方法

  1. 左側のリストから編集したいコンポーネントを選択します
  2. 右側のパネルに表示されるスタイル設定を調整します
  3. 変更はリアルタイムでプレビューに反映されます
  4. 必要に応じて「リセット」ボタンでデフォルト設定に戻せます

フォント設定

テーマのフォント設定では、見出し用と本文用のフォントを個別に選択できます。

フォント設定 (フォント設定のスクリーンショット)

  • 見出しフォント: 見出し（h1, h2, h3など）に使用されるフォント
  • 本文フォント: 段落やリストなどの本文テキストに使用されるフォント
  • フォントサイズ基準: ページ全体のフォントサイズの基準値（小、標準、大）

使用可能なフォント一覧：

  • ゴシック体: 「游ゴシック」「ヒラギノ角ゴ」「メイリオ」「Noto Sans JP」
  • 明朝体: 「游明朝」「ヒラギノ明朝」「Noto Serif JP」
  • 装飾: 「M PLUS Rounded 1c」「コーポレート・ロゴ」「Klee One」

レスポンシブデザイン設定

新機能のレスポンシブデザイン設定では、異なるデバイスサイズでのページの表示方法をカスタマイズできます。

レスポンシブ設定 (レスポンシブ設定のスクリーンショット)

  • ブレイクポイント: モバイル表示に切り替わる画面幅を設定
  • モバイルフォントスケール: モバイル表示時のフォントサイズ倍率
  • モバイル余白調整: モバイル表示時の余白縮小率

テーマプリセットの保存と再利用

カスタマイズしたテーマ設定をプリセットとして保存し、他のページで再利用することができます。

プリセットの保存

  1. すべてのテーマ設定を完了させます
  2. 「テーマプリセット」セクションの「保存」ボタンをクリックします
  3. プリセット名を入力して「保存」をクリックします

プリセットの適用

  1. 「テーマプリセット」ドロップダウンをクリックします
  2. 保存済みのプリセットリストから選択します
  3. 「適用」ボタンをクリックします

これでテーマ設定は完了です。 次は「4. パーツの追加と管理」で、ページにさまざまなパーツを追加し、配置する方法を見ていきましょう。