サイト内検索をブログの最上部に表示する方法(Simplicityカスタマイズ)

sarch

ウィジェットに「ブログ内検索」を入れていると目立たないと感じたことはありませんか?

ブログ内検索をGoogleカスタム検索に入れ替えて「検索バーからくるアクセス数」を調査した結果、1ヶ月での「Googleカスタム検索」の検索数はアクセス数が1000人超えのサイトで80クリック前後ということが判明しました。

これは衝撃的な数字で、ウィジェットの検索バーに興味を示している人は少ないという結果にになります。

この方法を解決するには「目立った場所に検索バーを設置」するといった処置が必要となるでしょう。

今回、レポ部では検索バーを身近に訪問者の方々に感じてもらおうと「ブログの最上部に検索バーを設置」してみることにしました。

そこで、レポ部は・・・
サイト内検索をブログの最上部に表示する方法(Simplicityカスタマイズ)
について紹介します。
スポンサードリンク

どういう表示にしたいのか?

sarch01

上記のようにブログの最上部に表示したいと考えています。

常に「サイト内検索」を訪問者の視野にいれることで誘導することも可能になるでしょう。

とはいっても、少し邪魔になると感じる方もいるかも知れませんね。

それに「サイト内検索」とは言えども、訪問者は「Google内の検索」と勘違いしてしまう可能性もあります。

訪問者に安心して「サイト内検索」を使用してもらうためにも、自サイトのロゴを隣に表示したり、サイト内検索の説明を表示することを推奨します。

とりあえず、コンテンツの多いサイトには最適な方法だと感じています。

Simplicityでのカスタマイズを前提に解説しています。SimplicityはWord Pressのテーマの中で好評化を得ているテーマです。シンプルで使いやすく、SEO対策も元から施されているテーマなので、初心者の方にも推奨しています。

HTMLの記述(header-insert.phpに記述)

以下のHTMLを「小テーマ」の「header-insert.php」に記述します。

私は上記のPHPファイルの中の最後の行にスペースを開けて書き込んでいます。

Simplicityを使用していない場合は<head>のすぐ下に書けば動くと思います。

※:<form>内の「サイトURL」は「自分のサイトのURL」に必ず変更してください。

HTMLの解説
  • hyoujiクラスは要素の全体を指定しています。
  • hyouji_centerクラスで要素を真ん中に指定することでブラウザの縮小、拡大をしても真ん中に要素が来るように表示しています。
  • tate_centerクラスで要素の左側に画像ロゴ1が来るように指定しています。
  • tate_center_01クラスで「検索フォーム」を真ん中に来るように指定しています。
  • naibu_formクラスは「検索フォーム」で位置の微調整をしています。
  • naibu_from_01クラスでは「検索フォーム」の長さを指定しています。
  • tate_center_02クラスで右側に画像ロゴ2が来るように指定しています。

CSSの記述(style.cssに記述)

スタイルシートには以下のソースコードを書き込んでください。

複雑なのは<form>内の「検索バー」の配置の仕方でしょうか。

<div>の要素を「display: table-cell」でテーブル化することで位置を決定しています。

それではCSSのソースコードについて解説していきます。

CSSの解説
  • hyoujiクラスで全体の要素の色を#0066DCにして高さを60pxに調整しています。
  • hyouji_centerクラスで1280pxの要素を作成してブラウザの中央に設定しています。
  • tate_centerクラスをdisplay: table-cellでテーブル化して左側に表示しています。
  • tate_center_01クラスで同じくテーブル化させて真ん中に配置しています
  • tate_center_02クラスで同じくテーブル化させて右側に表示しています。
  • naibu_formクラスでは「サイト内検索」を上から14px、左から30pxずらして微調整しています。
  • naibu_form_01クラスでは「検索バー」のサイズを500pxに調整しています。

モバイルでは表示させない方法(mobile.cssに記述)

モバイルで表示させないためには「mobile.css」の中身に以下のソースコードを追加します。

内容はシンプルでdisplay:noneを使用してhyoujiクラスを非表示に設定しました。

モバイルで表示させてしまうとレイアウトが崩れてしまう可能性があります。というよりも、モバイルでは最上部に「検索バー」を設置する必要はないと思っていたので、表示させないことにしました。モバイルでも最上部に「サイト内検索」を表示させたい場合は上記の解説とソースコードを参考にして組み立ててくださいね。

サイト内検索にGoogleカスタム検索を使用する場合

サイト内検索に「Googleカスタム検索」を使用する場合は、HTML内部の<form>~</form>までを削除してGoogleカスタム検索のHTMLを貼り付けます。

『検索ボタン』が表示されてしまうので、どちらを選ぶかは微妙なところですね。

検索ボタンを削除する方法もあるらしいですが、Googleの規約が絡んでくることは確かです。

Googleカスタム検索については他のサイトを見る限りデフォルトで表示させている方が多いですね。Googleカスタム検索をカスタマイズするならば規約を読んだ上で編集することを推奨します。カスタマイズした結果がGoogleの規約に反してしまったらアカウント停止もありえますもんね。よく調べてからカスタマイズすることを推奨します。

まとめ

いかがでしたか?

サイト内検索をブログの最上部に表示させると嫌でも目立ちますよね(笑)

記事の量が多いほどサイト内検索でサーチしてくれる訪問者も多くなると考えています。

誰でも思いつきそうなスタイルですが、よろしければ使ってみてくださいね。