e日記風 独り言

気まぐれ & 気まま & 天邪鬼な老いぼれ技術屋の日々の記録のうち、主に Perl・CGI・HTMLなど Web技術に関連した記事です。
右端上端の同一カテゴリージャンプボタンで他の同じカテゴリーの記事を順番にご覧いただけます。
Access Counter:  総アクセス数
-1595- 狭い話
またまた普通の人にはどうでもいい話だが折角調べて解決したので忘備録として。
このページのデザイン+スタイルシートをリニューアルしている中で、従来も設置していた「Google Site Serch」という主にそのサイト内だけで特定ワードの検索をする機能で若干ひっかかった。最初のはかなり以前に自分用に設置したものだった。(自分で自分のサイト内に「確かこんなことを以前どこかのページに書いた記憶があるが、どのページだっけ?」などと迷った時、検索するとそのワードが含まれる自分のページが検索できる。「教えて!」のようなページでも時々使うことはある。)
このページのリニューアルに際して、それも他のサイトで見かける最新のスタイルに変えようかと検索したら、Google Custom Serch というものになっているらしい。(従来の検索ワードにサイト名を付加して Googleに投げるタイプのものももちろんまだ使えるが)
Google IDがあればログインしてデザインなど専用のカスタマイズをして使えるらしいので使ってみた。そこで得られたコードを自分の html中にそのままコピペしたところ、検索はできるが、私のようにサイドバー上に設置すると検索結果もそのサイドバー内に表示されてしまう。サイドバーは幅が狭いので何件もヒットした検索結果を調べるのは結構辛い。従来だと htmlタグそのままだったので新しいタブに表示したり、ページトップに表示したりするのも htmlタグで target="_blank" とか target="_top" とかやれば良かったのに、Google Custom Serch では Java Scriptで動作させるようになっているのでちょっと面倒だ。
アチコチうろつき回って調べたところ、Script本体はページの </body> タグの前に記述して、検索ボックスを表示させたいところには <gcse:searchbox-only> </gcse:searchbox-only> を、検索結果を表示させるところに <gcse:searchresults-only> </gcse:searchresults-only> を記述すればいいと分かった。(但し、非検索時にも検索結果枠は padding:1em 分の領域を確保しているので、そこの空きスペースが若干気になる。前後の要素のマージンに合計 -26pxまでの負の値を設定して調整したほうがレイアウトが綺麗に見える)
但し問題が一つ。このページのようにスマホでは サイドメニューをボタン化してしまう場合、ボタンをタップしてサイドメニューを表示させると検索枠は表示されるがそこに検索ワードを入力しようとして、検索枠をタップするとサイドバーが隠れてしまう。それでも文字入力、変換して「確定」キーをタップすれば検索はしてメインのエリアに表示してくれるが、入力した単語が見えないので AND検索などは難しい。 何とかしたいが Javaの力が足りないので暫くはこのまま使うしかないだろう。

今日の写真は夏みかんの花。今の時期住宅街を歩いていると、どこからともなく柑橘系の甘い香りがかなり強く漂ってくる。私の鈍い嗅覚でも気づくからかなりの匂いだ。
2016/05/08