Google APIのサイト内検索機能をCSSでカスタマイズ

下記の画像は検索窓なしで説明してありますが、検索窓ありでもclass名は同じです。

このclass名の箇所をdisplay:none;で非表示にさせると下記画像のようにタイトルだけの関連記事みたいな感じになります。

下記のCSSコードを追加すれば上記のタイプみたいな感じでタイトルだけの関連記事が表示されます。

.gsc-resultsHeader,.gs-snippet,.gs-visibleUrl-short { display:none; }

CSSコードをもっと知りたい方はClass Referenceを見ていただくかthe GSearchControl CSS Classesをご覧いただくと参考になると思います。

以上がGoogle APIのサイト内検索機能を使い関連記事を表示でした。アイデア次第ではもっと便利で活躍できるツールになると思います。

最終更新日: 2013年3月13日