ドラッグ＆ドロップエリアでページコンテンツを編集する

ドラッグ＆ドロップ ページ エディターでは、レイアウトを再配置したり、ページのさまざまなセクションにカスタムスタイルを適用したりできます。ドラッグ＆ドロップ編集機能は、スターターテンプレート、一部のテーマテンプレート、およびドラッグ＆ドロップエリアのあるコードテンプレートを使用して作成されたページで利用できます。 

ドラッグ＆ドロップエディターについて

ドラッグ＆ドロップエリアは、ウェブサイトコンテンツのブロックであるモジュールで構成されます。モジュールは水平方向の列または垂直方向の列で設定できます。これは、セクションにグループ化することができます。 

行、列、セクションを作成することで、スタイルを再配置したり、一度に複数のモジュールにスタイルを適用したりすることができます。ドラッグ＆ドロップコンテンツのスタイルのカスタマイズについての詳細をご確認ください。  

1. モジュール：ウェブサイトコンテンツの個別ブロック。リッチ テキスト モジュールなど、モジュールによっては複数のタイプのコンテンツを含めることができます。 
2. 行：モジュールを横に並べたもの。行全体にスタイルを適用するか、またはページ内でその位置を再配置することができます。 
3. 列：複数のモジュールを縦に積み重ねたもの。列全体にスタイルを適用するか、またはページ内でその位置を再配置することができます。 
4. セクション：ページ全幅をカバーする複数の行または列のグループ。セクション全体にスタイルを適用するか、またはページ内でその位置を再配置することができます。 

コンテンツを整理

サイドバーエディタには、コンテンツのセクション、行、列、モジュールの概要が表示されます。そこから、名前を変更、編集、複製、削除、または非表示にすることができます。 

• コンテンツを開きます。

  • ウェブサイトページ：HubSpotアカウントにて、［マーケティング］ > ［ウェブサイト］ > ［ウェブサイトページ］の順に進みます。
  • ランディングページ：HubSpotアカウントにて、［マーケティング］ > ［ランディングページ］の順に進みます。
• ページの上にカーソルを重ねて［編集］をクリックします。
• サイドバーエディタで、[コンテンツ]タブをクリックします。 
• サイドバーエディタに表示されるページ要素を制御できます。 
  • ページのセクションのみを表示するには、[すべて折りたたむ]をクリックします。これにより、すべての行、列、モジュールが折りたたまれ、サイドバーエディタにセクションのみが表示されます。 
  • ページのすべてのコンテンツを表示するには、[すべて展開]をクリックします。サイドバーエディタにすべてのセクション、行、列、モジュールが表示されます。 
  • 個々のページ要素またはコンテナを表示するには、名前の横にある++記号をクリックします。
  • 要素またはコンテナを非表示にするには、名前の横にある-マイナス記号をクリックします。 
• ページ要素を編集、名前変更、複製、削除、非表示にすることもできます。 
  • 要素を編集するには、その名前をクリックします。 
  • 要素の名前を変更するには、名前の横にある 3つの楕円ドットをクリックし、[要素の名前を変更]を選択します。ダイアログボックスに、要素の名前を入力し、[保存]をクリックします。 
  • 要素を複製するには、名前の横にある楕円形の 3つの点をクリックし、[複製]を選択します。これにより、隣接する元の要素の正確なコピーが作成されます。 
  • 要素を削除するには、名前の横にある楕円形の 3つの点をクリックし、[削除]を選択します。 
  • モジュールを非表示にするには、モジュール名の横にある楕円形の 3つの点をクリックし、[このモジュールを非表示にする]を選択します。これにより、ページプレビューではモジュールが非表示になりますが、サイドバーエディタでは非表示になります。ページに非表示のモジュールを表示するには、その名前の横にある 3つの楕円形のドットをクリックし、[このモジュールを表示]を選択します。 

セクションを使用する

ドラッグアンドドロップエディタでは、モジュールを空白のセクションレイアウトにドラッグすることで、再利用可能なページセクションを作成できます。デベロッパーは、デベロッパードキュメントを使用してこれらのセクションを作成することもできます。作成されたセクションは、ドラッグ＆ドロップ編集をサポートする任意のページで使用できます。スマートルールを含む保存されたセクションは、ページに追加されたときにこれらのルールを使用します。 

注意:一度にドラッグアンドドロップエディタから保存できる再利用可能なセクションは50個までです。新しい再利用可能なセクションを保存するには、既存の再利用可能なセクションを削除します。 

セクションを作成

セクションを保存して、同じテーマを使用して他のページで再利用できるようにすることができます。

