コンテキスト ファイル

このページでは、検索エンジンの XML 仕様であるコンテキスト ファイルを使用して、検索エンジンの外観をカスタマイズする方法について説明します。

  1. 概要
  2. LookAndFeel 要素
  3. LookAndFeel 要素の属性
  4. LookAndFeel の子要素
  5. Google がホストする検索結果ページへのロゴの追加

概要

プログラム可能検索エンジンのコントロール パネルを使うほかに、コンテキスト XML ファイルを編集することで、検索エンジンのデザインを制御できます。（各形式のメリットとデメリットについて詳しくは、基本ページをご覧ください）。コンテキスト ファイルについて詳しく知りたい場合は、コンテキスト: 検索エンジンの定義をご覧ください。

プログラム可能検索エレメントを使用すると、検索エンジンを柔軟に表示するには、JavaScript を使用してウェブページやその他のアプリケーションにプログラム可能検索エンジンを埋め込むことができます。

ウェブページに構造化データも含まれている場合は、より表現豊かでカスタム コンテンツを使用したスニペットを作成できます。詳しくは、検索結果スニペットのカスタマイズに関する記事をご覧ください。

プログラム可能検索エンジンのデザインを決める前に、プログラム可能検索エンジンの実装に関するガイドラインをご覧ください。Google のブランディングと帰属表示をどのように取り扱うべきかを説明する短いドキュメントです。

トップへ戻る

LookAndFeel 要素

コンテキスト ファイルでは、すべてのデザインの仕様は CustomSearchEngine の下の LookAndFeel 要素で定義されます。この要素は、広告を表示するかどうか、検索結果セクションの表示方法、個々の検索結果の表示方法を決定します。次の例は、LookAndFeel 要素のすべての属性と子要素を示しています。

<CustomSearchEngine ... >
  <Title>...</Title>
  <Description>...</Description>
  <Context>
     ...
  </Context>
  <LookAndFeel googlebranding="watermark"
      element_layout="1" theme="1" custom_theme="false" text_font="Arial, sans-serif"/>
    <Logo />
    <Colors url="#3366cc"
            background="#FFFFFF"
            border="#336699"
            title="#0000CC"
            text="#000000"
            visited="#ffbd10"
            title_hover="#0000CC"
            title_active="#0000CC"/>
    <Promotions title_color="#006600"
                title_visited_color="#663399"
                url_color="#3366ff"
                background_color="#FFFFFF"
                border_color="#ffff33"
                show_image="true"
                show_snippet="true"
                snippet_color="#330000"
                title_hover_color="#0000CC"
                title_active_color="#0000CC" />
    <SearchControls input_border_color="#BCCDF0"
                    button_border_color="#666666"
                    button_background_color="#CECECE"
                    tab_border_color="#E9E9E9"
                    tab_background_color="#E9E9E9"
                    tab_selected_border_color="#FF9900"
                    tab_selected_background_color="#FFFFFF" />
    <Results border_color="#FFFFFF"
             border_hover_color="#FFFFFF"
             background_color="#FFFFFF"
             background_hover_color="#FFFFFF" />
  </LookAndFeel>
  <AdSense />
  <EnterpriseAccount />
</CustomSearchEngine>

LookAndFeel のすべての属性と要素が、すべての種類の検索エンジンに関連するわけではありません。たとえば、googlebranding 属性は、Google がホストする検索エンジンにのみ使用され、検索エンジンが「検索要素」ホスティング オプションを使用している場合は無視されます。

コントロール パネルの [概要] ページから検索エンジンのコンテキスト ファイルをダウンロードすると、完全に定義された LookAndFeel セクションが見つかります。選択した検索エンジンの種類に関連しない属性や要素にも、定義済みの値があります。これらは単なるデフォルト値であり、無視してください。検索エンジンの種類に影響する要素と属性にのみ注目してください。

以降のセクションでは、次のことを説明します。

トップへ戻る

LookAndFeel 要素の属性

LookAndFeel 属性はすべて省略可能です。指定しなかった場合、プログラム可能検索エンジンではデフォルト値が使用されます。たとえば、LookAndFeel 要素の element_layout 属性が定義されていない場合、プログラム可能検索エンジンは、element_layout 値が "1" であると解釈します。すべての属性が、すべての種類の検索エンジンに関連するわけではありません。

