テンプレートのレイアウトの構成およびカスタマイズ方法

更新日時 July 1, 2016

必要条件

ソフトウェア: HubSpot マーケティング
サブスクリプション: Basic, Pro, & Enterprise
このガイドの前のチュートリアルでは、新しいテンプレートのレイアウトを作成する方法を学びました。この記事では、一度作成したテンプレートを変更する方法について説明します。

テンプレートを構成

デザインマネージャーのテンプレートビルダーインターフェイスを使用すると、HTMLを記述しなくても、コンテンツのレイアウトをすばやく作成できます。テンプレートの構成の編集を開始する前に、編集するテンプレートを選択する必要があります。
Choose teplate

モジュールを追加してドラッグ

レイアウトにモジュールを追加する方法は複数ありますが、最も簡単な方法は、[Add row(行を追加)]ボタンをクリックすることです。追加したら、レイアウト内でこのモジュールを表示したい場所までモジュールをドラッグします。モジュールを他のモジュールの上にドラッグすると、列が作成されるか、モジュールがグループ化されます。
Drag and drop

列の幅を変更

列の幅を変更するには、モジュールの間にマウスカーソルを置き、水平方向にドラッグします(下図参照)。 

HubSpot Help article screenshot

モジュールをグループ化

b

詳細情報

テンプレートビルダーには、12列型レスポンシブグリッドというしくみを採用しています。これは、CSSファイルを使用し、さまざまなサイズのデバイスで各モジュールの幅を自動的に計算するというものです。列の幅をドラッグすると、そのモジュールのHTMLクラス属性が調整され、それに応じて幅が調整されます。この機能のおかげで、デザイナーの作業時間が大幅に短縮されます。なぜなら、コンテナーの最大幅の設定を除けば、モジュールの幅を調整する必要がなくなるからです。列はモバイルデバイスで自動的に整列されるため、デザイナーは1行のコードも記述する必要がありません。 CSSを追加する場所についてはこのガイドの後のセクションでさらに詳しく学びます

技術的観点では、グループ化により、一連のモジュールに対してラッピングマークアップが追加されます。このマークアップには、その領域とコンテンツを対象としてスタイルを設定するためのIDやクラスを付与することができます。

続きを読む

モジュールグループは、一定数のモジュールを1つの単位にまとめたものであり、これがページのセクションの構成要素となります。モジュールをグループ化するには、[Group...(グループ...)]を選択します。 

次に、グループ化するモジュールをクリックします。グループ化する有効な選択肢を選択したら、[Create Group(グループを作成)]をクリックします。

下の例では、複数のモジュールがページの「マストヘッド」としてグループ化されています。このガイドの後のセクションでは、グループをグローバル化して複数のテンプレートで使用可能にする方法について説明します。  

 

Group modules

水平方向に分割

モジュールの[Split horizontally(水平方向に分割)]を使用すると、モジュールが半分になり、2つのモジュールが作成されます。

Split Horizontally

ギアメニューのオプションを使用してモジュールを分割する以外にも、モジュールの上にマウスカーソルを置いて[Split(分割)](下図参照)を押してモジュールを分割することもできます。

Split

下にモジュールを追加

[Add module below(下にモジュールを追加)]を使用すると、選択したモジュールの下にモジュールを挿入し、それらをグループ化できます。グループは、追加のマークアップでラップされたモジュールの単位で、それに応じてスタイルを設定できます。

Add module below

テンプレートをカスタマイズ

テンプレートの一般的なレイアウトを構成したら、モジュールを入れ替えるなど、テンプレートのスタイルを設定しやすくするためのカスタマイズを実行できます。

HubSpot Help article screenshot

オプションを編集

オプションの編集機能を使用すると、モジュールの基本的な構成を変更できます。これらの設定には通常、デフォルトのコンテンツ、コンテンツの編集画面のラベル、およびその他のモジュール設定が含まれます。モジュールのタイプに応じて、この機能では、さまざまなオプションを構成できます。デフォルトのコンテンツと設定については、このガイドの後のセクションでさらに詳しく説明します。