• コンテンツを開きます。

  • ウェブサイトページ：HubSpotアカウントにて、［マーケティング］ > ［ウェブサイト］ > ［ウェブサイトページ］の順に進みます。
  • ランディングページ：HubSpotアカウントにて、［マーケティング］ > ［ランディングページ］の順に進みます。
• ページの上にカーソルを重ねて［編集］をクリックします。
• コンテンツエディターで、2つのセクションの間にカーソルを置き、+プラスアイコンをクリックします。 

• 右側のパネルで、[レイアウト]タブをクリックして、セクションのレイアウトを選択します。 

• コンテンツエディタで、モジュールをレイアウトの上にドラッグして、所定の位置にドロップします。セクションの各モジュールを繰り返します。 

• セクションの上にカーソルを 置き、ダウンカラットダウンアイコンをクリックして、[セクションを保存]を選択します。 

注:既存のページセクションとレイアウトなしで作成されたものは、再利用可能なセクションとして保存することもできます。  

• 右側のパネルに、セクションの名前と説明を入力し、[保存]をクリックします。 

セクションの追加または削除

• コンテンツを開きます。

  • ウェブサイトページ：HubSpotアカウントにて、［マーケティング］ > ［ウェブサイト］ > ［ウェブサイトページ］の順に進みます。
  • ランディングページ：HubSpotアカウントにて、［マーケティング］ > ［ランディングページ］の順に進みます。
• ページの上にカーソルを重ねて［編集］をクリックします。
• コンテンツエディターで、2つのセクションの間にカーソルを置き、+プラスアイコンをクリックします。 

• 右側のパネルで、セクションの上にカーソルを置き、[選択]をクリックします。ドラッグアンドドロップエディタから保存されたセクションは[保存済み]セクションの下に表示され、開発者が作成したセクションは[テーマ]セクションの下に表示されます。  
• スマートルールを含む保存されたセクションを追加すると、それらのルールが新しく追加されたセクションに適用されます。これらのセクションには「Smart」と表示されます。 
• セクションを削除するには、[++]アイコ ンをクリックしてセクションを追加し、セクションにカーソルを合わせて[ 削除]アイコンをクリックします。ダイアログボックスで［削除］をクリックします。 

行、列、またはセクションを編集する

• ページエディターで、行、列、またはセクションの上にカーソルを重ねてedit編集アイコンをクリックします。
• 行、列、セクションの周囲のパディングと余白をカスタマイズするには、サイドバーエディターで［位置合わせとスペース］をクリックします。
• エリアの背景を編集するには、サイドバーエディターで［背景］をクリックし、以下のいずれかのスタイルオプションを選択します。 
  • なし：背景の色や画像を削除します。
  • 色：背景として単一の色を設定します。16進値を入力するか、カラーピッカーをクリックして色を選択してから、透明度の値を入力します。
  • 画像：背景として画像を設定します。新しい画像を追加するには、［アップロード］をクリックしてコンピューターから画像を追加するか、または［画像を参照］をクリックしてファイルから画像を選択します。 
  • グラデーション：背景として2色のグラデーションを設定します。［方向］ドロップダウンメニューをクリックし、グラデーションの方向を選択します。それぞれの色について、16進値を入力するか、カラーピッカーをクリックして色を選択してから、透明度の値を入力します。

• 既存の要素のコピーを作成するには、その要素にカーソルを合わせ、矢印アイコンをクリックした後、duplicate cc複製アイコンをクリックします。
• ページから要素を削除するには、要素の上にカーソルを置いてdelete 削除アイコンをクリックします。 

モジュールを追加および編集する

• コンテンツを開きます。

  • ウェブサイトページ：HubSpotアカウントにて、［マーケティング］ > ［ウェブサイト］ > ［ウェブサイトページ］の順に進みます。
  • ランディングページ：HubSpotアカウントにて、［マーケティング］ > ［ランディングページ］の順に進みます。
• ページの上にカーソルを重ねて［編集］をクリックします。
• コンテンツエディターで、サイドバーエディター内のモジュールをクリックし、ページ上の任意の位置にドラッグします。 
• モジュールの幅を調整するには、列の間にある垂直方向の区切りをクリックして任意の位置にドラッグします。

• モジュール内のコンテンツをカスタマイズするには、モジュールの上にカーソルを置き、以下のいずれかのアイコンをクリックします。

• • edit モジュールを編集：モジュールのコンテンツを編集します。
  • clonduplicate モジュールを複製：ページ上にこのモジュールのコピーを作成します。
  • delete モジュールを削除：このモジュールをページから削除します。