テーマのカスタマイズ

テーマとは、サイトの外観を定義するファイルを集めたものです。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
    

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

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

  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)をご覧ください。

前述の Drupal ドキュメントには、サブテーマの作成に関する詳細情報が記載されていますが、Apigee Responsive テーマのサブテーマの作成については、次の一般手順に従ってください。
  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_responsive_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 ファイルを置き換えます。