はてなブログのテーマでやったこと (2) - 検索ボックスは Google のカスタム検索を
今回も続けて、はてなブログのテーマ nanimo について、メモを上塗りwしておきたいと思います。
長くなったので、検索ボックスの件は別の機会に触れるとします。
はてなブログの検索ボックスに、Google のカスタム検索エンジンを使いたい
そう思ったので。
今回は、結果こうなります。;
2 点ほど注意がありまして、一応あらかじめ。
ひとつは、検索ボックスの位置は、上のイメージの通りですが、トップページとそれ以外で変えています。*1
トップページでは、タイトル右下に、
それ以外のページでは、コンテンツの下、行方向 1 カラム中央に。プロフィールの上に来るようにしています。
ふたつめは、ここでの Google カスタム検索と、はてなブログ標準で宛がわれている検索ボックス [ブログ内検索] の関係は、"排他" としています。
では以下具体的に手続きを。
step0. 下ごしらえ - Google Custome 検索のためのユーザ登録 と コード取得
導入にあたっては、準備が必要となります。
ここでは以下サイトを参照させて頂いてます。;
» Google カスタム検索の導入方法
» 「はてなブログ」に「Googleカスタム検索」(サイト内検索)を導入する - やじり鳥
若干の仕様変更等が生じているらしく、幾つかの UI は異なったりするようですが、
迷うほどではないので、その辺りは臨機応変、脳内補完でイケるかと。
アウトラインは、
Google の カスタム検索エンジンのページへ行って... ;
- 使うためにアカウントを登録
- コード(スクリプト)の生成と取得
こうやって吐き出されてきたコードは、コピーするなり、記憶するなりで、どこかに退避しておくと良いと思います。
もちろん、コードは後でも、この 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 のコードを想定してのやり方ってこと? なのかしら?
と言うことでして。
今回もダラダラと勢い任せで書いてしまいました。
おしまいです、はい。
