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

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

更新日時 2021年 4月 30日

対象製品

すべての製品とプラン

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

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

ドラッグ&ドロップエリアは、ウェブサイトコンテンツのブロックであるモジュールで構成されます。これらのモジュールは、横の行または縦の列で配置できます。行と列は要素のセクションにグループ化できます。

これらの要素をグループ化することで、一連の背景スタイルをページの任意のセクションに適用できます。行、列、またはセクションをドラッグ&ドロップしてページレイアウトを調整することもできます。

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

overview-of-drag-and-drop

モジュールのコンテンツを編集する

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

  • edit モジュールを編集: コンテンツエディターまたは左側のパネル内でモジュールのコンテンツを編集します。 
  • styles モジュールをスタイル設定する:サイドバーエディター内でモジュールのスタイル設定を管理します。ほとんどのモジュールスタイル[スタイル]タブで管理できますが、テーマに固有のいくつかのスタイルオプションは[オプション]タブで使用可能になります。
  • clonduplicate モジュールを複製:ページ上にモジュールのコピーを作成します。
  • delete モジュールを削除:モジュールをページから削除します。

edit-module

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

行全体、列全体、または要素のセクションのスタイルを編集できます。たとえば、コンテンツを中央揃えにしたり、背景画像を適用したり、ページ上で要素の周囲の間隔を編集したりできます。

行、列、セクションのスタイルを編集するには、次のようにします。

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

remove-a-column

ページにモジュールを追加する

ページにモジュールを追加するには、サイドバーエディターで目的のモジュールをクリックし、そのモジュールをページにドラッグして適切な位置にドロップします。 

add%20a%20common%20module%20to%20a%20page

ページのレイアウトを調整する

ページ上の要素の幅を調整するには、列の間にある垂直方向の区切りをクリックし、ドラッグして幅を調整します。

edit%20column%20width%20in%20page

ページのスタイルを編集する

ページ上の色、フォント、間隔を編集するには、サイドバーエディターの[デザイン]タブをクリックします。

design-tab-options