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

HubSpotページでフレキシブルカラムを使用する

更新日時 2023年 3月 31日

以下の 製品でご利用いただけます(別途記載されている場合を除きます)。

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

ページテンプレートにフレキシブルカラムを追加すると、そのカラム内にコンテンツエディターでモジュールを追加したり並べ替えたりすることができます。

F lexible columnは、ブログ、Eメール、システムページのテンプレートでは利用できません、.コンテンツエディターでブログ一覧ページを編集する方法について詳しく説明します。

テンプレートにフレキシブルカラムを追加する

コンテンツエディターでフレキシブルカラムを使うには、まずページテンプレートにフレキシブルカラムを追加する必要があります。デザインマネージャーでフレキシブルカラムに追加したモジュールは、コンテンツエディターでそのカラムに表示されます。

注意:デザインマネージャーでフレキシブルカラムに追加オプションされたモジュールは、新しく作成されたページにのみ表示されます。コンテンツエディターから、既存のページにモジュールを追加することができます。 

  • HubSpotアカウントにて、[マーケティング] > [ファイルとテンプレート] > [デザインツール]の順に進みます。
  • ファインダー内で、レイアウトエディターで開くテンプレートをクリックします。 
  • インスペクターで、[+追加]タブをクリックします。
  • 検索バーにフレキシブルカラムを入力し、フレキシブル カラム モジュールをクリックしてテンプレートにドラッグします。 
  • [+追加]タブで、フレキシブルカラムに追加するモジュールをクリックし、テンプレートのフレキシブルカラムにドラッグします。 

フレキシブルカラムの分割

コンテンツエディターでフレキシブルカラムを編集する

フレキシブルカラムを使用するテンプレートで新しいページを作成したら、コンテンツエディターでそれらのフレキシブルカラムの構造とコンテンツをカスタマイズできます。

  • HubSpotアカウントにて、[マーケティング] > [ウェブサイト] > [ウェブサイトページ]の順に進みます。
  • ページの上にカーソルを重ねて[編集]をクリックします。
  • コンテンツエディターでモジュールをフレキシブルカラムに追加するには、サイドバーエディターでモジュールをクリックし、フレキシブルカラムの上にドラッグします。

flexible%20columns%20add%20module

注:フレキシブルカラムを使用するページのエリアにのみモジュールを追加できます。 

  • フレキシブルカラムでモジュールを削除するには、モジュールの上にカーソルを置き、delete削除アイコンをクリックします。
  • フレキシブルカラムでモジュールを並べ替えること:
    • フレキシブルカラムの任意のモジュールにカーソルを置き、 flexColumn フレキシブル カラム アイコンをクリックします。
    • モジュールの上にある4つの矢印のアイコンをクリックし、フレキシブルカラム内の所定の位置にドラッグします。 
    • モジュールの配置換えを終了する場合は、レイアウトモードの終了をクリックします。

rearrange-modules-in-a-flexible-column

  • コンテンツエディターの右上にある「公開」または「更新」をクリックすると、変更が反映されます。 
この記事はお役に立ちましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。