Send Docs Feedback

Note: Most user interface tasks can be performed in Edge Classic or the New Edge experience. For an overview, getting started topics, and release notes specific to the New Edge experience, see the docs.

テーマのカスタマイズ

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

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

カスタムテーマコードを記述する場合は、ポータルのデフォルトテーマファイルを変更しないでください。デフォルトテーマファイルを変更すると、ポータルを次回アップグレードしたときに上書きされます。

代わりに、後述の「サブテーマを作成してテーマをカスタマイズする」の説明に従い、変更するテーマのサブテーマを作成します。

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

テーマ             説明

Apigee Responsive テーマ

Bootstrap 3 に基づいた、以降のリリースのポータルのデフォルトのテーマ。このテーマでは、幅 768~1400 ピクセルのデバイスがサポートされます。このテーマでは、すべての 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 

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

カスタムコードがあると、Apigee Responsive テーマがデフォルトで機能しなかったり、意図したとおりに表示されないことがあります。適切な外観にするには、後述のように Apigee Responsive テーマのサブテーマの設定が必要になる場合があります。

 

さまざまなモバイルプラットフォームからポータルにアクセスできるようにする場合は、これらのプラットフォームでポータルをテストし、テーマが適切に表示されることを検証する必要があります。

デフォルトのテーマを設定するには、次の手順に従います。

  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 設定

       
     

    コンポーネント

    パンくずの表示、メインメニューの位置 (設定のナビゲーションバーと呼ばれます)、リージョンウェルの表示を制御します。

    • パンくず: パンくずの表示/非表示、パンくず内のホームリンクのオン/オフを切り替えます。
    • ナビゲーションバー: ナビゲーションバー (メインメニュー) の位置を固定/静的/標準の位置に変更し、レイアウトをより動的にします。
    • リージョンウェル: ウェルクラスをサイトのリージョンに追加し、暗い背景をリージョンに追加します。
     

    JavaScript

    アンカー、ポップオーバー、ツールチップの表示を制御します。

    • アンカー: アンカーの位置を固定し、スムーズにスクロールできるようにします。
    • ポップオーバー: ポップオーバーでは、コンテンツの小さいオーバーレイを要素に追加します。ポップオーバーの有効/無効を切り替え、ポップオーバーの使用方法を構成します。
    • ツールチップ: ツールチップの使用方法を構成します。各ツールチップを各フォーム要素の右、左、上部、下部に表示し、他の表示オプションを設定できます。
     

    詳細設定

    ポータルが BootstrapCDN を使用して、Bootstrap テーマファイルをどのように更新するかを制御します。BootstrapCDN に対するポータルの依存関係を無効にできますが、Bootstrap フレームワークの独自の実装を指定する必要があります。

     

    DevConnect 設定

    ようこそメッセージ、デフォルトの色、メインメニューに表示されるロゴのサイズを設定します。

    グローバル設定の上書き

       
     

    トグル表示

    ポータルのさまざまな領域の表示の有効/無効を切り替えます。

     

    ロゴイメージの設定

    メインメニューに表示されるイメージを指定します。

     

    ショートカットアイコンの設定

    ブラウザのアドレスバーまたはポータルのブックマークに表示されるイメージを指定します。

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 ディレクトリにコピーして、変更するテーマのサブテーマを作成します。ポータルをデフォルトの場所にインストールした場合、このディレクトリは /var/www/html/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 ファイルを置き換えます。

Help or comments?