インスペクターを使用してテンプレートをスタイル設定

テンプレートを構成し、デフォルトのコンテンツを追加したら、サイトの見た目の美しさについて検討しましょう。 

インスペクターは、デザインマネージャーの右側にあります。ここでレイアウト、モジュール、グループのプロパティを編集することや、モジュールをドラッグ＆ドロップレイアウトに追加することができます。テンプレートのスタイルを設定するときに、インスペクターを使用して次の操作を実行できます。

• スタイルシートまたはJavaScriptファイルをテンプレートに添付
• テンプレートに見出しまたはフッターHTMLマークアップを追加
• カスタムCSSクラスとインラインスタイルを特定のモジュールまたはグループに追加

テンプレートの見出しおよび本文のオプションをカスタマイズ

デザインマネージャーでテンプレートにアクセスすると、モジュールが選択されていない場合は右側にレイアウトインスペクターが表示されます。レイアウトインスペクターで行った編集は、テンプレート全体に影響します。ここで、テンプレートの見出しおよび本文のオプションをカスタマイズできます。

スタイルシートおよびJavaScriptファイルを添付

［リンク済みスタイルシート］および［リンクされているJavaScriptファイル］オプションで、［追加］をクリックして、テンプレートに添付するスタイルシートまたはJavaScriptファイルを選択します。［ドメインスタイルシート］ドロップダウンで、ドメインのデフォルトスタイルシートを含めるか、除外するか、使用するかを選択することもできます。

ここで、CSSファイルを作成および編集してサイトをスタイル設定する方法を確認できます。

見出しまたはフッターHTMLマークアップを追加

［追加のマークアップ］および［より前の追加のマークアップ］フィールドで、テンプレートに適用する見出しまたはフッターHTMLマークアップを追加できます。

テンプレート本文にクラスまたはインラインスタイルを追加

［本文のクラス］フィールドで、本文のクラス属性をテンプレートに追加できます。［本文のインラインスタイル］フィールドで、テンプレートの本文HTMLにインラインスタイルを追加することもできます。

モジュールまたはグループのスタイルオプションをカスタマイズ

テンプレートで特定のモジュールを選択すると、モジュールインスペクターが表示されます。テンプレート内のモジュールのグループを選択すると、グループインスペクターが表示されます。インスペクターにより、モジュールまたはグループのスタイルオプションをカスタマイズできます。

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

CSSクラスを追加

HTMLクラス属性を使用すると、テンプレート内のモジュールにクラスを割り当てることができ、CSSを使用してスタイル設定できるようになります。テンプレートにはすでに多くのデフォルトのクラスがありますが、カスタムクラスを使用すると、デザイナーはドラッグ＆ドロップレイアウトエディターの柔軟性を維持しながら、テンプレートの外観をより詳細に制御できます。  

上記の例では、リッチテキストモジュールの［CSSクラス］フィールドに「bio」が追加されています。これにより、HTML属性class="bio"がモジュールのコンテナーdivタグ（ページのエリアまたは区分を指定するHTMLタグ）に追加されます。bioクラス、またはこのクラス内の要素をテンプレートスタイルシートのターゲットにすることができます。

注：このオプションはEメールテンプレートには使用しないことをお勧めします。なぜなら、スタイルタグは一部のEメールクライアントではサポートされていないからです。

テンプレートスタイルシートでは、カスタムクラスを選択し、さまざまなCSSプロパティを適用することにより、コンテナーdivをターゲットとしてスタイルを設定することができます。たとえば、bioクラスが設定されているモジュールに背景色を追加するには、次の例のようなCSSを記述できます。

.bio {
background: #CCCCCC;
}

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

.bio p {
color: #000000;
}

インラインスタイルを追加

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

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

このオプションは、特定のページテンプレートを手早く修正する場合には便利ですが、グローバルスタイルシート内ではなく、個々のモジュール内でコードを変更する必要がある関係上、［CSSクラス］フィールドの使用よりも柔軟性が低くなります。

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

ラッピングHTMLを追加

ドラッグ＆ドロップレイアウトエディターはテンプレートのHTMLマークアップへのフルアクセス権を提供しませんが、特定のモジュールの周囲にラッピングHTMLを追加できます。このオプションは、テンプレートのHTMLに対する制御を強化する必要があるものの、生のHTMLテンプレートに対してドラッグ＆ドロップレイアウトエディターを使用する柔軟性も維持したいデザイナー向けのものです。

この機能を実装するには、HTMLマークアップとHTML HubLトークン（モジュールのコードが表示される場所）を［ラッピングHTML］フィールドに追加します。以前の例は、モジュールをラップするHTML5の