---
title: "ウォークスルー:プリファレンスセンターのカスタマイズ"
slug: "walkthrough--customizing-the-preference-center"
abstract: "あなた自身のパーソナルブランディングをプリファレンスセンターに追加してください。"
---
# ウォークスルー:プリファレンスセンターのカスタマイズ

[プリファレンスセンター](https://doc.sitecore.com/xp/en/developers/exm/100/email-experience-manager/en/configure-the-preference-center.html)では、ユーザーが参加したいマーケティングキャンペーンを指定でき、希望すれば今後のすべてのメールキャンペーンからオプトアウトすることも可能です。プリファレンスセンターのデフォルトSitecoreブランディングを変更し、重要な設定を指定できます。以下の例では、左側にデフォルトのブランディング、右側にカスタムブランディングが表示されます。

![Example of a customized Preference Center.](<https://doc.sitecore.com/api/markdown-image/xp/ja/users/exm/103/email-experience-manager/images/Customize%20preference%20center%20d%2092+.png>)

カスタマイズが可能です:

-   1 - プリファレンスセンターのタイトルと色
-   2 - ヘッダーロゴと紹介
-   3 - マーケティングカテゴリー、タイトル、説明文
-   4 - 購読解除のテキスト
-   5 - 購読更新ボタン

このトピックでは、以下の方法を説明します:

-   [マーケティングキャンペーンのカテゴリと説明文を定義してください](https://doc.sitecore.com/xp/ja/users/exm/103/email-experience-manager/walkthrough--customizing-the-preference-center.html#UUID-1e262d08-dd1b-91fc-a272-26acd29ef05c_section-5cc999fc62f1a-idm45444643001856 "Define marketing campaign categories and descriptive text")
-   [新しいロゴをメディアライブラリにアップロードする](https://doc.sitecore.com/xp/ja/users/exm/103/email-experience-manager/walkthrough--customizing-the-preference-center.html#UUID-1e262d08-dd1b-91fc-a272-26acd29ef05c_section-5cd021a0bf244-idm45444640299632 "Upload a new logo to the Media Library")
-   [ブランドスタイルを適用する](https://doc.sitecore.com/xp/ja/users/exm/103/email-experience-manager/walkthrough--customizing-the-preference-center.html#UUID-1e262d08-dd1b-91fc-a272-26acd29ef05c_N1557154770368)
-   [プリファレンスセンターの見た目や雰囲気を変えましょう](https://doc.sitecore.com/xp/ja/users/exm/103/email-experience-manager/walkthrough--customizing-the-preference-center.html#UUID-1e262d08-dd1b-91fc-a272-26acd29ef05c_N1557154780913)
-   [変更を公開してください](https://doc.sitecore.com/xp/ja/users/exm/103/email-experience-manager/walkthrough--customizing-the-preference-center.html#UUID-1e262d08-dd1b-91fc-a272-26acd29ef05c_section-5cd0204966b1c-idm45444640336912 "Publish your changes")

## マーケティングキャンペーンのカテゴリと説明文を定義してください

デフォルトのレイアウトを使えば、定義した各カテゴリはプリファレンスセンター内の別々のセクションとして表示されます。マーケティングキャンペーンのカテゴリはマーケティングカテゴリグループごとにプリファレンスセンターに追加されます。

![Marketing Control Panel Campaigns folder in the sitecore tree structure.](<https://doc.sitecore.com/api/markdown-image/xp/ja/users/exm/103/email-experience-manager/images/Customize%20preference%20center%2092+.png>)

マーケティングキャンペーンのカテゴリーを定義すると:

1.  コンテンツエディターで **マーケティングコントロールパネル** (*sitecore/System/Marketing Control Panel*)に移動します。
    
2.  **Taxonomies**フォルダを展開し、**Marketing categories**を右クリックして「**Insert, Folder**」をクリックすると、マーケティングカテゴリグループを追加できます。
    
3.  新しく作成したフォルダを右クリックし、「 **Insert, Insert From Template**」をクリックします。
    
4.  「 **テンプレートから挿入** 」ダイアログボックスで、*テンプレート/システム/アナリティクス/マーケティング分類/マーケティングカテゴリ* に移動し、「 **マーケティングカテゴリー**」を選択します。
    
    ![Insert from Template dialog box showing the marketing category.](<https://doc.sitecore.com/api/markdown-image/xp/ja/users/exm/103/email-experience-manager/images/Customize%20preference%20center%20b%2092+.png>)
    
5.  **アイテム名**欄で、サブスクリプションカテゴリ名(例:*Newsletter*)を入力し、「**挿入**」をクリックします。
    
    ![sitecore tree showing the Campaigns structure.](<https://doc.sitecore.com/api/markdown-image/xp/ja/users/exm/103/email-experience-manager/images/Customize%20preference%20center%20c%2092+.png>)
    
6.  追加の購読セクションを定義するには、ステップ3から5を繰り返します。
    
7.  コンテンツツリーで、先ほど定義したサブスクリプションカテゴリのいずれかをクリックし、**コンテンツ** タブの **一般** セクションの **説明** 欄で「 **Show editor** 」ハイパーリンクをクリックします。
    
8.  **リッチテキストエディター**のダイアログボックスで、キャンペーンカテゴリの説明を入力し、「**承諾**」をクリックします。
    
9.  すべてのマーケティングカテゴリを定義したら、コンテンツツリーで*sitecore/System/Marketing Control Panel*に移動し、**Taxonomies**フォルダを展開し、キャンペーン **グループ**をクリックしてください。
    
10.  リボンの上で「 **Taxonomy** 」タブをクリックし、「 **デプロイ**」をクリックします。
     
     ![Taxonomy tab showing the Deploy button.](<https://doc.sitecore.com/api/markdown-image/xp/ja/users/exm/103/email-experience-manager/images/Customize%20preference%20center%20d%2092+.png>)
     

## 新しいロゴをメディアライブラリにアップロードする

ロゴをメールプリファレンスセンターに表示するには、まずメディアライブラリにアップロードし、その後サイトを再公開する必要があります。

ロゴをアップロードするには:

1.  コンテンツエディターのコンテンツツリーで *sitecore/Media Library/Images*に移動します。
2.  **フォルダ**タブで「**ファイルのアップロード**」をクリックします。
3.  「 **ファイルのアップロード** 」ダイアログボックスで「 **ファイル選択**」をクリックし、ロゴ画像ファイルが保存されている場所を閲覧してください。
4.  ロゴファイルを選択して「**開く**」をクリックし、**アップロードをクリックします。**
5.  リボンの上で「 **保存**」をクリックします。

## ブランドスタイルを適用する

ロゴや画像をプリファレンスセンターに表示するには、まず設定する必要があります。

ロゴと画像の設定:

1.  コンテンツツリーのコンテンツエディターで、設定したいマネージャーのルートに移動してください。
2.  **「コンテンツ**」タブをクリックしてください。
3.  **メッセージ生成**セクションの**ベースURL**欄で、メールメッセージ内のリンクやウェブサイト上でホストされている画像(例:[http://your.host](http://your.host))のウェブサイトアドレスを指定します。
4.  Embed Imagesチェックボックスを選択してください。
5.  **デフォルトのメッセージヘッダー**セクションの**「From Address**」欄で、送信者のメールアドレス(例:[SendersName@abc.com](mailto:SendersName@abc.com))を入力します。
6.  ブランド名とロゴを指定してください。プリファレンスセンターのデフォルト設定を使い、ブランド名は購読解除メッセージに使用され、ロゴはプリファレンスセンターの上部に挿入されます。
7.  **マーケティングカテゴリ**セクションで、[最初の手順](https://doc.sitecore.com/xp/ja/users/exm/103/email-experience-manager/walkthrough--customizing-the-preference-center.html#UUID-1e262d08-dd1b-91fc-a272-26acd29ef05c_section-5cc999fc62f1a-idm45444643001856 "Define marketing campaign categories and descriptive text")のステップ2で定義したマーケティングカテゴリグループをダブルクリックして「**選択**リスト」に移動してください。
8.  変更を保存してください。

## プリファレンスセンターの見た目や雰囲気を変えましょう

プリファレンスセンターは企業のブランディングをミラー化するようにカスタマイズできます。デフォルトでは、プリファレンスセンターマーケティンググループのHTMLは、マーケティンググループのサブスクリプションオプションと、あなたがマーケティングルートに定義したカテゴリを表示します。

プリファレンスセンターの外観と雰囲気を変えるために:

1.  コンテンツエディターで、設定したいマネージャーのルートを選択して、 **コンテンツタブをクリックします** 。
2.  下にスクロールして「 **プリファレンスセンター** 」のセクションへ。
3.  プリ **ファレンスセンタータイトル** 欄で、プリファレンスセンターダイアログボックスのタイトルを指定します。
4.  **プリファレンスセンターのイントロ**で、**ショーエディター**のハイパーリンクをクリックして、ユーザーにプリファレンスセンターを紹介してください。
5.  **プリファレンスセンターのレイアウトHTML**セクションで、「**HTML編集**」ハイパーリンクをクリックしてください。
6.  ヘッダーと送信ボタンの色を変更するには、以下を変更してください:
    -   **ヘッダー**セクションを以下に置き換えます:
        
        header {
         height: 90px;
         border-top: 4px solid #9D008D;
         background-color: rgba(0,0,0,.8);
         padding: 0 15px;
         color: #fff;
         }
        
    -   **ヘッダー.before**セクションを以下に置き換えます:
        
        header:before {
         position: absolute;
         right: 0;
         top: 0px;
         display: block;
         background-repeat: no-repeat;
         width: 113px;
         height: 90px;
         content: "";
         border-top: 4px #9D008D;
         }header:before {
         position: absolute;
         right: 0;
         top: 0px;
         display: block;
         background-repeat: no-repeat;
         width: 113px;
         height: 90px;
         content: "";
         border-top: 4px #9D008D; and background-color: rgba(0,0,0,.8);
         }
        
    -   **.exmPreferenceCenterフォームのボタン**セクションで、**background-color**と**border-color**属性を変更してください。
        
    -   **.exmPreferenceCenterラベルの.description.title**セクションに、行color: #9D008D;を追加します。
        
7.  「 **承認** 」をクリックして変更を保存してください。

## 変更を公開してください

プリファレンスセンターの変更を見るには、サイトの変更を公開する必要があります。

サイトの変更を公開するには:

1.  リボンの上で「 **公開** 」タブをクリックします。
2.  「 **公開」をクリックして「公開サイト**」を選んでください。
3.  デフォルトを受け入れ(スマートパブリッシュ)、 **公開**をクリックします。
4.  サイトが公開されたら、「 **閉じる」**をクリックしてください。

変更を確認するには、Email Experience ManagerでLeft Image Blockテンプレートを使ってメールキャンペーンを作成し送信してください。