一般的なテーマ¶
Odooは、ウェブサイトの色やフォント、段落と見出し、ボタン、リンク、入力フィールドの外観を定義するための、さまざまなテーマカスタマイズオプションを提供しています。さらに、詳細設定も利用できます。
ウェブサイトを初めて設定する際、テーマを選択するよう求められます。各テーマの拡張プレビューを表示するには、テーマにマウスを合わせます。テーマをクリックして選択するか、さらに表示ボタンをクリックして、利用可能なテーマの完全なリストを表示します。
注釈
テーマを選択せずに終了すると、ウェブサイトはデフォルトのテーマで作成されます。
テーマをカスタマイズするには、ウェブサイトエディターを開き、テーマタブに移動し、ウェブサイトセクションに進みます。次のことができます：
テーマを切り替えをクリックして、テーマセレクターを開きます。各テーマの拡張プレビューを表示するには、テーマにマウスを合わせます。このテーマを使用をクリックして、ウェブサイトに適用します。
ウェブサイトの言語を追加します。
ページレイアウトを選択して、ページ上のビルディングブロックとウェブサイト要素の全体的な表示と間隔を変更します。
レイアウトの背景をカスタマイズするには：
保存をクリックして、変更をウェブサイトに適用します。
色¶
Odooのウェブサイトエディタには、主に2種類の色があります:テーマカラー。
テーマ色¶
テーマカラーとは、ウェブサイトのすべてのページに表示される色のセットを指します。これは5つの色で構成されています：主にボタンとリンクに使用される3つのメインカラーと、主にテキストと見出しに使用される2つの明暗カラーです。
ウェブサイトの色を編集するには、テーマタブの色セクションに移動します。次に：
Click the color you want to change, then select a predefined Solid color or click Custom to pick a specific color tone manually (or add its #HEX or RGBA code). Click (Reset) to remove the color selection.
ペイントパレットアイコンをクリックして、カラーパレットを選択します。その結果、すべての色のカスタマイズがリセットされます。
Odooは、選択した色またはパレットに対して自動的にカラープリセットを作成します。これらの事前定義された色の組み合わせは、構造化された視覚的に魅力的なデザインを作成するために、ウェブサイトのさまざまな要素に適用されます。カラーパレットを選択すると、そのプリセットがこれらの色が異なる要素にどのように分配されるかを定義します。これらを変更するには、カラープリセットをクリックし、プリセットを選択してカスタマイズドロップダウンを開きます。各カラープリセットには、ビルディングブロックの背景、テキスト、見出し、リンク、プライマリボタン、およびセカンダリボタンの色が含まれています。
ちなみに
ビルディングブロックにカラープリセットを適用するには、ビルディングブロックを選択し、スタイルタブに移動し、背景の横にある色のドットをクリックして、テーマを選択します。
注釈
カラープリセットを変更すると、デフォルトプリセットとそれを使用しているビルディングブロックの両方の色が自動的に更新されます。
ステータスカラー¶
ステータスカラーは、特定のアクションのステータスを示します（例：成功、警告`など）。これらは、ユーザーやウェブサイト訪問者にフィードバックを提供するために表示されるポップアップメッセージで使用されます。ウェブサイトの:guilabel:`ステータスカラーをカスタマイズするには、詳細設定セクションまでスクロールし、ドットをクリックして色を変更します。
Example
ウェブサイト上で成功したアクションに関する情報は、緑色で表示されます。
フォント¶
Odooでは、段落と見出し、ボタン、入力フィールドなど、ウェブサイト要素のフォントファミリーとフォントサイズをカスタマイズできます。
フォントサイズ：段落、見出し、ボタン、入力フィールドの各セクションで、フォントサイズフィールドを使用してデフォルトサイズを設定します。）アイコンをクリックしてセクションを展開し、カスタムサイズを定義します（例：見出しレベル、ボタンサイズなどに基づいて）。
フォントファミリー: 段落、見出し、:guilabel:`ボタン`のセクションで、ドロップダウンメニューからフォントを選択します。
注釈
システムフォントが選択されている場合、Odooは訪問者のオペレーティングシステムにすでにインストールされているネイティブフォントを使用します。例えば、Androidはデフォルトのシステムフォントとして Roboto を使用します。
カスタムフォント¶
Odooでデフォルトで利用できないカスタムフォントを追加するには、フォントファミリードロップダウンをクリックし、下部にあるカスタムフォントを追加を選択します。Googleフォントを追加またはカスタムフォントをアップロードポップアップで：
Googleフォントを追加するには、Googleフォントを選択ドロップダウンを開き、希望のフォントを選択します。欧州連合のGDPRなどの法律への準拠が求められる地域からウェブサイトを運営している場合は、Googleサーバからフォントを提供をオフに切り替えてください。これにより、GoogleフォントがGoogleのサーバではなく、ウェブサイトのサーバに保存されるようになります。
コンピュータからカスタムフォントをアップロードするには、ファイルを選択をクリックします。
完了したら、保存して再読み込みをクリックします。
ちなみに
選択したフォントのプレビューがウィンドウの右側に表示されます。
スタイル¶
ウェブサイト要素の外観はさらにカスタマイズできます。例えば、段落と見出し、ボタン、リンク、入力フィールドをカスタマイズできます。
段落と見出し¶
段落と見出しのセクションでは、これらのテキスト要素に対する追加のスタイリングオプションが提供されています。次のことができます：
フォント設定を変更します。
行の高さを調整して、テキスト行間の間隔を定義します。
余白を調整して、段落と見出しの周囲の間隔を定義します。
ボタン¶
ウェブサイトのプライマリボタンとセカンダリボタンのスタイルをカスタマイズするには、ボタンセクションに移動し、関連するオプションを編集します：
プライマリスタイルまたはセカンダリスタイルフィールドの横にあるドロップダウンメニューを開いて、各ボタンタイプのスタイル（塗りつぶし、アウトライン、フラットなど）を変更します。アウトラインを選択すると、その下にボーダーの幅オプションが表示され、ボタンのアウトラインの幅を調整できます。
フォント設定を変更します。
パディングを調整して、ボタンのラベル周りのスペースを変更します。
Round Cornersオプションを使用して、ボタンの境界線の半径を調整します。
:guilabel:`クリック時のエフェクト`ドロップダウンメニューで、ボタンをクリックしたときのアニメーションを追加します。
ちなみに
ボタンのパディング、Font Size、Round CornersにカスタムのSmallおよびLargeサイズを定義するには、さらに表示) アイコンをクリックし、関連フィールドを使用します。
リンク¶
Linkセクションで、Link Styleの横にあるドロップダウンメニューを開いて、ウェブサイト上のリンクの外観を選択します。次から選択できます:
No Underline;
Underline On Hover; または
Always Underline。
入力フィールド¶
ウェブサイトの入力フィールドのスタイルをカスタマイズするには、Input Fieldsセクションに移動し、関連するオプションを編集します:
詳細設定¶
詳細設定セクションでは、ヘッダーの表示または非表示、HTMLタグによるウェブサイト検証のためのCode Injectionの使用、ステータスカラーとGraysの設定など、追加の設定を構成できます。
Google Mapsを設定して、ウェブサイト上でマップを表示し、位置情報機能を有効にすることもできます (例: Contact Usページや特定のスニペット)。このオプションを設定するには:
`Google アカウント<https://console.cloud.google.com/getting-started>`_に移動します。
Maps Static API、Maps JavaScript API、およびPlaces APIを有効化します。
重要
Places API (New)は、Odooでまだサポートされていないため、有効化しないでください。
Google APIの使用には、`Googleへの支払い<https://mapsplatform.google.com/pricing/>`_が必要になる場合があります。
API キーを作成してコピーします。
Odoo のウェブサイトエディタで、テーマタブに移動し、詳細セクションで、Google マップの横にあるカスタムキーをクリックします。
生成された API キーをAPI キーフィールドに貼り付けます。
保存 をクリックします。