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

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

この記事では、ドラッグ＆ドロップ編集機能を使用してページのコンテンツとレイアウトを編集する方法について説明します。ページの設定を編集したり、ウェブサイトでページを公開したりする方法についてご案内します。

ドラッグ＆ドロップ編集機能の仕組み

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

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

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

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

モジュール内のコンテンツをカスタマイズするには、そのモジュールの上にカーソルを重ねて、目的のアクションのアイコンをクリックします。

• edit編集：ページ上のモジュールのコンテンツをインラインで直接編集するか、左側のパネルで編集します。 
• stylesスタイル：左側の［スタイル］パネル内で、このモジュールで利用可能なスタイルを管理します。ほとんどのモジュールスタイルは［スタイル］タブで管理できますが、テーマに固有のスタイルオプションは［オプション］タブ内で使用可能になります。
• clonduplicate コピー：ページ上にこのモジュールのコピーを作成します。
• delete削除：このモジュールをページから削除します。

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

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

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

• ページエディターで、行、列、またはセクションにカーソルを合わせ、ドロップダウン矢印をクリックし、styles［［行／列／セクション］をスタイル設定］を選択します。
• 左側のパネルで、［位置合わせとスペース］をクリックして、行、列、またはセクションの周囲のパディングと余白をカスタマイズします。
• ［背景］をクリックして、このセクションの背景のスタイルオプションを展開します。
  • なし：これを選択すると、背景の色や画像が削除されます。
  • 色：これを選択すると、背景は単色になります。背景色の値と透明度を入力します。
  • 画像：これを選択すると、背景は画像になります。既定でテンプレートに画像がある場合は、［置換］を選択して画像を変更します。新しい画像を追加するには、［アップロード］をクリックしてコンピューターから画像を追加するか、または［画像を参照］をクリックしてファイルから画像を選択します。
  • グラデーション：背景として2色のグラデーションを選択します。まず、グラデーションの方向を設定します。次に16進数の値を入力し、各色の透明度を設定します。
• 既存の要素のコピーを作成するには、その要素にカーソルを合わせ、矢印アイコンをクリックした後、duplicate［［行／列／セクション］をコピー］を選択します。
• ページから要素を削除するには、その要素にカーソルを合わせ、矢印アイコンをクリックしてから、delete［［行／列／セクション］を削除］を選択します。

ページの編集中、変更は自動的に保存されます。未公開のページの下書きとして以前に保存されたものにアクセスするには、左上の［自動保存済み］にカーソルを置き、［変更履歴］をクリックします。

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

新しいモジュールをページ上の所定の位置にドラッグ＆ドロップして、別の要素を追加することができます。こうすることで、コンテンツに応じて簡単にページのデザインを調整できます。

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

ページレイアウトのモジュールを追加したり編集したりする際にページ上の要素の幅を調整するには、列の間の垂直方向の区切りをクリックし、ドラッグして幅を調整します。

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

• スターターテンプレートを使用している場合、左側のパネルの［デザイン］タブでテキスト、フォーム、およびボタンに適用されるフォント、スタイル、および色を変更できます。
• 開発者が作成したコードテンプレートをドラッグ＆ドロップエリアで使用している場合、開発者がそのテンプレートに含めたスタイルオプションがあれば、それらが表示されます。
• テーマテンプレートを使用している場合、テーマ設定にアクセスして編集できます。