メインコンテンツにスキップ
お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。
Landing Pages

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

更新日時 2022年 3月 29日

対象製品

すべての製品とプラン

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

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

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

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

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

edit-drag-and-drop-areas-in-page-editor

使用セクション

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

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

セクションを作成

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

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

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

add-a-page-section

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

add-blank-layout-to-page

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

ドラッグアンドドロップオンレイアウト

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

セーブアセクション

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


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

セクションを追加する

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

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

add-a-page-section

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

アドスマートセクション

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

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

copy-section-hubl-menu

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

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

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

edit-column-icons

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

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

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

adjust-column-size-in-drag-and-drop-editor

  • モジュール内のコンテンツをカスタマイズするには、モジュールの上にカーソルを置き、以下のいずれかのアイコンをクリックします。
    • edit モジュールを編集:モジュールのコンテンツを編集します。
    • clonduplicate モジュールを複製:ページ上にこのモジュールのコピーを作成します。
    • delete モジュールを削除:このモジュールをページから削除します。

edit-module-icons

Was this article helpful? *
This form is used for documentation feedback only. Learn how to get help with HubSpot.