要素

要素は、コンテンツを効果的に構造化し、表示するパーツです。タイトル、リスト、テキストの強調 などのテキスト系の要素から、ボタン などのインタラクティブ要素まで、さまざまな種類があります。さらに、画像、アイコン、動画、:ref:`アニメーションといったビジュアル要素を追加することで、コンテンツの見た目や整理をより魅力的にすることができます。

ウェブサイト要素を追加または変更するには：

1. 関連するウェブサイトページに移動し、:guilabel:`編集`をクリックします。

2. 要素を追加または変更したいページのセクションをクリックします。

3. 必要な変更を行います。

4. :guilabel:`保存`をクリックします。

注釈

例えば、見出し、ボタン、リンク、段落テキストのデフォルトスタイルは、ウェブサイトエディタの:doc:`テーマタブ <themes>`で定義されています。

タイトル

タイトルは見出しを定義し、ウェブサイトのコンテンツを明瞭性と構造のために異なるレベルに整理します。タイトルを挿入するには、/title`と入力し、見出しスタイル（:guilabel:`見出し1、見出し2、または:guilabel:見出し3）を選択して、テキストを入力します。

ちなみに

または、テキストを入力して選択し、ウェブサイトエディタの:guilabel:`カスタマイズ`タブの:guilabel:`インラインテキスト`セクションから適切なスタイルを選択します。フォントや色などの追加の書式設定オプションも、このセクションで利用できます。

ボタン

ボタンは、別のページやページアンカーにリンクするためのインタラクティブな要素です。ボタンを挿入するには：

1. `/button`と入力します。

2. :guilabel:`リンクラベル`フィールドにボタンのラベルを入力します。

3. URLまたはメールアドレス`を追加します。ページを検索するには/`を、アンカーにリンクするには`#`を入力します。

4. スタイル、サイズ、:guilabel:`レイアウト`を設定して、ボタンの外観を定義します。

5. 必要に応じて、リンク先のページやアンカーを新しいタブで開くようにスイッチを切り替えます。

6. :guilabel:`適用`をクリックして変更を保存します。

ちなみに

既存のボタンを変更するには、ボタンをクリックし、ウェブサイトエディタの:guilabel:`インラインテキスト`セクションでオプションを編集します。

画像

画像を挿入するには：

1. `/image`と入力します。

2. :doc:`Unsplash データベースを検索 </applications/general/integrations/unsplash>`するか、:guilabel:`画像をアップロード`をクリックして、ローカルの画像からファイルを選択してください。

3. 追加 をクリック。

4. 画像をカスタマイズするには、画像をクリックし、ウェブサイトエディターの:guilabel:`画像`セクションでオプションを編集します。例:

   • 画像を:guilabel:`置き換え`ます。

   • alt タグ を:guilabel:`説明`フィールドに定義します。

   • :guilabel:`ツールチップ`フィールドにタイトルタグを入力します。このテキストは、訪問者が画像の上にマウスを置いたときに表示されます。

   • :guilabel:`形状`を追加します。一部の形状では色のカスタマイズも可能です。

   • 画像の:guilabel:`幅`を調整します。例えば、パフォーマンスを向上させるために調整します。表示に十分な場合は、より小さいサイズが提案されることがあります。

   • :guilabel:`変形`ツールを使用して画像のサイズを変更します。

   • :guilabel:`パディング`を調整して、画像の周りにスペース(ピクセル単位)を追加します。

   • など。

動画

動画を追加するには、`/video`と入力し、URLを挿入して、必要なオプションをオンにします:

• 自動再生: ページにアクセスしたときに動画を自動的に再生します。デフォルトでは動画は自動的にミュートされます。

• ループ: 動画をループ再生します。

• プレーヤーコントロールを非表示

• 全画面表示ボタンを非表示

• 開始時刻: 動画の開始タイムスタンプを MM:SS 形式で指定します。

アイコン

