テーマのカスタマイズ

テーマとは、サイトの外観を定義するファイルを集めたものです。Developer Services ポータルには、デフォルトのテーマがあらかじめ定義されています。デフォルトのテーマはカスタマイズできるため、ポータルの外観の設定を選択できます。具体的には、リンクの色、背景、テキストなどのテーマの要素を変更できます。デベロッパー ポータルのフロントページに表示される、ようこそメッセージを変更することもできます。

テーマをカスタマイズするには、デベロッパー ポータルの UI から行うか、カスタム テーマファイルのコードを記述して、デフォルト テーマファイルを上書きします。

デベロッパー ポータルのバージョンに応じて、複数のテーマを選択できます。

デフォルトのテーマの設定

ポータルで古い Apigee DevConnect テーマがまだ使用されている場合は、次の形で警告が表示されることがあります。

"Apigee DevConnect theme" is out of date

次の手順を使用すると、ポータルのデフォルトのテーマを設定できます。新しいテーマを本番環境にデプロイする前に、最初に本番以外のシステムで常にテストするようにしてください。

デフォルトのテーマを設定するには:

1. 管理者権限またはコンテンツ作成権限を持つユーザーとしてポータルにログインします。
2. Drupal の管理メニューで [Appearance] を選択します。有効なテーマのリストが表示されます。
3. デフォルトとして使用するテーマで、[Set default] を選択します。
   Apigee Responsive テーマを使用するには、このページで Bootstrap 7.x-3.0 テーマも有効になっている必要があります。
4. 構成を保存します。

Apigee Responsive テーマのカスタマイズ

このセクションでは、次の構成を含む、Apigee Responsive テーマの構成方法について説明します。

• モーダル フォームのカスタマイズ
• 一般設定のカスタマイズ

モーダル フォームのサポートをカスタマイズするには:

ポータルでは、Drupal Bootstrap Modal フォーム サンドボックス モジュールを使用して、Drupal フォームをモーダルとして表示します。ログインと登録フォームは、デフォルトでモーダルとして機能します。この機能を無効にすると、これらのフォームを個別のページとして表示できます。

1. 管理者権限を持つユーザーとして、デベロッパー ポータルにログインします。
2. Drupal の管理メニューで [Configuration] > [User interface] > [Boostrap Modal] フォームの順に選択します。
3. フォームのモーダル サポートを有効または無効にします。
4. [Save Configuration] を選択します。

Apigee Responsive テーマの一般設定をカスタマイズするには:

1. 管理者権限またはコンテンツ作成権限を持つユーザーとしてポータルにログインします。
2. Drupal の管理メニューで [Appearance] を選択します。有効なテーマのリストが表示されます。
3. ページの [Apigee Responsive（default theme）] 領域で、[Settings] を選択します（ページ上部の [Settings] ボタンは選択しないでください）。
4. Apigee Responsive テーマの設定ページが表示されます。
5. 次の表では、テーマの構成に使用可能なページの領域を説明します。これらの設定を変更したら、[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 テーマの一般設定をカスタマイズするには:

1. 管理者権限またはコンテンツ作成権限を持つユーザーとしてポータルにログインします。
2. Drupal の管理メニューで [Appearance] > [Apigee DevConnect theme] > [Settings] の順に選択します。テーマの初期設定が表示されます。色の設定は、16 進値で指定されます。

   

3. 各自の好みに応じて設定を変更します。
   たとえば、ようこそメッセージの追加や変更、ヘッダーの背景色の変更を行うことができます。ヘッダーの背景色は、初期設定ではオレンジに近い色（#FF4300）になっていますが、青色（#0000FF）などの別の色に変更できます。
4. 設定を変更したら、[Save] をクリックします。

サブテーマを作成してテーマをカスタマイズする

デフォルトのテーマを定義するすべてのファイルとアセット（ポータルに付属）は、ポータルのインストール ディレクトリの profiles/apigee/themes ディレクトリにあります。ポータルをデフォルトの場所にインストールした場合、このディレクトリは /var/www/html/profiles/apigee/themes になります。

テーマを編集して、サイトの外観を変更する場合は、profiles/apigee/themes ディレクトリのテーマファイルを変更しないでください。変更すると、ポータルを次回アップグレードしたときに上書きされます。

この場合は、デフォルトのテーマファイルを sites/all/themes ディレクトリにコピーして、変更するテーマのサブテーマを作成します。サブテーマの作成手順については、Drupal ドキュメント（https://www.drupal.org/node/225125）をご覧ください。

1. profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit フォルダを /sites/all/themes フォルダにコピーします。
2. apigee_responsive_starterkit フォルダの名前を YOUR_THEME_NAME に変更します。
3. apigee_responsive_starterkit.info ファイルの名前を YOUR_THEME_NAME.info に変更します。
4. css/apigee_response_starterkit.css の名前を css/YOUR_THEME_NAME.css に変更します。
5. js/apigee_responsive_starterkit.js の名前を YOUR_THEME_NAME.js に変更します。
6. 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
7. YOUR_THEME_NAME.info ファイルのテーマ名を Apigee Responsive Starter Kit から YOUR THEME NAME に変更します。
8. テーマの新しいスクリーンショットを追加する場合は、既存の screenshot.png ファイルを置き換えます。
9. テーマに新しいロゴを追加する場合は、既存の logo.png ファイルを置き換えます。
10. 新しいお気に入りアイコンをテーマに追加する場合は、既存の favicon.ico ファイルを置き換えます。