ビルディングブロック

:ref:`ビルディングブロックをドラッグ&ドロップ <website/building_blocks/add>`してウェブサイトをデザインし、その後:ref:`編集 <website/building_blocks/edit>`してコンテンツとレイアウトのニーズに合わせることができます。

参照

Odoo Tutorial: Design your website: text and colors

ビルディングブロックを追加

ウェブサイトページ <../structure/pages>`にブロックを追加するには、ページにアクセスし、:guilabel:`編集`をクリックして、目的のビルディングブロックを適切な場所にドラッグ&ドロップします。2種類のビルディングブロックが利用可能です：:guilabel:`カテゴリ`と:guilabel:`内部コンテンツ。:guilabel:`内部コンテンツ`ビルディングブロックは:guilabel:`カテゴリ`ビルディングブロック内にのみ追加できます。

カテゴリブロックをクリックすると、ポップアップが表示され、各カテゴリの複数のテンプレートから選択できます。

ちなみに

ブロックを挿入ポップアップの検索バーを使用して、特定のブロックを検索することもできます。

ポップアップブロック選択

カテゴリブロックが配置されたら、その中に:guilabel:`内部コンテンツ`ブロックをドラッグ&ドロップできます。:guilabel:`内部コンテンツ`ブロックを使用すると、既存のカテゴリブロック内に動画、画像、ソーシャルメディアボタンなどの要素を追加できます。

注釈

特定のブロックにアクセスするには、それぞれのアプリケーションまたはモジュールのインストールが必要です（例：プロダクトブロックにはeコマース）。

Example

内部コンテンツ:guilabel:`ソーシャルメディア`ブロックを使用して、すべてのソーシャルメディアアカウントを1か所にまとめます。目的のプラットフォームの横のスイッチをオン/オフに切り替え、アカウントURLをコピー&ペーストします。

ソーシャルメディア内部コンテンツブロック

フォーム

フォームブロックは、ウェブサイト訪問者から情報を収集し、該当する場合はデータベースにレコードを作成するために使用されます。ウェブサイトページにフォームを追加するには、連絡先フォームカテゴリからドラッグ&ドロップし、フォームブロックを選択します。

フォームブロックの例

アクション

デフォルトでは、フォームが送信されると、訪問者が入力した情報を含むメールが自動的に送信されます。データベースにインストールされているアプリによっては、レコードを自動的に作成できる追加の施策が利用可能になる場合があります。別の施策を選択するには、編集をクリックし、フォームをクリックして、カスタマイズタブに移動し、目的の施策を選択します：

フォームを編集してその施策を変更する

デフォルトでは、フォームを送信すると訪問者は*ありがとうございます*ページにリダイレクトされます。:guilabel:`URL`フィールドを使用して、別のページに送信することができます。または、:guilabel:`On Success`フィールドで:guilabel:`Nothing`または:guilabel:`Show Message`を選択することで、リダイレクトせずにフォームのページに留めることもできます。

フィールド

フォームに新しいフィールドを追加するには、:guilabel:`カスタマイズタブ`に移動し、:guilabel:`フォーム`または:guilabel:`フィールド`セクションの横にある:guilabel:`+ フィールド`ボタンをクリックします。フォーム上の新しいフィールド(または他のフィールド)を変更するには、フィールドを選択し、:guilabel:`カスタマイズ`タブの:guilabel:`フィールド`セクションで利用可能なオプションを使用します。たとえば、次のことができます:

  • :guilabel:`Type`フィールドを変更します。

    ちなみに

    データベースから:guilabel:`Existing Field`を選択し、そこに含まれるデータを使用することも可能です。使用可能なフィールドは、選択したアクションによって異なります。データベースに追加されたプロパティフィールドも使用できます。

    すべてのタイプのフォームフィールド

    一部のフィールドは見た目が似ていますが、入力されるデータは特定の形式に従う必要があります。

  • フィールドの:guilabel:`Label`を編集し、:guilabel:`Position`を調整します。

  • フィールド:guilabel:`説明`を有効にします。フォーム上のデフォルトの説明をクリックして変更します。

  • :guilabel:`Placeholder`または:guilabel:`Default value`を追加します。

  • フィールドが:guilabel:`Required`かどうかを指定します。

  • フィールドの:doc:`公開設定 <visibility>`を編集します。

  • :ref:`アニメーション <website/elements/animations>`を追加します。

必要な変更を行ったら、:guilabel:`Save`をクリックします。

Odoo以外のウェブサイトにOdooお問い合わせフォームを追加

iframeを使用して、別のウェブサイトにOdooお問い合わせフォームを表示できます。これを行うには、次の手順に従います:

  1. Odooフォームを準備: Odooウェブサイトのページにお問い合わせフォームを作成し、:ref:`ヘッダーデザイン <website/header_footer/header-design>`と:ref:`フッターデザイン <website/header_footer/footer-design>`を削除します。ページにお問い合わせフォームのみが残るようにしてください。

  2. 埋め込みコードを生成: OdooフォームページのURLをコピーし、`La Digitale.dev <https://ladigitale.dev/digitools/generateur-iframe>`_や`iFrame Generator <https://www.iframe-generator.com/>`_などのiframeジェネレーターに貼り付けます。適切に表示されるように幅と高さを調整します。

  3. Odoo以外のウェブサイトに埋め込みコードを追加: 関連ページのHTML(コードエディターまたはCMS内)を開き、フォームを表示する場所に埋め込みコードを挿入します。

Example

埋め込みコードの例:

