サイトをリニューアルする上で、設置したかった検索窓。。


実はブログのトップページをサイトに…
って構想があった時期に

てんこ盛り(?)の検索窓を設置したんですけど。
（正確にはＪＵＧＥＭ時代。。）

・参考リンク【H-FACTORY:検索窓いろいろ…】


サイトトップの方にも検索窓を導入しようと思い

ブログのソースをそのまま貼り付けるのもなんだか味気ない…

と思い、調べてみたら…


【googleカスタム検索】なるサービスがあるのを発見。。


なんでも、同一ページに検索窓と検索結果が表示出来るそうで…


ちょっと面白そうだな。。


なんて安易に手を出しちゃったんですが…


この時は。。


後々苦労する事になろうとは思いもしませんでした…爆
検索窓の設置は…

まず、【こちらのページ】で必要事項を入力すると設置用のタグが発行されるんで（要登録）それを貼りつけるだけの簡単設置♪

タグ発行までの流れは…
ここでは割愛させていただきます（爆）

あ、小粋空間さんのページが分かりやすいです☆

・参考リンク【小粋空間：Google カスタム検索が爆速な件】
（あぁ他力本願…爆）

検索結果の表示方法は
別窓で表示する方法やグーグルサイトで表示させる方法もあるみたいですが…

せっかくなんで同一ページに表示させる方法に設定。。

んで…

そのままタグを貼りつけると。。


こんな感じに…

うむ。。。。


検索結果を開くとこんな感じ…


うむむ…


せっかく同一ページに表示させたのに文字の大きさやらスタイルやらがイマイチですねぇ(^^;

まぁ…
ひいろんのサイト自体が文字サイズや装飾が特殊なのが悪いんですけどね(^^;


っつ〜事で。。


なんとかサイトデザインに合わせるべく
ＣＳＳを使ってカスタマイズ…
（ある程度googleカスタム検索の【デザイン】設定からは弄れます。）


しかし…


これがかなり苦労しちゃいまして(^^;



色々とごにょごにょ頑張って…


なんとかこんな感じに。。


検索結果オープン…


なんとかサイトとの融合ができましたかね。。


個人的には。。



画像検索結果表示ページにイマイチ納得出来てないんで。。


今後もちょこちょこ弄るかもしれませんが(^^;



っつ〜か、ブログに貼ってあるHTMLを使って
googleサイトで検索結果表示させれば超簡単だったんですけどね（爆