プログラム可能検索エンジンでは、属性値の定義方法に従って、検索ボックスと検索結果用のコードセットを生成します。生成されたコードは、検索エンジンの概要ページの [コードを取得] セクションでプレビューできます。生成されたコード スニペットをコピーして、ウェブページに挿入することができます。

属性を完全に定義した LookAndFeel 要素の例を次に示します。

<LookAndFeel googlebranding="watermark"
             element_layout="1"
             theme="1"
             custom_theme="false"
             text_font="Arial, sans-serif" />

次の表に、CustomSearchEngine の属性とその値を示します。

注: 選択したホスティング オプションに関連する属性値のみを定義してください。[Hosting options] 列には、これらの属性が適用されるホスティング オプションが示されています。

トップへ戻る

属性 ホスティング オプション 説明 値
googlebranding Google ホスティング 検索エンジンの検索ボックスを指定します。

次のいずれかの値を使用します。

  • watermark - デフォルト。

    プログラム可能検索エンジンの透かしが表示されている検索ボックス

  • smnar

    白の背景で細い検索ボックス

  • smwide

    白の背景で細い検索ボックス

  • smwidg

    グレーの背景で細長い検索ボックス

  • smnarg

    グレーの背景で細長い検索ボックス

  • smnarb

    黒色の背景に幅の広い検索ボックス

  • smwidb

    黒の背景で細い検索ボックス
element_layout 要素を検索

ページ内での検索ボックスと検索結果の配置を決定します。さまざまなレイアウト オプションについて詳しくは、検索要素のレイアウトをご覧ください。

次のいずれかの値を使用します。

  • 1 - デフォルト。全幅。
  • 2 - コンパクトです。
  • 3 - 2 列。
  • 4 - 2 ページ。
  • 5 - Google がホストする店舗: 現在のウィンドウで開きます。
  • 6 - Google がホストする店舗: 新しいウィンドウで開きます。
  • 7 - 結果のみ。
theme 要素を検索 検索ボックスと検索結果のスタイルを指定します。

次のいずれかの値を使用します。

  • 1 - デフォルト。Google の検索結果に似ています。

    「デフォルト」というスタイル

  • 2 - Minimalist はシンプルなカラーパレットを使用します。

    ミニマリスト

  • 3 - Green Sky は、フォントとして Trebuchet を使用します。

    「グリーンスカイ」のスタイル

  • 4 - Bubblegum は、フォントに AOSP を使用します。

    「バブルガム」

  • 5 - Espresso は、温かみのあるカラーパレットで Serif フォント Georgia を使用します。

    Espresso と呼ばれるスタイル

  • 6 - Shiny は、Sans Serif フォントの Verdana をクールなカラーパレットで使用します。

    光沢のあるスタイル
custom_theme 要素を検索 テーマをカスタマイズして、標準とは異なる色とフォント ファミリーを表示するには、値を true に設定します。設定しないと、プログラム可能検索エンジンでは色とフォント（LookAndFeel の子要素で定義）に対するカスタマイズが無視されます。

次のいずれかを指定します。

  • false - デフォルト。標準のテーマが表示されます。
  • true - LookAndFeel の子要素で設定した値を受け入れるように、プログラム可能検索エンジンを設定します。
text_font すべて

検索結果のテキストのフォント ファミリーを設定します。

コントロール パネルで選択できるフォント ファミリーは 5 つまでですが、コンテキスト ファイルではさらに幅広いフォント ファミリーを選択できます。次の例のように、この属性の値として、フォント ファミリーのカンマ区切りのリストを指定できます。

text_font="Arial, sans-serif"

複数のフォント ファミリーをリストした場合、ブラウザは最初のフォントを使用します。ブラウザが最初のフォントをサポートしていない場合、次のフォントが試行されます。そのため、必要なフォントから始めて、セリフやサンセリフなどの汎用的なファミリーで終わるようにします。ジェネリック ファミリーを使用すると、リストされたフォントがいずれも使用できない場合に、ジェネリック ファミリーの中で同じようなフォントをブラウザが選択できます。

名前が 2 単語を超えるフォント ファミリーを使用している場合は、引用符（&quot;）で囲む必要があります。たとえば、Trebuchet MS は &quot;Trebuchet MS&quot; と記述する必要があります。

