一般的なテーマ¶
Odooは、色、フォント、:ref:`レイアウト <website/themes/page-layouts>`など、ウェブサイトのテーマを形作るさまざまなオプションを提供しています。
ウェブサイトを初めて設定する際、テーマを選択するよう求められます。各テーマの拡張プレビューを表示するには、テーマの上にマウスを置きます。テーマをクリックして選択します。
注釈
テーマを選択せずに終了した場合、ウェブサイトはデフォルトのテーマを使用して作成されます。
必要に応じて、:ref:`後でテーマを切り替える <website/themes/switch>`ことができます。
ウェブサイトビルダーの:guilabel:`テーマ`タブには、ウェブサイトの一般的なテーマをカスタマイズするためのさまざまなオプションがあります。アクセスするには、:guilabel:`編集`をクリックして、:guilabel:`テーマ`タブに移動します。
必要な変更を行ったら、:guilabel:`保存`をクリックして確定し、ウェブサイトに適用します。
テーマ¶
:guilabel:`ウェブサイト`セクションで、:guilabel:`テーマの切り替え`をクリックしてテーマセレクターを開きます。各テーマの拡張プレビューを表示するには、テーマの上にマウスを置きます。テーマをクリックして、ウェブサイトに適用します。
色¶
Odooのウェブサイトエディタには、主に2種類の色があります:テーマカラー。
テーマ色¶
テーマカラーとは、ウェブサイトのすべてのページに表示される色のセットを指します。これらは5つの色で構成されています:3つのメインカラーと2つの明色と暗色です。
ウェブサイトの色を編集するには、ウェブサイトエディタの:guilabel:`色`セクションに移動して、次の操作を行います:
変更したいカラードットをクリックし、:guilabel:`実線`の色を選択するか、:guilabel:`カスタム`をクリックして特定の色調を手動で選択します（または#HEXまたはRGBAコードを追加します）。
ペイントパレットアイコンをクリックし、カラーパレットを選択します。その結果、すべての色のカスタマイズがリセットされます。特定の色を変更するには、カラードットをクリックしてください。
Odooは選択したパレットに応じて:guilabel:`カラープリセット`を自動的に作成します。これらは、構造化された視覚的に魅力的なデザインを提供するために、ウェブサイトのさまざまな要素に適用される事前定義された色の組み合わせです。カラーパレットを選択すると、そのプリセットによって、ボタン、背景、文字列など、ビルディングブロックのさまざまな要素にこれらの色がどのように配分されるかが定義されます。変更する場合は、:guilabel:`カラープリセット`をクリックし、プリセットをクリックしてさらにカスタマイズします。各カラープリセットには、ビルディングブロックの背景、文字列、見出し、リンク、プライマリボタン、セカンダリボタンの色が含まれています。
サイト上のビルディングブロックにカラープリセットを適用するには、ビルディングブロックを選択し、:guilabel:`カスタマイズ`タブに移動し、:guilabel:`背景`の横にあるカラードットをクリックして、:guilabel:`テーマ`を選択します。
注釈
カラープリセットを変更すると、デフォルトプリセットとそのプリセットが使用されているビルディングブロックの両方の色が自動的に更新されます。
ステータスカラー¶
ステータスカラーは、特定のアクションのステータスを示すために使用されます（例: 成功、:guilabel:`警告`など）。これらは、ユーザーやウェブサイト訪問者にフィードバックを提供するために表示されるポップアップメッセージで使用されます。ウェブサイトの:guilabel:`ステータスカラー`をカスタマイズするには、:guilabel:`詳細`セクションまでスクロールし、ドットをクリックして色を変更します。
Example
ページレイアウト¶
:guilabel:`ウェブサイト`セクションの:guilabel:`ページレイアウト`オプションを使用すると、ページ上のビルディングブロックとウェブサイト要素の全体的な表示と間隔を変更できます。ドロップダウンメニューをクリックし、目的のレイアウトを選択します。:guilabel:`ページレイアウト`の下で、:guilabel:`画像`を選択するか、選択した画像を:guilabel:`パターン`で使用するか、空白のままにして、:guilabel:`背景`をカスタマイズします。
フォント¶
Odooでは、段落、見出し、ボタン、入力フィールドなど、ウェブサイト上の特定の要素のフォントファミリーとサイズをカスタマイズできます。
フォントファミリー: 段落、見出し、:guilabel:`ボタン`のセクションで、ドロップダウンメニューからフォントを選択します。
フォントサイズ: 段落、見出し、ボタン、:guilabel:`入力フィールド`のセクションで、:guilabel:`フォントサイズ`フィールドを使用してデフォルトのサイズを設定します。:icon:`fa-caret-right`（矢印）アイコンをクリックしてセクションを展開し、カスタムサイズを定義します（例: 見出しレベル、ボタンサイズなどに基づく）。
さらに、各要素固有のセクションには、:guilabel:`明細行の高さ`や:guilabel:`余白`など、さらなるカスタマイズのための追加のスタイリングオプションが用意されています。
カスタムフォント¶
Odooでデフォルトで提供されていないフォントをウェブサイトで使用することが可能です。カスタムフォントを追加するには、:guilabel:`フォントファミリー`フィールドに関連するドロップダウンメニューをクリックし、ドロップダウンメニューの下部にある:guilabel:`カスタムフォントを追加`を選択します。ポップアップウィンドウで:
Googleフォントを追加するには、:guilabel:`Googleフォントを選択`をクリックし、リスト内の目的のフォントをクリックします。ウェブサイトが欧州連合のGDPRなどの法律への準拠を要求する規制がある場所から運営されている場合は、:guilabel:`Googleサーバからフォントを提供`をオフに切り替えてください。これにより、GoogleフォントがGoogleのサーバではなく、ウェブサイトのサーバに保存されます。
コンピューターからカスタムフォントをアップロードするには、:guilabel:`ファイルを選択`をクリックします。
完了したら、:guilabel:`保存して再読み込み`をクリックします。
ボタンスタイル¶
ウェブサイトのプライマリボタンとセカンダリボタンのスタイルをカスタマイズするには、ウェブサイトエディターの:guilabel:`ボタン`セクションに移動し、関連するオプションを編集します:
プライマリスタイル`または:guilabel:`セカンダリスタイル`フィールドの横にある矢印をクリックし、各ボタンタイプで利用可能なスタイルの1つを選択します::guilabel:`塗りつぶし、アウトライン、または:guilabel:
フラット。:guilabel:`アウトライン`を選択すると、下に:guilabel:`境界線の幅`オプションが表示され、ボタンのアウトラインの幅を調整できます。:guilabel:`パディング`を調整して、ボタンのラベル周りの間隔のサイズ(ピクセル単位)を変更します。
:guilabel:`角の丸み`オプションを使用して、ボタンの境界線の半径をカスタマイズします。
:guilabel:`クリック時のエフェクト`ドロップダウンメニューで、ボタンをクリックしたときのアニメーションを追加します。
リンクスタイル¶
リンク`セクションで、:guilabel:`リンクスタイル`をクリックして、ウェブサイト上のリンクの外観を選択します。ドロップダウンメニューで:guilabel:`下線なし、ホバー時に下線、または:guilabel:`常に下線`を選択します。