---
schema_version: "1"
id: 737a24aafbc6d34e2484122f0b59329d8d5608a0e90aeb915c1b1ec87fe05d00
title: ビルダーを使用した一般的なカスタマイズの実現
collection: mulesoft
version: current
locale: ja-jp
portal_url: https://docs.salesforce.com/mulesoft/current/ja-jp/api-experience-hub/common-builder-customizations.md
canonical_url: https://docs.mulesoft.com/jp/api-experience-hub/common-builder-customizations
source_site: docs.mulesoft.com
content_type: documentation
content_hash: c9542adbb90111f4100258dea1f38c5e061d66cb3fd2f2c857fe34573cb203e7
description: MuleSoft Documentation Site
latest: true
---
# ビルダーを使用した一般的なカスタマイズの実現

ビルダーから、次のポータルカスタマイズを使用して会社のブランドに合わせます。

**\[Manage your API Portal (API Portal を管理)\]**​ ページから、​**\[Preview and publish your portal (ポータルをプレビューしてパブリッシュ)\]**​ をクリックしてビルダーにアクセスします。

## [](#ポータルコンポーネント追加および削除する)ポータルコンポーネント追加および削除する

ビルダーから、ポータルで API Experience Hub コンポーネントを追加または削除します。

1. ビルダーに移動します。
2. **\[コンポーネント\]**​ アイコンをクリックします。
3. **\[カスタムコンポーネント\]**​ までスクロールします。
4. コンポーネント (API Console など) をクリックし、ポータルにドラッグします。
5. コンポーネントを削除するには、ゴミ箱アイコンをクリックして ​**\[Delete (削除)\]**​ をクリックします。

### [](#各-api-種別の色をカスタマイズする)各 API 種別の色をカスタマイズする

**\[Home (ホーム)\]**​ ページに表示される各 API 種別の色をカスタマイズする手順は、次のとおりです。

1. ビルダーに移動します。
2. **\[ビルダー\]**​ アイコンをクリックします。
3. **\[設定\]**​ アイコンをクリックします。
4. **\[詳細\]**​ をクリックします。
5. **\[ヘッドマークアップを編集\]**​ をクリックします。
    
    以下に、アセットタイプの色の変数を示します。
    
    \--asset-type-c-rest-api-color: 0, 0, 0;
    --asset-type-c-http-api-color: 0, 0, 0;
    --asset-type-c-soap-api-color: 0, 0, 0;
    --asset-type-c-evented-api-color: 0, 0, 0;
6. アセットタイプの色の変数の数値を変更し、​**\[保存\]**​ をクリックします。

## [](#ログインページの背景色を変更する)ログインページの背景色を変更する

ポータルのログインページの背景色を変更する手順は、次のとおりです。

1. ビルダーに移動します。
2. **\[ページのプロパティ\]**​ アイコンをクリックし、​**\[ログイン\]**​ をクリックします。
    
    ビルダーに現在のログインページが表示されます。
3. **\[テーマ\]**​ ペイントブラシアイコンをクリックします。
4. **\[テーマ\]**​ で ​**\[色\]**​ をクリックします。
5. **\[ログインページ\]**​ セクションで、​**\[背景色\]**​ カラーピッカーから色を選択します。
    
    ログインページの背景色が選択した色に変更されます。

## [](#ログインページのカード背景色を変更する)ログインページのカード背景色を変更する

ログインページカードのカード背景色を変更する手順は、次のとおりです。

1. ビルダーに移動します。
2. **\[ページのプロパティ\]**​ アイコンをクリックし、​**\[ログイン\]**​ をクリックします。
    
    ビルダーに現在のログインページが表示されます。
3. **\[テーマ\]**​ ペイントブラシアイコンをクリックします。
4. **\[テーマ\]**​ で ​**\[色\]**​ をクリックします。
5. **\[ログインページ\]**​ セクションで、​**\[カードの背景色\]**​ カラーピッカーから色を選択します。
    
    ログインページのカードの背景色が選択した色に変更されます。

## [](#ポータル登録用のメールテンプレートを変更する)ポータル登録用のメールテンプレートを変更する

サイトに登録するユーザーに送信されるメールの情報を編集する手順は、次のとおりです。

1. ビルダーに移動します。
2. **\[ビルダー\]**​ アイコンをクリックします。
3. **\[私のワークスペース\]**​ で ​**\[管理\]**​ をクリックします。
4. **\[メール\]**​ をクリックします。
5. 変更を加えて ​**\[保存\]**​ をクリックします。

## [](#セルフ登録ページとログインページのロゴ画像を変更する)セルフ登録ページとログインページのロゴ画像を変更する

デフォルトでは、ログインページに使用されるロゴ画像は、ガイド付きスタイリングセットアップ中に追加される画像です。ログインページ用の画像を変更する手順は、次のとおりです。

1. ビルダーに移動します。
2. **\[ビルダー\]**​ アイコンをクリックします。
3. **\[私のワークスペース\]**​ で ​**\[管理\]**​ をクリックします。
4. **\[ログイン & 登録\]**​ を選択します。
5. **\[ブランド設定オプション\]**​ セクションで、​**\[ロゴファイル\]**​ から ​**\[ファイルを選択\]**​ ボタンをクリックします。
    
    ロゴの最大の高さは 125 px、最大の幅は 250 px です。

## [](#ポータルドメインをカスタマイズする)ポータルドメインをカスタマイズする