LookAndFeel の子要素

LookAndFeel の子要素はすべて、Promotions 要素を除き、検索要素にのみ関連します。Promotions 要素のほとんどの属性は、すべてのタイプの検索エンジンに適用されます。ほとんどの場合、子要素は検索エンジンのさまざまなコンポーネントの色を制御します。色の値は標準の HTML の 16 進数表記です。要素の属性を定義しない場合は、プログラム可能検索エンジンではデフォルト値が使用されます。

注: 検索要素をカスタマイズする場合は、まず LookAndFeel 要素の custom_theme 属性を true に設定してから、子要素の値を定義する必要があります。custom_theme 属性を true に設定しない場合、子要素に定義したすべての値（Promotions を除く）はプログラム可能検索エンジンによって無視されます。

LookAndFeel には次の子要素があります。

  • Colors - 検索要素の色を指定します。
  • Promotions - プロモーションのデザインを指定します。この設定は、すべての種類の検索エンジンに適用されます。
  • SearchControls - 検索要素検索ボックスのコンポーネントの色を指定します。
  • Results - 検索要素の結果セクションのコンポーネントの色を指定します。

トップへ戻る

Colors 子要素

Colors 要素により、検索要素の色が決まります。個々の検索結果やプロモーションなど、検索要素のサブコンポーネントの色を変更するには、他の兄弟要素で値を設定する必要があります。

属性を完全に定義した Colors 要素の例を次に示します。

<Colors url="#3366cc"
        background="#FFFFFF"
        border="#336699"
        title="#0000CC"
        text="#000000"
        visited="#ffbd10"
        title_hover="#0000CC"
        title_active="#0000CC"/>

次の表に、Colors のオプション属性とその値を示します。

属性 コンポーネントの色
url 各結果スニペットの最後にある URL です。
background 結果セクション全体の背景。
border 検索要素の周りの枠線。
title 検索結果スニペットのタイトル。タイトルは各検索結果の最初の行です。
text 結果スニペットの本文です。
visited ユーザーがクリックした後のリンク。
title_hover ユーザーがリンクにカーソルを合わせたときのタイトルの色。
title_active ユーザーがリンクをクリックしたときに表示されるタイトルの色。

トップへ戻る

Promotions 子要素

Promotions 要素は、プロモーションの色を制御し、画像と説明を表示するかどうかを決定します。プロモーションの外観はコンテキスト ファイルで定義されますが、プロモーション自体のコンテンツはプロモーション XML ファイルで定義されます。詳しくは、プロモーションをご覧ください。

属性を完全に定義した Promotions 要素の例を次に示します。

<Promotions title_color="#006600"
            title_visited_color="#663399"
            url_color="#3366ff"
            background_color="#FFFFFF"
            border_color="#ffff33"
            snippet_color="#330000"
            show_image="true"
            show_snippet="true"
            title_hover_color="#0000CC"
            title_active_color="#0000CC" />

次の表に、Promotions のオプション属性とその値を示します。

属性 コンポーネントの色
title_color 各プロモーションのタイトル。
title_visited_color ユーザーがクリックした後のタイトル。
url_color 各プロモーションの下部にある URL。
background_color プロモーション セクション全体の背景色。
border_color プロモーション セクション全体の枠線。
snippet_color プロモーションの説明。プロモーションに説明がない場合、設定は変更されません。
show_image

プロモーションに画像を表示するには、この属性を true に設定します。デフォルトは false です。

表示する画像はプロモーション ファイル内で設定します。
show_snippet

プロモーションに説明を表示するには、この属性を true に設定します。デフォルトは false です。

商品説明の内容はプロモーション ファイルで定義します。
title_hover_color ユーザーがリンクにカーソルを合わせたときのタイトル。
title_active_color ユーザーがリンクをクリックしたときのタイトル。

トップへ戻る

SearchControls 子要素

SearchControls 要素は、検索要素の検索ボックスの色と絞り込みのタブを制御します。検索エンジンで絞り込みラベルを作成している場合、そのラベルは検索要素にタブとして表示されます。絞り込みラベルがない場合、タブは表示されず、プログラム可能検索エンジンで属性の値は無視されます。

