デフォルトのコンテンツと高度なオプションを使用してコンテンツ作成用のテンプレートを最適化する方法

更新日時 July 1, 2016

必要条件

ソフトウェア: HubSpot マーケティング
サブスクリプション: Basic, Pro, & Enterprise

HubSpotのCOSの主な利点の1つは、マーケターが純粋にコンテンツの作成に集中できるようにテンプレートを最適化する機能があることです。テンプレートを最適化しても、ページの作成者は依然としてエディター内でスタイルに関して多くの判断を下すことが可能です。ただ、最初にテンプレートのコンテンツと外観の設定に費やした時間が多いほど、マーケターの自由になる時間が多くなります。  

このセクションでは、デフォルトのコンテンツとともにCSSオプションを使用して、コンテンツ作成用のテンプレートを最適化します。

モジュールのデフォルトのコンテンツを追加

HubSpot Academy

ベストプラクティス

デザインマネージャーでテンプレートを作成する作業では、他のすべてのページまたはEメールの基礎となる「モデルとしての」ページまたはEメールを作成していると考えることができます。

このガイドの前のセクションでは、テンプレートを構成する方法や、デザインマネージャーで利用できるさまざまなモジュールについて学びました。正しいモジュールを使用してテンプレートを作成したら、テンプレートに組み込むデフォルトのコンテンツを追加できます。

続きを読む

デフォルトのコンテンツを追加すると、モジュールのストックコピーやプレースホルダー画像などの代わりに独自のテキストおよびアセットを使用できます。デフォルトのコンテンツを挿入することにより、特定のモジュール用のすべての書式およびオプションを設定できます。

テンプレートからページまたはEメールを作成する準備が整ったら、そのままテンプレートのデフォルトのコンテンツをスワップして変更できます。

モジュールにデフォルトのコンテンツを追加するには、カスタマイズしたいモジュールのギアアイコンを選択し、[Edit Options(オプションを編集)]をクリックします。

Edit options

内部ラベルを追加すると、テンプレートを整理しやすくなります。 このラベルはテンプレートのHTMLコードには影響しませんが、多くのテンプレートを扱う場合にテンプレートを整理する上で役に立ちます。次の例では、「Sidebar(サイドバー)」と「Bio(プロフィール)」というラベルがモジュールグループとリッチテキストモジュールに適用されています。  

Label

[Edit options(オプションを編集)]ポップアップの[Modules defaults(モジュールのデフォルト)]セクションには、モジュールで使用可能なデフォルトのオブジェクトがすべて表示されます。たとえば、フォームモジュールの場合、テンプレートにデフォルトで表示するフォームを選択できます。また、リッチテキストモジュールテキストモジュールでは、モジュールに独自のコピーを追加できます。

Default content

デフォルトのコンテンツを追加した後、またはデフォルトのオプションを設定した後、[Preview(プレビュー)]ボタンを選択すると、デフォルトのコンテンツが含まれるテンプレートのプレビューを実際に確認できます。デザインマネージャーとデフォルトのコンテンツを使用すれば、ページの外観を確認するためにアプリを離れる必要はありません。

これらの変更内容を公開する準備が整ったら、[Publish Changes(変更を公開)]を押してテンプレートを更新します。

モジュールをロック

場合によっては、テンプレートにコンテンツ作成者からはアクセスできないようにしたい高度なカスタマイズや生のHTMLを必要とするエリアが存在することがあります。たとえば、カスタムコードを使ったHTMLイメージギャラリーが含まれるランディングページテンプレートがある場合、内部ユーザーがコンテンツエディター画面からそのコードにアクセスできないようにしたい場合があります。コンテンツ作成者がコンテンツエディター内からモジュールを編集できないようにしたい場合は、ギアアイコン > [Lock Module(モジュールをロック)]をクリックすると、モジュールをロックできます。 ロックされると、このオプションは[Unlock Module(モジュールのロックを解除)]に変更されます。

次の例では、Twitterフィードの埋め込みコードがカスタムHTMLモジュールに追加されています。コンテンツ作成者がこのTwitterフィードを変更する必要はないため、このモジュールをロックします。

Lock module

モジュールをロックすると、ロック状態であることを示す記号がそのモジュールに表示されます。また、ブログテンプレートのモジュールはすべて自動的にロックされますが、これらのロックを解除し、テンプレートのこれらのセクションを投稿レベルで編集可能にすることもできます。そのモジュールに含まれるコンテンツをページレベルまたは投稿レベルでいったん上書きすると、モジュールのデフォルトのコンテンツを変更しても、変更されたこれらのページには影響しません。

Lock symbol

テンプレートのCSSオプションをカスタマイズ

テンプレートを構成し、ストックコンテンツを追加したら、サイトの見た目の美しさについても検討を始めましょう。このガイドの後のセクションでは、CSSファイルを使用してサイトの外観のスタイルを設定する方法について学びますが、サイトのデザインの複雑さによっては、CSSの記述を開始する前にテンプレートをもう少しカスタマイズする必要がある場合があります。

前述したように、HubSpotテンプレートの構成とコンテンツはHTMLウェブサイトにコンパイルされます。HTMLマークアップへのフルアクセス権は与えられませんが、テンプレートビルダーを使用してテンプレートを作成する場合、[Edit CSS(CSSを編集)]機能を使用すると、クラス、スタイルID属性、および別のラッピングマークアップをモジュールに追加し、スタイルを設定するテンプレートのセクションを区別しやすくすることができます。

