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

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

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

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

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

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

使用セクション

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

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

セクションを作成

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

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

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

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

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

• セクションにカーソルを合わせ、ダウンカラットダウンのアイコンをクリックし、「セクションを保存」を選択します。 

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

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

セクションを追加する

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

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

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

セクションのHubLをコピーする

ページエディタでは、セクションのHubLマークアップをコピーして、必要に応じてコードを再利用することができます。これは、コードファイル内でドラッグ＆ドロップセクションを再作成する場合に便利です。

セクションのHubLマークアップをコピーする方法について説明します。

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

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

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

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

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

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

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

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