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

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

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

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

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

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

セクションの使用

ドラッグ＆ドロップエディターでは、空白のセクションレイアウトにモジュールをドラッグすることで、再利用可能なページセクションを作成することができます。開発者の方は、開発者用のドキュメントを使ってこれらのセクションを作成することもできます。一度作成したセクションは、ドラッグ＆ドロップ編集に対応したすべてのページで使用することができます。 スマートルールを含む保存されたセクションは、ページに追加されるとそのルールが使用されます。 

ご注意ください。ドラッグ＆ドロップエディターで保存できる再利用可能なセクションは、一度に25個までとなります。新しい再利用可能なセクションを保存するには、既存の再利用可能なセクションを削除します。

セクションを作成

• コンテンツに移動します。

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

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

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

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

ご注意ください。既存のページセクションや、レイアウトなしで作成されたページセクションも、再利用可能なセクションとして保存できます。

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

セクションの追加

• コンテンツに移動します。

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

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

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

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

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

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

• コンテンツに移動します。

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

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

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