Edit options

CSSを編集

[Edit CSS(CSSを編集)]を使用すると、テンプレートのHTMLマークアップをカスタマイズしやすくなります。 クラスの追加、ID、インラインスタイル、ラッピングマークアップについては、このガイドの後のセクションでさらに詳しく説明します。

Edit CSS

モジュールを交換

[Swap module(モジュールを交換)]を使用すると、テンプレートのそのセクションに必要なモジュールのタイプを選択できます。さまざまなモジュールの詳細な内訳については、このガイドの後のセクションで説明します。

Swap module

モジュールをグローバルにする

[Make module global(モジュールをグローバルにする)]を使用すると、モジュールを、他のテンプレート全体で使用できるグローバルモジュールにすることができます。 グローバルコンテンツの使用方法については、このガイドの後のセクションで説明します。

Make global module

モジュールを削除

[Delete module(モジュールを削除)]を使用すると、モジュールを削除できます。 モジュールを削除する場合、そのテンプレートを使用しているページまたはEメールの数を示すプロンプトが表示されます。そのモジュールのコンテンツは破棄されます。モジュールを削除し、そのモジュール内で使用されているコンテンツを破棄するには、[Discard All(すべて破棄)]を押します。[See what you're discarding(破棄するコンテンツを確認)]をクリックすると、そのページ上のコンテンツを確認できます。  

復元したいコンテンツを誤って破棄した場合は、テンプレートをモジュールの以前のバージョンにロールバックすると、コンテンツを復元できます([Actions(アクション)] > [Revision History(変更履歴)])。

Delete module

追加のテンプレートアクション

モジュールのオプションに加えて、テンプレートの作業中のある時点で必要になる可能性がある重要なアクションがいくつかあります。 [Actions(アクション)]メニューの下には、次のオプションがあります。

  • [Save(保存)] - 作業中のテンプレートの下書きを保存します。そのテンプレートを使用して公開されたコンテンツが変更されることはありません。
  • [Move or rename template(テンプレートの移動または名前変更)]テンプレートの名前を変更したり、テンプレートを別のフォルダーに移動したりできます。
  • [Clone(クローン)] - テンプレートの複製を作成します。 これは、既存のテンプレートのバリエーションを作成するときに時間を節約できる優れたオプションです。
  • [Clone to file(ファイルにクローン)] - テンプレートのHTMLバージョンを別途作成します。これは、テンプレートビルダーよりもマークアップをより細かく調整する必要がある場合や、テンプレートのコーディング方法について詳しく学びたい場合に役に立ちます。ただし、HTMLテンプレートは内部ユーザーに対して柔軟性が低くなることを忘れないでください。
  • [Create a page from template(テンプレートからページを作成)] - デザインマネージャーからランディングページを直接作成できます。
  • [View revisions(変更履歴を表示)]テンプレートを以前公開したバージョンに戻すための変更履歴を表示します。テンプレートの変更履歴は、ページの変更履歴からは独立しており、テンプレートを公開するたびに作成されます。自動保存の場合は変更履歴が作成されません。
  • [Pages using template(テンプレートを使用しているページ)] - テンプレートを使用しているページのリストを参照します。
  • [Delete(削除)] - テンプレートを削除します。現時点では、削除したテンプレートを復元する方法はありません。
  • [Make basic / Make responsive (email only)(ベーシックにする/レスポンシブにする(Eメールのみ)] - Eメールのテンプレートをベーシック([Content Settings(コンテンツ設定)] > [Email(Eメール)]で決定した固定幅)とレスポンシブ(画面サイズが異なるさまざまなデバイスに対して柔軟に対応)のどちらにするかを切り替えます。このオプションは、Eメールテンプレートに対してのみ使用できます。
Actions

前の記事

次の記事