カスタマイズしたいモジュールを選択し、ギアをクリックし、[Edit CSS(CSSを編集)]をクリックします。

Edit CSS

Eメールテンプレートモジュール、ページモジュール、またはモジュールグループのいずれをカスタマイズするかに応じて、表示されるオプションは異なります。

カスタムCSSクラス

HTMLクラス属性を使用すると、テンプレート内のモジュールに名前を付けることができるため、CSSを使用してこれらのスタイルを設定できるようになります。テンプレートにすでに多くのデフォルトのクラスがありますが、カスタムクラスを使用すると、デザイナーはテンプレートビルダーの柔軟性を維持しながら、テンプレートの外観をより詳細に制御できます。  

次の例では、「bio」のクラスをリッチテキストモジュールに追加しています。これにより、HTML属性class="bio"がモジュールのコンテナーdivタグ(ページのエリアまたは区分を指定するHTMLタグ)に追加されます。実質的にこのモジュールに名前付けることになるため、CSSファイル内でこのクラスをターゲット設定したり、このカスタムクラス内の要素をターゲット設定したりできるようになります。このオプションはEメールテンプレートには使用しないことをお勧めします。なぜなら、スタイルタグは一部のEメールクライアントではサポートされていないからです。  

Custom class

プライマリCSSまたはカスタムCSSファイルでは、カスタムクラスを選択し、さまざまなCSSプロパティを適用することにより、コンテナーdivをターゲットとしてスタイルを設定することができます。このガイドではCSSについては説明しませんが、CSSを使用したカスタムクラスのターゲット設定の簡単な例をいくつか示します。たとえば、bioのカスタムクラスが設定されているモジュールに背景の色を付けるには、次の例のようなCSSを記述できます。

.bio{
background: #CCCCCC;
}
または、コンテナーdivだけでなく、モジュール内の要素をターゲット設定することもできます。この場合は、入れ子になった子孫セレクターか直接子孫セレクターを使用できます。たとえば、bioモジュール内のすべての段落テキストをターゲットとする場合は、次の例のような入れ子になったCSSセレクターを記述できます。

.bio p{
color: #000000;
}

カスタムインラインスタイル

インラインCSSは、HTMLタグ内で記述されたスタイルコードです。このフィールドにCSSのプロパティと値を追加すると、モジュールのコンテナーdivにコードが適用されます。

次の例では、marginとcolorを使用してモジュールの間隔と色を調整しています。この入力により、HTML属性style="margin-top:30px; color: #00349e;"がモジュールのコンテナーdivタグに追加されます。

このオプションは、特定のページテンプレートを手早く修正する場合には便利ですが、グローバルスタイルシート内ではなく、個々のモジュール内でコードの変更を行う必要がある関係上、前述のクラス機能を使用した場合よりも保守性が低下することがわかっています。

Inline styling

Eメールクライアントは、最新のウェブブラウザーよりHTMLとCSSのレンダリング機能の制約が大きくなっています。このため、複数のクライアント全体にわたってサポートされる方法でEメールのスタイルを設定するには、インラインCSSが最善の方法です。Eメールモジュールには、次に示すように、インラインCSSを追加する際に使いやすい追加オプションが用意されています。

Email CSS

カスタムラッピングHTML

テンプレートビルダーの「ドラッグアンドドロップ」エディターの場合、デザイナーにはページのHTMLマークアップへのフルアクセス権が与えられませんが、特定のモジュールの周囲にラッピングHTMLを追加できます。 このオプションは、テンプレートHTMLに対する制御を強化する必要があるものの、ハードコーディングされたHTMLテンプレートに対してテンプレートビルダーを使用する柔軟性も維持したい上級ユーザーやデザイナー向けのものです。

この機能を実装するには、HTMLマークアップを記述してから、モジュールのコードをレンダリングしたい任意の場所にHTML HubLトークンを挿入します。次の例では、モジュールをラップするためにHTML5 asideタグが使用されています。

Wrapping HTML

カスタムCSS ID

HTML ID属性は、モジュールグループに対するオプションとして利用可能です。IDは、CSSのターゲットにするテンプレートのエリアに名前を付けることができるという点でクラスに似ています。 ただ、IDは一意である(テンプレートごとに1つ表示される)必要があるほか、CSSの特異性という点でクラスよりも重みが大きいという点が異なります。  

次の例では、ページ上のモジュールのグループに「sidebar」というIDを与えています。 この入力により、グループに含まれるdivタグがHTML属性id="sidebar"を持つよう更新されます。実質的にこのモジュールグループに名前を付けることになるため、CSSファイル内でこのクラスをターゲットに設定したり、このカスタムクラス内の要素をターゲットに設定したりできるようになります。

Custom ID

カスタムIDを持つグループ全体をターゲット設定し、枠線を追加するには、次の例のようなCSSを記述できます。

独自のCSSは、プライマリCSSファイルと追加のカスタムCSSファイルのどちらかに追加してください。

#sidebar{
border:1px solid red;
}

本文のCSSを編集

最後に、クラス属性またはインラインCSSを本文のHTMLタグに追加したり、別のCSSファイル、スクリプト、および他のコードをテンプレートのheadタグに追加したりできます。これらのオプションにアクセスするには、デザインマネージャーの上部にある[Edit(編集)]メニューをクリックします。

Body CSS

前の記事

次の記事