プログラム可能検索エンジンでクエリをオートコンプリートする場合は、コンテキスト ファイルの CustomSearchEngine 要素の autocompletions 属性について説明しているセクションをご覧ください。

属性を完全に定義した SearchControls 要素の例を次に示します。

<SearchControls input_border_color="#BCCDF0"
                button_border_color="#666666"
                button_background_color="#CECECE"
                tab_border_color="#E9E9E9"
                tab_background_color="#E9E9E9"
                tab_selected_border_color="#FF9900"
                tab_selected_background_color="#FFFFFF" />

次の表に、SearchControls のオプション属性とその値を示します。

属性 コンポーネントの色
input_border_color

検索クエリの入力フィールドの枠線。
button_border_color 検索ボタンの周りの枠線。
button_background_color 検索ボタン。
tab_border_color ユーザーが現在フォーカスしていない（ユーザーが選択していない）タブの周りの枠線。
tab_background_color フォーカスされていないタブ。
tab_selected_border_color ユーザーがクリックして選択したタブ。ユーザーが最後にクリックしたタブが選択された状態になります。
tab_selected_background_color 現在選択されているタブの色。

トップへ戻る

Results 子要素

Results 要素は、検索要素内の個々の結果の色を制御します。個々の検索結果は、タイトル、検索結果のスニペット、リンクの単位となります。この子要素を定義すると、個々の結果を視覚的に区別したり、ユーザーが選択した検索結果をハイライト表示したりできます。結果を個別に強調したり、強調したりしたくない場合は、結果セクション全体の背景と同じ色になるように枠線と背景を設定できます。

図 1: 個々の結果が示され、マウスオーバーによりハイライト表示された個別の結果。

個別の結果の明確化高く評価された結果

結果には次の 2 つの状態があります。

  • 通常の状態 - 個別の結果がカーソルを合わせていないときに表示される状態。
  • ホバー状態 - 個々の結果にマウスのカーソルを合わせたときの、個別の結果の外観。

この要素は、個々の結果の色を制御します。すべての結果の背景を変更するには、色の子要素セクションをご覧ください。

属性を完全に定義した Results 要素の例を次に示します。

<Results border_color="#FFFFFF"
         border_hover_color="#FFFFFF"
         background_color="#FFFFFF"
         background_hover_color="#FFFFFF" />

次の表に、Results のオプション属性とその値を示します。

属性 コンポーネントの色
border_color それぞれの境界線が通常の状態です。
border_hover_color カーソルを合わせたときの結果の枠線。
background_color 各人の背景色は通常の状態です。
background_hover_color マウスオーバー時の結果の背景。

トップへ戻る

Google がホストする検索結果ページへのロゴの追加

検索結果ページのホスティングを Google に許可している場合は、検索結果ページの検索ボックスのすぐ隣にロゴや小さな画像を表示できます。画像は、ウェブサイトでホストされている .jpg、.png、.gif のいずれかのファイルである必要があります（ご自身が所有しているか、著作権上の制限がないウェブサイトであることが想定されます）。URL を画像に関連付けると、画像をクリック可能にできます。

注: プログラム可能検索要素を使用して検索結果をホストする場合、コントロール パネルやコンテキスト ファイルを使用して画像を追加することはできません。

以下は、ロゴ付きの検索結果ページの例です。

図 3: 画像付きの検索ボックス

画像とその URL は、LookAndFeel 要素の下の Logo 要素の属性で定義します。次の例は、Google がホストする検索結果ページにロゴを追加する方法を示しています。

<LookAndFeel>
   <Logo url="http://www.ascii.com/logo.gif"
         destination="http://www.ascii.com/"
         height="90"/>
   ...
</LookAndFeel>

次の表に、Logo 要素の属性を示します。

属性 説明と値
url 画像の URL。.gif、.png、.jpg ファイルを使用できます。
destination 画像をリンクにする場合は、URL リンク先を定義します。
height 画像の高さ（ピクセル単位）。高さは最大 100 ピクセルです。プログラム可能検索エンジンではアスペクト比が保持されるため、幅を指定する必要はありません。 画像が大きすぎてプログラム可能検索エンジンで縮小する場合を除き、高さを指定する必要はありません。

トップへ戻る