サブテーマの作成

サブテーマを生成して構成することにより、 開発者ポータル ・サイト用のカスタム・テーマを作成します。 サブテーマとは、特定の親テーマのすべてのリソースを継承するテーマのことです。 特定のリソースをオーバーライドして、必要なカスタマイズを構成することができます。

このタスクについて

API Connect テーマの直接編集は許可されておらず、サポートされていません。これらのファイルの編集バージョンは、フィックスパックまたは iFix のインストール時に上書きされるためです。 そのため、カスタム・テーマを作成する方法は、 開発者ポータル がデフォルトで使用する標準 API Connect テーマのカスタム・サブテーマを作成することです。 また、以下のカラー・テンプレートの 1 つに基づくサブテーマを作成することもできます。

ビジネス・モノ
サファイア・ブルー
エメラルド・グリーン
ゴールデン・ブラウン
ルビー・レッド

カラー・テンプレートを選択すると、必要なサイトのブランディングとスタイルを作成するために、より簡単に作成できる基盤となる基本テーマが提供されます。

開発者ポータル UI でテーマ・ジェネレーターを使用してサブテーマを作成し、必要に応じて外観をカスタマイズしてから、圧縮ファイルをアップロードしてサイトに戻します。

重要:

• 作成するカスタム・テーマ内に IBM® API Connect コードを含めることは許可されていません。 また、ファイル・システム上の API Connect テーマを直接編集することは許可されておらず、サポートされていません。これらのファイルの編集済みバージョンは、フィックスパックまたは iFix のインストール時に上書きされるためです。
• すべてのカスタム開発はお客様の責任で行っていただきます。 カスタム・テーマの使用はサポートされていますが、 IBM API Connect ではその開発や変更をサポートしていません。

サブテーマの作成に関するガイド付きの例については、 開発者ポータルのチュートリアル「カスタムテーマの作成 」を参照してください。 この例では、サブテーマを作成してから、overrides.css ファイルを編集してスタイリングをカスタマイズします。

1. 管理者のダッシュボードで、「外観 」> 「サブテーマの生成」 をクリックします。
   「サブテーマの生成」ページが表示されます。
2. 「サブテーマ名」を入力し、使用する 「サブテーマ・タイプ」 を選択します。 名前に使用できるのは、小文字 a から z、数字 1 から 9 のみです。
   • CSS - カスケーディング・スタイル・シート。テーマ内の HTML 要素の表示方法を説明するために使用される言語です。
   • SCSS - CSS のスーパーセットである Sass CSS。 SCSS には CSS のすべての機能が含まれていますが、Sass の機能を含むように拡張されています。 ただし、SCSS をインストールして 開発者ポータルで使用するには、その前に SCSS を CSS にコンパイルする必要があります。
3. サブテーマの基盤とするテンプレートを以下から選択します。
   • デフォルト- 開発者ポータル のベースとなる標準の connect_theme。
   • ビジネス・モノ - モノクロのカラー・テーマ。
   • サファイア・ブルー - 青のカラー・テーマ。
   • エメラルド・グリーン - 緑のカラー・テーマ。
   • ゴールデン・ブラウン - 茶色のカラー・テーマ。
   • ルビー・レッド - 赤のカラー・テーマ。
4. 「生成 (Generate)」をクリックします。
   サブテーマは、「サブテーマの生成」ページからダウンロードできます。
5. 新しいサブテーマをクリックして、任意の場所に保存します。
6. サブテーマ・ファイルからリソースを抽出し、特定のリソースを編集して、必要なカスタマイズを構成します。
   your_theme_name.info.yml ファイルにメタデータを作成して、テーマを定義します。 次に、overrides.css ファイルを構成して、テーマの外観をカスタマイズできます。 テーマのカスタマイズ方法の詳細については、「テーマの作成」 Drupal を参照してください。
7. カスタマイズが完了したら、サブテーマ・リソースを圧縮して .zip ファイルに戻します。
   ファイル拡張子として、tar、tgz、gz、および bz2 もサポートされています。
8. 新しいサブテーマをデベロッパーポータルにインストールするには、「外観 」> 「新しいテーマのインストール」 をクリックします。
9. 「ファイルの選択」をクリックし、サブテーマを選択してから、 「インストール」をクリックします。
10. 「新規追加されたテーマのインストール (Install new added theme)」をクリックし、 「未インストール・テーマ (Uninstalled theme)」のリストで新規テーマを見つけ、 「インストールしてデフォルトとして設定 (Install and set as default)」 をクリックして、新規カスタム・サブテーマをサイトのデフォルト・テーマとして設定します。
    これで、新しいテーマがデフォルト・テーマとして設定され、「インストールされたテーマ (Installed themes)」セクションにリストされます。