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

ページでのフレキシブルカラムの使用

更新日時 2月 11, 2019

対象製品

Marketing Hub  Professional, Enterprise
Basic
HubSpot CMS

フレキシブルカラムは、ページエディターで新しいモジュールを編集して再構成できるページのセクションです。フレキシブルカラムをテンプレートに追加し、ページエディターでフレキシブルカラム内のモジュールを編集する方法について説明します。

 注: フレキシブルカラムは、ランディングページおよびウェブサイトページでのみ利用可能です。フレキシブルカラムはスマートコンテンツをサポートしていません.

テンプレートへのフレキシブルカラムの追加

ページテンプレートにフレキシブルカラムを追加することで、エディタでモジュールの追加、削除、または再配置を行えますテンプレートのフレキシブルカラムに追加されたモジュールは、既定でページエディターで使用できます。

  • HubSpotアカウントにて、[マーケティング] > [ファイルとテンプレート] > [デザインツール]の順に進みます。
  • ファインダー既存のテンプレートをクリックしてエディター内で開きます。新しいテンプレートを作成するには、[ファイル] ドロップダウンメニューをクリックし、[新規ファイル] を選択します。
  • 右側のインスペクターで、[+追加] をクリックして、フレキシブルカラムモジュールを検索します。モジュールをクリックしてテンプレートの本文にドラッグします。
  • フレキシブルカラムに表示する他のすべてのモジュールをクリックしてドラッグします.モジュールをドラッグしてフレキシブルカラムの上に置くと、青い四角形が表示され、コンテンツをドロップできるようになります。
  • フレキシブルカラム内のモジュールを複数の列に横並びで配置する場合は、フレキシブルカラムモジュールを右クリックして、[フレキシブルカラムを分割] を選択します。 

注: 追加のモジュールは、ページレベルのフレキシブルカラムから追加、編集、または削除できます。

フレキシブルカラムの分割ページでのフレキシブルカラムの編集

フレキシブルカラムを含むテンプレートによって新しいページを作成したら、エディターで直接、構造とコンテンツをカスタマイズできます。
  • ページにモジュールを追加するには、左側のサイドバーのエディターペインでプラスアイコン + をクリックします。
  • 新しいモジュールをレイアウトにドラッグ&ドロップします。コンテンツエディターでは、新しいモジュールをドロップできる場所の上を通るたびに、モジュールアイコンが強調表示されます。

フレキシブルカラムの追加

注: 新しいモジュールは、フレキシブルカラムを使用するページ内のエリアにのみ追加できます。特定のエリアでモジュールをドロップできない場合、そのエリアがテンプレートのフレキシブルカラムに含まれていない可能性があります。

  • モジュールのレイアウトを再配置するには、フレキシブルカラムのいずれかのモジュールにカーソルを合わせて、[レイアウトを変更] アイコンをクリックします。
  • 移動可能なモージュルの上部には、4 方向矢印アイコンが表示されます。マウスカーソルも 4 方向矢印アイコンに変わります。
  • 移動するモジュールをクリックしてドラッグし、ページ上の新しい利用可能な位置にドロップします。コンテンツエディターでは、モジュールが配置される領域が紫色の影で表示されます。
  • モジュールを移動したら、[レイアウトモードを終了] をクリックします。

フレキシブルカラムモジュールの移動

左側のサイドバーペインで、フレキシブルカラムのレイアウトを編集することもできます。

  • 左のサイドバーペインでモジュールアイコン integrations をクリックします。すべてのモジュールが、ページに表示される順番にフレキシブルカラムへ追加されます。
  • モジュールを並べ替えるには、移動するモジュールをクリックして、モジュールリスト内の新しい位置にドラッグ&ドロップします。右側のコンテンツエディターが、新しいレイアウトに更新されます。

フレキシブルカラムモジュールサイドバー

  • フレキシブルカラムのレイアウトからモジュールを削除するには、モジュールの上にカーソルを合わせて、ゴミ箱のアイコン delete をクリックします。
  • モジュールとコンテンツの編集が完了したら、[保存] または [公開] をクリックして変更を公開します。