テーマとは、サイトの外観を定義するファイルを集めたものです。Developer Services ポータルには、デフォルトのテーマがあらかじめ定義されています。デフォルトのテーマはカスタマイズできるため、ポータルの外観の設定を選択できます。具体的には、リンクの色、背景、テキストなどのテーマの要素を変更できます。デベロッパー ポータルのフロントページに表示される、ようこそメッセージを変更することもできます。
テーマをカスタマイズするには、デベロッパー ポータルの UI から行うか、カスタム テーマファイルのコードを記述して、デフォルト テーマファイルを上書きします。
デベロッパー ポータルのバージョンに応じて、複数のテーマを選択できます。
| テーマ | 説明 |
|---|---|
|
Apigee Responsive テーマ |
Bootstrap 3 に基づいた、以降のリリースのポータルのデフォルトのテーマ。このテーマでは、幅 768～1,400 ピクセルのデバイスがサポートされます。このテーマでは、すべての Bootstrap 3 機能を利用できます。 注: Apigee Responsive ブテーマを使用するには、Bootstrap 7.x-3.0 テーマが有効になっていることを確認します。 |
|
Apigee DevConnect テーマ |
Apigee Responsive テーマより前のデフォルトのポータルテーマ。 既存のポータルを新しい Apigee Responsive テーマにアップグレードできますが、すべてのブロック、テンプレート、その他のコンテンツが Bootstrap 3 と互換性があり、Bootstrap 7.x-3.0 テーマが有効になっていることを最初に確認する必要があります。 |
|
Apigee Base テーマ |
Apigee DevConnect テーマの親テーマで、単独では使用されません。 |
デフォルトのテーマの設定
ポータルで古い Apigee DevConnect テーマがまだ使用されている場合は、次の形で警告が表示されることがあります。
"Apigee DevConnect theme" is out of date
次の手順を使用すると、ポータルのデフォルトのテーマを設定できます。新しいテーマを本番環境にデプロイする前に、最初に本番以外のシステムで常にテストするようにしてください。
デフォルトのテーマを設定するには:
- 管理者権限またはコンテンツ作成権限を持つユーザーとしてポータルにログインします。
- Drupal の管理メニューで [Appearance] を選択します。有効なテーマのリストが表示されます。
- デフォルトとして使用するテーマで、[Set default] を選択します。
Apigee Responsive テーマを使用するには、このページで Bootstrap 7.x-3.0 テーマも有効になっている必要があります。 - 構成を保存します。
Apigee Responsive テーマのカスタマイズ
このセクションでは、次の構成を含む、Apigee Responsive テーマの構成方法について説明します。
- モーダル フォームのカスタマイズ
- 一般設定のカスタマイズ
モーダル フォームのサポートをカスタマイズするには:
ポータルでは、Drupal Bootstrap Modal フォーム サンドボックス モジュールを使用して、Drupal フォームをモーダルとして表示します。ログインと登録フォームは、デフォルトでモーダルとして機能します。この機能を無効にすると、これらのフォームを個別のページとして表示できます。
- 管理者権限を持つユーザーとして、デベロッパー ポータルにログインします。
- Drupal の管理メニューで [Configuration] > [User interface] > [Boostrap Modal] フォームの順に選択します。
- フォームのモーダル サポートを有効または無効にします。
- [Save Configuration] を選択します。
Apigee Responsive テーマの一般設定をカスタマイズするには:
- 管理者権限またはコンテンツ作成権限を持つユーザーとしてポータルにログインします。
- Drupal の管理メニューで [Appearance] を選択します。有効なテーマのリストが表示されます。
- ページの [Apigee Responsive（default theme）] 領域で、[Settings] を選択します（ページ上部の [Settings] ボタンは選択しないでください）。
- Apigee Responsive テーマの設定ページが表示されます。
- 次の表では、テーマの構成に使用可能なページの領域を説明します。これらの設定を変更したら、[Save configuration] を選択します。
領域 セクション 説明 Bootstrap settings
Components
パンくずリストの表示、メインメニューの位置（設定のナビゲーション バーと呼ばれます）、リージョン ウェルの表示を制御します。
- Breadcrumbs: パンくずリストの表示 / 非表示、パンくずリスト内のホームリンクのオン / オフを切り替えます。
- Navbar: ナビゲーション バー（メインメニュー）の位置を固定 / 静的 / 標準の位置に変更し、レイアウトをより動的にします。
- Region wells: ウェルクラスをサイトのリージョンに追加し、暗い背景をリージョンに追加します。
JavaScript
アンカー、ポップオーバー、ツールチップの表示を制御します。
- Anchors: アンカーの位置を固定し、スムーズにスクロールできるようにします。
- Popovers: ポップオーバーでは、コンテンツの小さいオーバーレイを要素に追加します。ポップオーバーの有効 / 無効を切り替え、ポップオーバーの使用方法を構成します。
- Tooltips: ツールチップの使用方法を構成します。各ツールチップを各フォーム要素の右、左、上部、下部に表示し、他の表示オプションを設定できます。
Advanced
ポータルが BootstrapCDN を使用して、Bootstrap テーマファイルをどのように更新するかを制御します。BootstrapCDN に対するポータルの依存関係を無効にできますが、Bootstrap フレームワークの独自の実装を指定する必要があります。
DevConnect Settings
ようこそメッセージ、デフォルトの色、メインメニューに表示されるロゴのサイズを設定します。
Override Global Settings
Toggle display
ポータルのさまざまな領域の表示の有効 / 無効を切り替えます。
Logo image settings
メインメニューに表示されるイメージを指定します。
Shortcut icon settings
ブラウザのアドレスバーまたはポータルのブックマークに表示されるイメージを指定します。
Apigee DevConnect テーマのカスタマイズ
Apigee DevConnect テーマは、古いリリースのポータルのデフォルトのポータルテーマです。新しい Apigee Responsive テーマにアップグレードできますが、アップグレードする前に、すべてのブロック、テンプレート、その他のコンテンツが Bootstrap 3 と互換性があることを最初に確認する必要があります。
Apigee DevConnect テーマの一般設定をカスタマイズするには:
- 管理者権限またはコンテンツ作成権限を持つユーザーとしてポータルにログインします。
- Drupal の管理メニューで [Appearance] > [Apigee DevConnect theme] > [Settings] の順に選択します。テーマの初期設定が表示されます。色の設定は、16 進値で指定されます。
- 各自の好みに応じて設定を変更します。
たとえば、ようこそメッセージの追加や変更、ヘッダーの背景色の変更を行うことができます。ヘッダーの背景色は、初期設定ではオレンジに近い色（#FF4300）になっていますが、青色（#0000FF）などの別の色に変更できます。 - 設定を変更したら、[Save] をクリックします。
サブテーマを作成してテーマをカスタマイズする
デフォルトのテーマを定義するすべてのファイルとアセット（ポータルに付属）は、ポータルのインストール ディレクトリの profiles/apigee/themes ディレクトリにあります。ポータルをデフォルトの場所にインストールした場合、このディレクトリは /var/www/html/profiles/apigee/themes になります。
テーマを編集して、サイトの外観を変更する場合は、profiles/apigee/themes ディレクトリのテーマファイルを変更しないでください。変更すると、ポータルを次回アップグレードしたときに上書きされます。
この場合は、デフォルトのテーマファイルを sites/all/themes ディレクトリにコピーして、変更するテーマのサブテーマを作成します。サブテーマの作成手順については、Drupal ドキュメント（https://www.drupal.org/node/225125）をご覧ください。
- profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit フォルダを /sites/all/themes フォルダにコピーします。
- apigee_responsive_starterkit フォルダの名前を YOUR_THEME_NAME に変更します。
- apigee_responsive_starterkit.info ファイルの名前を YOUR_THEME_NAME.info に変更します。
- css/apigee_response_starterkit.css の名前を css/YOUR_THEME_NAME.css に変更します。
- js/apigee_responsive_starterkit.js の名前を YOUR_THEME_NAME.js に変更します。
- YOUR_THEME_NAME.info ファイルを編集し、次の行を置き換えます。
stylesheets[all][] =css/apigee_responsive_starterkit.css
scripts[] = js/apigee_responsive_starterkit.js
変更後:
stylesheets[all][] =css/YOUR_THEME_NAME.css
scripts[] = js/YOUR_THEME_NAME.js - YOUR_THEME_NAME.info ファイルのテーマ名を Apigee Responsive Starter Kit から YOUR THEME NAME に変更します。
- テーマの新しいスクリーンショットを追加する場合は、既存の screenshot.png ファイルを置き換えます。
- テーマに新しいロゴを追加する場合は、既存の logo.png ファイルを置き換えます。
- 新しいお気に入りアイコンをテーマに追加する場合は、既存の favicon.ico ファイルを置き換えます。