デフォルトでは、Experience Cloud によってポータルドメインの URL が生成されます。組織のドメインをカスタマイズできます。たとえば、URL を <yourcompany>.com に変更できます。現在、URL 内のポータルのサブパス ​`aeh`​ は変更できません。

1. ビルダーに移動します。
2. **\[ビルダー\]**​ アイコンをクリックします。
3. **Salesforce の \[設定\]**​ をクリックします。
4. **\[クイック検索\]**​ ボックスに​**「ドメイン」**​と入力します。
5. **\[ドメイン\]**​ リストでドメイン名をクリックします。
6. **\[\[私のドメイン\] の詳細\]**​ セクションで ​**\[編集\]**​ をクリックします。
7. **\[\[私のドメイン\] の名前\]**​ 項目にドメイン名を入力します。
8. **\[使用可能か調べる\]**​ ボタンをクリックして、ドメイン名がまだ存在していないことを確認します。
9. **\[ドメインサフィックス\]**​ 項目にドメインサフィックスを入力します (たとえば、\*.<my.salesforce.com>)。
    
    新しいドメイン URL が ​**\[選択された新しい \[私のドメイン\] の URI\]**​ 項目に表示されます。
10. **\[保存\]**​ をクリックします。

## [](#フィードコンポーネントを設定する)フィードコンポーネントを設定する

フィードコンポーネントには、すべてのレコードまたはグループのやりとりのフィード (投稿、質問、システム更新、添付ファイルを含む) が表示されます。

次のプロパティの値を指定します。

<table class="tableblock frame-all grid-all stretch">
<colgroup>
<col style="width: 50%;">
<col style="width: 50%;">
</colgroup>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">プロパティ</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">詳細</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">フィード種別</p></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="ulist">
<ul>
<li>
<p><strong>[グループまたはレコード]</strong>​ には、取引先や商談など、選択したグループまたはレコードに投稿されたすべてが表示されます。</p>
</li>
<li>
<p><strong>[ディスカッション]</strong>​ フィードには、​<strong>[ナビゲーショントピック]</strong>​ に投稿されたすべてが表示されます。</p>
</li>
<li>
<p><strong>[私のフィード]</strong>​ には、個人サイトのアクティビティと共にフォローしているトピック、人、またはレコードでタグ付けされたフィード項目が表示されます。別のユーザーが自分がメンバーではないグループと項目を共有していない限り、すべての共有フィード項目が表示されます。公開グループでは、自分がメンバーでない場合でも、共有したフィード項目が表示されます。</p>
</li>
<li>
<p><strong>[トピック]</strong>​ フィードには、選択したトピックに投稿されたすべてが表示されます。</p>
</li>
<li>
<p><strong>[ユーザープロファイル]</strong>​ フィードには、ユーザープロファイルフィードに投稿されたコメントや回答など、メンバーが作成またはやりとりした投稿が表示されます。</p>
</li>
<li>
<p><strong>[ブックマーク]</strong>​ フィードには、選択したブックマークに対して投稿されたブックマーク済み投稿、プール、または質問のみが表示されます。</p>
</li>
</ul>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">レコード ID</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>[フィード種別]</strong>​ で ​<strong>[ディスカッション]</strong>​ または ​<strong>[私のフィード]</strong>​ オプションを選択した場合は、この項目を空白のままにしておきます。通常この項目には、ページの読み込み時にフィード項目 ID が自動的に入力されます。</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">デフォルトの検索条件</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">サイトメンバーに表示するフィードエントリのデフォルト検索条件を選択します。</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">投稿スタイル</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">デフォルトで投稿コメントを展開するか折りたたむかを選択します。</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">メンバーによるフィードの検索を許可</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">サイトメンバーに個々のフィードの検索を許可する場合に選択します。</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">メンバーによるフィードの並び替えを許可</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">サイトメンバーにフィードの並び替えを許可する場合に選択します。並び替えが有効になっている場合、メンバーは最新の投稿または最新の活動によってフィードを並び替えることができます。</p></td>
</tr>
</tbody>
</table>

## [](#フィードパブリッシャーコンポーネントを設定する)フィードパブリッシャーコンポーネントを設定する

ポータルメンバーがグループまたはレコードへの投稿を作成し、添付ファイルをアップロードできるようにするには、Chatter フィードパブリッシャーコンポーネントを設定します。

次のプロパティの値を指定します。

<table class="tableblock frame-all grid-all stretch">
<colgroup>
<col style="width: 50%;">
<col style="width: 50%;">
</colgroup>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">プロパティ</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">詳細</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">種別</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">プロジェクトに追加するフィードパブリッシャーを選択します。Salesforce 組織で定義されたグローバルパブリッシャーアクションを使用するには、​<strong>[グローバル]</strong>​ を選択します。オブジェクト固有のパブリッシャーレイアウトを使用するには、​<strong>[レコード]</strong>​ を選択します。</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">レコード ID</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>[グローバル]</strong>​ フィードパブリッシャー種別を選択する場合は、この項目を空白のままにしておきます。通常この項目には、ページの読み込み時にレコード ID が自動的に入力されます。</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">パブリッシャーレイアウトのデザイン</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">幅が広いまたは狭いフィードパブリッシャーレイアウトのデザインを表示する場合に選択します。</p></td>
</tr>
</tbody>
</table>

## [](#関連情報)関連情報

- [エクスペリエンスビルダーを使用したポータルのカスタマイズ](https://docs.mulesoft.com/jp/api-experience-hub/customizing-your-portal)
- [CSS を使用した高度なスタイリング](https://docs.mulesoft.com/jp/api-experience-hub/advanced-styling-with-css)