読者です 読者をやめる 読者になる 読者になる

はてなブログのテーマでやったこと (2) - 検索ボックスは Google のカスタム検索を

今回も続けて、はてなブログのテーマ nanimo について、メモを上塗りwしておきたいと思います。

長くなったので、検索ボックスの件は別の機会に触れるとします。

はてなブログの検索ボックスに、Google のカスタム検索エンジンを使いたい

そう思ったので。

今回は、結果こうなります。;

2 点ほど注意がありまして、一応あらかじめ。

ひとつは、検索ボックスの位置は、上のイメージの通りですが、トップページとそれ以外で変えています。*1

トップページでは、タイトル右下に、
それ以外のページでは、コンテンツの下、行方向 1 カラム中央に。プロフィールの上に来るようにしています。

ふたつめは、ここでの Google カスタム検索と、はてなブログ標準で宛がわれている検索ボックス [ブログ内検索] の関係は、"排他" としています。

では以下具体的に手続きを。

step0. 下ごしらえ - Google Custome 検索のためのユーザ登録 と コード取得

導入にあたっては、準備が必要となります。

ここでは以下サイトを参照させて頂いてます。;

» Google カスタム検索の導入方法
» 「はてなブログ」に「Googleカスタム検索」(サイト内検索)を導入する - やじり鳥

若干の仕様変更等が生じているらしく、幾つかの UI は異なったりするようですが、
迷うほどではないので、その辺りは臨機応変、脳内補完でイケるかと。

アウトラインは、
Google の カスタム検索エンジンのページへ行って... ;

  1. 使うためにアカウントを登録
  2. コード(スクリプト)の生成と取得
    1. 導入するブログを登録する
      → ここでの例ですと、http://baqamore.hatenablog.com/ となりますね。
    2. 検索ボックス及び結果のフロー/レイアウトを決める
      → 細かい事は抜きにして、とりあえず最初は [検索エンジンの編集] メニューにある [デザイン] をクリックし、ここにある [レイアウト] を決めるだけでいいかと。*2
      ここでは [オーバーレイ] を選択。*3
      終わったら右下にある [保存してコードを取得] をクリック。生成したコードがあるページに遷移します。
    3. コード生成、取得

こうやって吐き出されてきたコードは、コピーするなり、記憶するなりで、どこかに退避しておくと良いと思います。
もちろん、コードは後でも、この Google カスタム検索 コントロールパネル のページへ行けば、獲ることはできます。

なお。
今回この作業でちょいと戸惑ったことがあったので、最後に触れておきたいと思います。

step1. はてなブログへ、Google Custome 検索の導入

このブログでは、検索ボックスについて、;

  • サイドバーモジュールの 1 パーツであることに囚われない。
  • ページ上部に置くことを基本にレイアウトを考えていた。

と言う事あって、Google カスタム検索のコードは、
ダッシュボードの [デザイン] メニュー、[カスタマイズ] タブの [ヘッダ > タイトル下] のテキストボックスへ貼り付けることにしました。

このコードを置く場所は、
検索ボックスに対するプランによって変わってくると思います。
座標上、またはコンセプト的にどう扱いたいかによって、サイドバーだったり、記事、そしてフッタ、と任意のパーツへコードを置くで良いと思います。

ここでは、ヘッダ。
ちなみに、同時に導入する cssスクリプトも、これ前提で組んでいます。

ここで一旦 [変更を保存する] をクリック。
こんな感じになるかと思います。

ちなみに。 検索ボックスをどこにレイアウトするか、の考え方として、こんな捉え方もある、と参考になるかも知れません。;

ちなみに、「ヘッダ」に設置する場合、検索ボックスの高さ分だけ、記事とサイドバーの開始位置が下に落ちる。
ちょっと嫌なレイアウトになる。
(略) ということで、個人的には「記事上」においている。

step2. Google Custome 検索のレイアウトの CSS

まず css です。

ここでは nanimo_gsc.css を使います。

面倒なのですが、nanimo_gsc.css の一部を使用します*4

1000 行レベル以上も移動しなければ辿りつかない場所なのですが、
文字列 GOOGLE CUSTOME SEARCH ENGINE {{ で検索して、ヒットしたその行から、最終行を使います。

この内容をコピーし、
対象ブログの [デザイン > カスタマイズ > デザインCSS] のテキストボックスに貼り付けます。 そして [変更を保存する] をクリック。

step3. Google Custome 検索のレイアウトの Javascript/jquery

次はスクリプトです。
こちらは nanimo_gsc.js の内容をすべて利用します。

スクリプト先日触れました nanimo.js の内容を置いた場所と同じで、その下に貼り付けるで良いと思います。

[設定 > 詳細設定 > headnに要素を追加] に置き、[変更する] で適用。
な要領です。

結果は、冒頭に置いた画の通りです。

おわり

これで、Google はカスタム検索の組み込み作業は終了であります。

いかがでしょう?

あと、コレはちょっと込み入った話になるのですが、
nanimo_gsc.js の内容を見て気が付くかもしれませんが、実は、検索ボックスを配置する場所に、幾つかのパターンを用意していたりします。

これは、作業段階の中で行った試行錯誤の産物でありまして、
この辺りは、LESS はじめ、今回色々とやってきた事を整理しておきたいと考えているので、その然るべきタイミングで触れていこうか思っていたりします。

Google カスタム検索導入時に感じた戸惑い

終わりに、先述で振りましたが、
この google カスタム検索作業で気になった事が 2 つほどありましたので、備忘録として残しておきたいと思います。

V1 コード ?

[コードを取得] のページ下に、こんな記述がありますが、;

高度な機能を使用する場合は、代わりに V1 コードを取得します。

"V1" の "V" 言うのは、この辺り目を通していて思ったのですが、どうやら "バージョン" のことらしく。

"高度な機能を使用する場合は" なんてあるから、こっちの方が "より" スンゴイのかなと思ったりしたのですが、違うみたいです。

フロー的に、おそらく V2 のコード推しっぽいですし、
バージョン落として、V1 にと言うことは、明確な意図なくして、特にしなくても良いもの? かとは思います。

デザインの変更方法 ?

2 つめですが、
ただ導入するだけでなく、その UI も折角なのでヨシナニしたいと考えるのは人情でして。

で、その方法を探ってみるわけですが、
紹介されている幾つかの手続きはどうも、いやもしかしたら全てが?、古いみたいです。

それら方法はいずれも、こんな手続きだろうと思います。
そしてここにはこんな記述があります。;

Google カスタム検索では、ページにカスタム検索エンジンを設置するための iframe の使用はサポートされなくなりました。... 以下略

V1 のコードを想定してのやり方ってこと? なのかしら?

と言うことでして。

今回もダラダラと勢い任せで書いてしまいました。
おしまいです、はい。

*1:これには個人的な好みゆえの話で、特に深い意味はありません。

*2:実際、ここではそうしてます。

*3:幾つか試した結果、敷居の低さ、手軽さでこれにしました。

*4:nanimo_gsc.css のすべての内容をコピーし、それを [デザイン > カスタマイズ > デザインCSS] に貼り付ける、でも、実は上手く行くのですが...w