チュートリアル: 開発者ポータル のカスタム・テーマの作成

サブテーマを生成し、 overrides.css ファイルを設定し、新しくカスタマイズしたテーマをインストールすることで、 Developer Portal ホームページの外観をカスタマイズします。

開始前に

このチュートリアルを完了するには、 開発者ポータル を有効にして、管理者権限を持っている必要があります。 チュートリアル「 ポータルの作成 」では、ポータルを有効にする方法が説明されています (まだ有効になっていない場合)。
重要: 作成するカスタム・テーマ内に IBM® API Connect コードを含めることは許可されていません。

このチュートリアルについて

カスタムテーマを作成する方法は、 開発者ポータルがデフォルトで使用している標準テーマ（ API Connect ）のカスタムサブテーマを作成することです。 サブテーマは親テーマのすべてのリソースを継承し、特定のリソースをオーバーライドして必要なカスタマイズを設定できます。

このチュートリアルでは、以下のレッスンについて説明します。
  1. テーマジェネレーターを使用してサブテーマを作成する。
  2. overrides.css ファイルのカスタマイズ。
  3. カスタマイズしたテーマのインストールと有効化。

サブテーマの作成

  1. 開発者ポータル に管理者としてログインします。
  2. 外観 > サブテーマの生成をクリックします。 サブテーマの生成ウィンドウが表示されます。
  3. 生成タブでサブテーマ名を入力し、 サブテーマの種類に CSSを選択します。 (お望みであれば、 SCSSを選択することもできますが、このCSSの拡張は上級のテーマ開発者向けであり、このチュートリアルでは扱いません)。サブテーマ・ウィンドウを生成します。
  4. sub-theme のベースとなる 「デフォルト」 テンプレートを選択します。 カラーテンプレートに基づいてサブテーマを作成することができます。 ただし、このチュートリアルでは、 「デフォルト接続テーマ」 テンプレートを使用します。
  5. 「生成」をクリックします。
  6. 生成されたサブテーマを任意の場所にダウンロードし、 .zip ファイルからすべてのファイルを展開します。
    注： 生成されたサブテーマは24時間ダウンロード可能です。

overrides.cssファイルのカスタマイズ

自分のコンピューターで、解凍したファイルにナビゲートします。 <extract_folder>/css/overrides.cssにある overrides.css ファイルを見つけます。 これで overrides.css ファイルをカスタマイズできます。

  1. overrides.css ファイルを任意のエディターで開きます。
  2. overrides.css ファイルに以下の要素を入力して、サブテーマをカスタマイズします：
    /* Body of the home page */
body.path-frontpage.contexthome {
  color: #152935;
  background-color: #d1f0f7;
}

/* Header of the home page */
.navbar {
  background-color: #a0a0a0;
}

/* Footer of the home page */
footer.footer {
background-color: #dee0e2;
}

footer.footer ul.nav > li > a {
color: #454A4C;
}
    指定されたコード・ブロックを css ファイルにコピーします
  3. overrides.css ファイルを保存します。

カスタマイズしたテーマのインストールおよび有効化

  1. overrides.css ファイルを更新した後、すべてのテーマファイルを圧縮して、最初にダウンロードした .zip サブテーマファイルに戻します。
    注意: テーマファイルに独自のカスタムロゴとファビコンを含めることもできます。 これらのファイルでは、命名規則 logo.svg および favicon.ico をそれぞれ使用する必要があります。 ロゴやファビコンは後で変更することもできます。 詳しくは、 サイトロゴの変更と ショートカットアイコンの変更をご覧ください。
  2. 開発者ポータルで、外観 > + 新しいテーマの追加をクリックします。 「 Add new theme 」ウィンドウが表示されます。
  3. 「モジュールまたはテーマ・アーカイブのアップロード」で、 「参照」をクリックし、新しく更新した圧縮テーマ・ファイルにナビゲートします。
  4. 「続行」 をクリックして、テーマをサイトにインストールします。
  5. 「新規追加されたテーマを有効にする」をクリックし、「テーマを無効にしました」のリストで新規テーマを見つけます。 Enable and set as defaultをクリックし、新しいカスタムサブテーマをサイトのデフォルトテーマとして設定します。
  6. 「サイトに戻る」をクリックして、 開発者ポータル のホーム・ページに戻ります。 これで、カスタム・テーマを表示できるようになりました。
    テーマが更新されたホーム・ページ

このチュートリアルで実行したこと

このチュートリアルでは、以下のタスクを実行しました。
  • テーマジェネレータを使用して、 開発者ポータルサイトのサブテーマを作成しました。
  • サブテーマの overrides.css ファイルに、カスタマイズされたホームページ要素を設定します。
  • カスタマイズしたテーマを 開発者ポータル ・サイトにアップロードしてインストールします。
  • 開発者ポータル のホーム・ページの外観が正常にカスタマイズされました。