<iframe src="https://example.com/odoo-form"
        style="border:0;"
        name="odooForm"
        scrolling="no"
        frameborder="0"
        marginheight="0"
        marginwidth="0"
        height="400px"
        width="600px"
        allowfullscreen>
 </iframe>

埋込コード

埋め込みコードを使用すると、YouTubeの動画、Googleマップの地図、Instagramのソーシャルメディア投稿など、サードパーティサービスのコンテンツをページに統合できます。

ブロックをページに追加した後、ブロックをクリックし、:guilabel:`カスタマイズ`タブに移動して:guilabel:`編集`をクリックします。プレースホルダーコードをカスタム埋め込みコードに置き換えます。

指定したい埋め込みコードへのリンクを追加します

警告

理解していないコードをコピー/ペーストしないでください。データが危険にさらされる可能性があります。

ビルディングブロックを移動、切り替え、または削除する

ブロックのターコイズの境界線を引っ張って、ブロックの上部または下部のスペースを縮小または拡大します。

:icon:`fa-chevron-up`（:guilabel:`chevron up`）または:icon:fa-chevron-down`（:guilabel:`chevron down）をクリックしてブロックの順序を変更し、）をクリックしてページ上でブロックを移動します。複数の:ref:列 <website/building_blocks/cols>`がある場合は、:icon:`fa-chevron-left`（:guilabel:`chevron left）または:icon:fa-chevron-right`（:guilabel:`chevron right）をクリックして列を左右に移動します。

ブロックを削除するには、）をクリックします。

ビルディングブロックのマージンを拡張

ちなみに

)をクリックして、ブロックカテゴリをすばやく変更します。

ビルディングブロックを編集

ビルディングブロックのコンテンツを編集するには、ブロックをクリックして:guilabel:`カスタマイズ`タブに移動します。利用可能なカスタマイズオプションは、選択したブロックのタイプによって異なります。

参照

背景

ビルディングブロックの背景を変更するには、ブロックを選択し、:guilabel:`カスタマイズ`タブに移動して、カラードットまたは別の:guilabel:`背景`オプションをクリックします。色を変更したり、画像、動画、シェイプを追加したりできます。シェイプを選択すると、シェイプをカスタマイズできる新しいフィールドが表示されます。

ちなみに

  • :guilabel:`最背面へ移動`または:guilabel:`最前面へ移動`アイコンを使用して、要素(画像、文字列など)を別の要素の背面または前面に配置します。

    ブロックの位置を変更

  • ブロックのサイズを変更するには、必要に応じてその端の周りにある点をクリックしてドラッグします。

    ブロックのサイズを調整

参照

一般的なテーマ

レイアウト: グリッドと列

ほとんどのビルディングブロックでは、:ref:`グリッド <website/building_blocks/grid>`または:ref:`カラム(cols) <website/building_blocks/cols>`の2つのレイアウトスタイルから選択できます。デフォルトのレイアウトスタイルを変更するには、ブロックをクリックし、:guilabel:`カスタマイズ`タブに移動して、:guilabel:`レイアウト`フィールドを:guilabel:`グリッド`または:guilabel:`Cols`に設定します。

グリッド

グリッド`レイアウトを使用すると、画像や文字列などの要素をドラッグドロップして配置やサイズ変更ができます。:guilabel:`グリッド`が選択されている場合、:guilabel:`画像、文字列、または:guilabel:`ボタン`をクリックして:guilabel:`要素を追加`する追加オプションが利用できます。

グリッドレイアウトが選択されている場合は、画像を選択して必要な場所にドラッグ&ドロップします。

Cols

:guilabel:`Cols`レイアウトを選択すると、ブロック内の1行あたりの要素数を決定できます。これを行うには、変更するブロックを選択し、:guilabel:`Cols`フィールドの横にあるドロップダウンをクリックして、数を調整します。その後、:guilabel:`カスタマイズ`タブの:guilabel:`カラム`セクションのオプションを使用して、特定のカラムの設定を変更できます。

注釈

デフォルトでは、モバイルデバイス <visibility>`では、小さな画面でもコンテンツが読みやすく、アクセスしやすい状態を保つため、1行あたり1つの要素(列)のみが表示されます。値を調整するには、ウェブサイトエディターの上部にある:icon:`fa-mobile`(:guilabel:`モバイルアイコン)をクリックして、列数を調整します。図形はモバイルではデフォルトで非表示になります。

ビルディングブロックを複製する

ビルディングブロックを複製するには、カスタマイズ`タブの上部にある:icon:`fa-clone`(:guilabel:`複製)アイコンをクリックします。複製されると、新しいブロックは元のブロックの下のページに表示されます。

カスタムビルディングブロックを保存

カスタマイズしたビルディングブロックを保存して、他の場所で再利用できます。これを行うには、ブロックを選択し、カスタマイズ`タブに移動して、:icon:`fa-floppy-o`(:guilabel:`フロッピーディスク)アイコンをクリックします。ポップアップの:guilabel:`保存して再読み込み`ボタンをクリックして、カスタムブロックの保存を確定します。

保存したビルディングブロックをページに追加するには、:guilabel:`ブロック`タブに移動し、:guilabel:`カテゴリ`セクションから:guilabel:`カスタム`ブロックをドラッグ&ドロップします。開いたポップアップで、:guilabel:`カスタム`カテゴリ内の目的のブロックをクリックします。

ちなみに

ブロックを挿入`ポップアップで、:icon:`fa-pencil`(:guilabel:`編集)をクリックしてカスタムブロックの名前を変更するか、)をクリックして削除します。