アイコンを挿入するには、/image`と入力し、:guilabel:`アイコン`タブに移動し、アイコンを選択して:guilabel:`追加`をクリックします。アイコンを変更するには、アイコンをクリックし、ウェブサイトエディターの:guilabel:`アイコン`セクションを使用して、:guilabel:`色、サイズ、アニメーション、:guilabel:`形状`などのオプションをカスタマイズします。

リンク

リンクは異なるページやリソースを接続し、訪問者を案内してナビゲーションを改善するために使用されます。リンクを追加するには、/link`と入力し、表示されるポップアップでリンクの:guilabel:`ラベル`を入力し、:guilabel:`URLまたはメールアドレス`を追加します。/`と入力してページを検索し、`#`と入力して:ref:`アンカー <website/building_blocks/anchor>`にリンクします。

ちなみに

デフォルトでは、:guilabel:`スタイル`フィールドは:guilabel:`リンク`に設定されています。別のスタイルを選択して、リンクを:ref:`ボタン <website/elements/buttons>`に変換します。

リスト

リストはコンテンツを明確に整理し、情報を読みやすくし、ウェブページの構造を改善します。/list`と入力して、:guilabel:`箇条書きリスト、番号付きリスト、または:guilabel:`チェックリスト`の3種類のリストから選択します。

テキストハイライト

ウェブサイトエディターの:guilabel:`インラインテキスト`セクションでタイトルや文字列にハイライトを追加できます。ハイライトを追加するには：

1. ハイライトしたい文字列またはタイトルを選択します。

2. ウェブサイトエディターで:guilabel:`ハイライト`をクリックします。

3. ハイライトスタイルを選択します。

4. :guilabel:`色`を変更します。

5. :guilabel:`太さ`を選択します。

アニメーション

アニメーションは:doc:ビルディングブロック <building_blocks>`や画像や文字列などのウェブサイト要素に動きを追加するために使用されます。3種類のアニメーションが対応可能です：:guilabel:`スクロール時、表示時、:guilabel:`ホバー時`（画像のみ）。

ウェブサイト要素にアニメーションを追加するには：

1. 要素をクリックします。

2. ウェブサイトエディターで、要素の関連セクション（例：ボタン、カラム、:guilabel:`インラインテキスト`など）に移動します。

3. :guilabel:`アニメーション`フィールドで、希望するアニメーションタイプを選択します。

4. 必要に応じてアニメーション設定をカスタマイズします。対応可能なオプションは選択したアニメーションタイプによって異なります。

スクロール時のアニメーション

スクロール時のアニメーションでは、次のことが可能です：

• 要素が画面に入るときにアニメーションを追加するには:guilabel:`入金`を選択し、画面から出るときに追加するには:guilabel:`出金`を選択します。

• :guilabel:`エフェクト`を選択します。

• エフェクトの:guilabel:`方向`を選択します。

• エフェクトの:guilabel:`強度`を調整します。

• :guilabel:`スクロールゾーン`を定義します。最初の値はエフェクトが開始するときに表示される画面の割合を表し、2番目の値は終了時の割合を表します。

表示時のアニメーション

表示時のアニメーションでは、次のことが可能です:

• さまざまなエフェクトから選択する。

• エフェクトの:guilabel:`方向`を選択します。

• トリガー`オプションを選択して、アニメーションが発生するタイミングを定義します::guilabel:`初回のみ`または:guilabel:`毎回。

• エフェクトの:guilabel:`強度`を調整します。

• アニメーションを数秒後にトリガーする場合は、:guilabel:`開始までの時間`フィールドでその秒数を定義します。

• アニメーションの:guilabel:`所要時間`を選択します。

ホバー時のアニメーション(画像のみ)

ホバー時`のアニメーションは、:ref:`画像 <website/elements/images>`に追加できます。アニメーションの:guilabel:`エフェクト、色、:guilabel:`線の幅`を選択できます。

参照

Odoo HTMLエディタ