[Å] スマホ版にGoogleカスタム検索設置!参考にしたサイトまとめ

[Å] スマホ版にGoogleカスタム検索設置!参考にしたサイトまとめ
Google in Waterloo by bennymoto

こんにちは。PCデザインを完全に放置気味なあかめ(@mk_mizuho)です❦ スマホからのアクセスが全体の半分。今回はスマホからブログを読んでくださっている方が少しでもブログを使いやすくなるようにと思い「ブログ内検索」を設置したのでご報告。さらに設置する際に調べて見つけた情報をまとめときます。

実は設置していたブログ内検索

実は前から設置はしていた。
カスタム検索

これは記事の1番下に設置していて、気づいた人はほとんどいないんじゃないかというレベルのもの。

しかも…

検索すると悲劇。
検索結果

自分のブログデザインの中に埋め込んで表示させたらiframeのwidth指定が上手くいかなくて表示が切れる。いや、切れるというか横スクロールが出現。お話にならない表示。PCだと問題なし。

さすがにこれだと使い辛いので、こんなカタチに修正。
カスタム検索 結果

自分のブログデザインにはめ込むことはできなかったけど、記事の内容が見やすくなったのでこちらを採用。

設置した場所はブログ内の上下

さて。どこに設置するのが良いのか。サイト内の上と下に設置するのが良いというのをGoogleのガイドライン的なもので読んだ記憶があったのでこんなところに設置してみた。

ロゴの真下。
カスタム検索

そして、記事を読み終わったあとに検索が出来るように記事下にも。
検索

色々と設置した場所に思うことはあるでしょう。特にロゴ真下のカスタム検索。まずは検索の存在を知ってほしい。そんな思いで誰でも目に留まる場所に置いてます。暫く様子見で移動検討。ご意見待ってます。

あっそうだ。記事下にはこんな項目も最近追加してみたのですが気づきましたでしょうか?
TwitterとRSS

TwitterとRSSの登録ボタン。もし当ブログお気に召していただけたら嬉しいです。今後ともよろしくお願いします。…とまぁ宣伝なんかもしてみたりして。

サイト内検索設置に大苦戦

さて、今回このように紹介しているのは本当に設置するのに苦労したからだ。設置するのに苦労したというよりかはどっちを採用するか迷っただけなのだが。

サイト内検索を生成する方法には「検索向けAdSense」と「Googleカスタム検索」というのがある。

どっちを採用したら良いのか全然わからない。こんなのを読んだりした。

そんでもって、以下のサイトで

「Google がオススメする使い分け」というのを見つけた。

検索向けAdSense」を利用、拡張機能が必要な場合だけ「カスタム検索」エンジン。

果たしてこれが本当のことなのだろうか。時代によって仕様も変わるわけで、実際にどっちを採用するのがいいのかは設置した今もわかっていない。

カスタム検索のページから生成されるコードは「検索ボックス コード」と「検索結果コード」の2つ。両方入れてちゃんと動いた。

今度は検索向けAdSenseのページでコードを生成。

今度はコードが1つしか出ない。しかも「カスタム検索」とは別のコードが生成された。エッ(゚Д゚≡゚Д゚)マジ?

「検索向けAdSense」の方は細かいカスタマイズが管理画面からあまりできない。

さてどうするか。いやでも待て。私は特にカスタマイズする予定はないじゃないか。

検索向けAdSenseを選択した理由

生成されるコードがシンプルでわかりやすい。ただそれだけ。

コード

検索エリアの周りをCSSで調整した。(idの設定は任意)

/* ----- 検索向けアドセンス 設定 ----- */
#box_search{
	text-align:center;
	margin:0 0 20px;
}

#box_search form input[type='text'] {
	padding:10px;
	margin:0 0 5px;
}

検索向けAdSenseの設定

検索向けAdSenseのページへ行き、「広告の設定」→「検索向けAdSense」→「カスタム検索エンジン」→「新しいカスタム検索エンジン」。
新しいカスタム検索エンジン

あとは任意で情報を入力。
検索情報

検索結果」の設定はiframeで自分のブログデザインに入れる方法をやめ、同じウィンドウで開くすることにした。
検索結果
ロゴを指定してもスマホじゃ表示されない。この理由は不明。誰か知っている人いたら教えて下さい。

情報の入力が終わったら1番下のボタンからコードを生成して、コードをコピー。検索を設置したいところにペースト。おしまい。

Googleカスタム検索の登録

カスタム検索の登録は検索向けAdSenseを登録する前にやった。設定方法はりくちゃん(@Rikuma_)のブログが丁寧でとても参考になります。

[Я]サイト内検索をGoogleカスタム検索にしてみよう : りくまろぐ

いやはや、一体どっちで設定したら良いのか全然わからない。実際のところ、カスタム検索とAdSense検索どっちを採用したらいいんだ。無知って悲しい。

2つをリンクさせる

カスタム検索のページに検索向けAdSenseで作った内容が反映された。
カスタム検索

色々とやりすぎてまとめられてない。そしてこのやり方が正しいのかもわかってないです。あくまでも自分のメモ的に残してます。ごめんなさい。

カスタマイズ中に見つけた記事

2つの管理画面

まとめ

以上がサイト内検索を設置した時の私のまとめ。整理して書くのが良かったんだけど、上手くまだ自分の中で整理出来てないのが本当のところ。この記事を公開したことでより詳しい人からアドバイスを頂ければ幸いです。カスタム検索と検索向けAdSense、どっちが良いんだろうな。

せっかく検索窓を設置したので、もし当ブログでお困りのことがあれば使ってみてください。もしかしたら私が過去に記事書いてるかも?

ではではーあかめ(@mk_mizuho)をよろしくお願いします。

■ 同じカテゴリについてもっと読む

ブログ運営者をフォローする!

\ この情報を周りの人にも教える /

google-search.jpg
プロフィールあかめの画像
あかめAkame Mizuho
横浜在住。フリーランス。
食べ歩き / 旅行 / カメラ / WEBデザイン 好き。

プロフィール / お問い合わせ

個人アカウント(メイン)▼

ブログ公式アカウント▼