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

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

更新日時 2020年 6月 2日

対象製品

Marketing Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Marketing Hub Basic(旧製品)

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

 : フレキシブルカラムはスマートコンテンツをサポートておらず、ブログツールでは使用できません。ページのレイアウトに関してさらに多くのことを制御できるようにするには、ウェブ開発者と協力して、ページテンプレートにドラッグ&ドロップエリアを追加します。

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

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

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

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

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

フレキシブルカラムを含むテンプレートによって新しいページを作成したら、エディターで直接、構造とコンテンツをカスタマイズできます。

  • ページにモジュールを追加するには、左側の [追加] パネルをクリックし、モジュールをクリックしてそれをレイアウトにドラッグします。コンテンツエディターでは、新しいモジュールをドロップできる場所の上を通るたびに、モジュールアイコンが強調表示されます。
  • フレキシブルカラムのレイアウトからモジュールを削除するには、モジュールの上にカーソルを合わせて、 delete ゴミ箱のアイコンをクリックします。

flexible%20columns%20add%20module

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

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

flexible%20columns%20move%20modules


モジュールとコンテンツの編集が完了したら、[保存] または [公開] をクリックして変更を公開します。
/jp/cos-pages-editor/how-to-use-flexible-columns-in-your-pages