検索結果表示ページのカスタマイズ

カテゴリーページのカスタマイズが一応終了しましたので、次に検索結果の表示ページをカスタマイズしようと思います。

検索結果の表示ページのレイアウトはカテゴリーページとほとんど同じですので、カテゴリーページのカスタマイズと同様の手法でおこなうことができます。

また、登録サイト表示部分や下部のその他のカテゴリーへのリンク部分は、カテゴリーページをカスタマイズした際に変更したCGIやスタイルシートがそのまま適用されていますので、ほぼいじる必要がありません。

ですので、検索結果ページのカスタマイズは比較的簡単に終わらせることができると思います。

それでは検索結果ページのテンプレートをテキストエディタで開きましょう。

テンプレートファイルは「template」フォルダー内にある「search.html」です。

ファイルを開いたら、headタグ内（<head>と</head>の間）に以下の2行を追加します。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no" />

スマホ対応カスタマイズの基本ですね。

この2行を追加する前の検索結果ページをスマートフォンで表示してみたのがこれです。

そして、追加後に表示したのがこちら。

それでは次回以降具体的なパーツをカスタマイズしていきたいと思います。

【スポンサードリンク】

まずは登録サイトの表示部分です。ここはカテゴリーページと同様に外部スタイルシートのID「

カテゴリーページと同じようになるように検索ページの検索フォームとその下部分のリンクを修正します。

【スポンサードリンク】