ブログ内検索を手直し ― 2011/02/08 05:39
変更前の検索はこんなんでした。
久しぶりにGoogleのアイコンをクリックしたら「該当する記事が見つかりませんでした」になってしまってた。orz
URLを変えるだけでは癪だったのでブログ内検索のレイアウトから見直すことに……
語句を入力して[Enter]キーを押すかGoogleアイコンをクリックでブログ内検索
何も入力せずにGoogleアイコンをクリックでGoogleに移動です。
ということで、Google移動アイコンとラジオボタンがなくなったのでかなりスッキリしました。CSSは増えてしまいましたけれどHTMLがそれ以上に減ったのでかなり満足。
一見、入力エリアの中に検索ボタンがあるように見えるけれど、実はFORMにボーダーを付けて偽装してるだけで、その中にテキスト入力と検索アイコンが並んでるだけというこれといって特徴のないものです。
それにしても、たったこれだけに小一時間もかかるとは思わなかった。orz
実は検索開始のアイコンにGoogleアイコンを虫眼鏡で見てるのを作ろうと思ったのですけれど、小さすぎて何がなんだか……センスが無いとガッカリクォリティしか出来ないのでつらいっ
参考:検索フォームをCSSでデザインするサンプル集 | CSS Lecture(の4を参考にしました)
あれこれ ― 2010/11/11 05:22
Yahoo!JAPANもIE6サポート終了へ - ITmedia News
一方、アサブロは
※このテンプレートは、Internet Explorer 6.0以前のブラウザには対応しておりません。
ついにIE 6以前を切った!
Amazon、デジタル雑誌・新聞の売り上げの7割を出版社に - ITmedia News
この新たな分配条件は12月1日から適用され、出版社は売り上げから配信コストを引いた額の70%を受け取れる。これまでは、出版社の取り分は30%前後だったという。ただし70%を受け取るには、印刷版のコンテンツの95%がデジタル版に含まれていること、デジタル版を印刷版発売の3時間前にAmazonにフィードすることなどの条件を満たす必要がある。
前の30%が異常なのだと思う。ようやく当たり前なレベルに達したんじゃないか?
ゴキブリに火、作業場全焼 燃えたまま逃げ回る - 47NEWS
三豊署によると、作業用の機械についたゴキブリ数匹を駆除するため、香川さんがゴキブリや周辺にアルコールをかけて火を付けたところ、建物の断熱材の裏側などに逃げ込んだという。
しいたけ栽培作業場だから殺虫剤が使えなかったのか?
氷殺ジェットさえあれば……
この記事を見るちょっと前にゴキに逃げられた。orz
手元に武器(蠅叩き)さえあれば仕留められたのに……
それにしても家のGキラー部隊(大きいのが多分3匹はいる)は何やってんだ?
今年ゴキブリを見たのは3匹目。引っ越してきた頃は毎日どこかで見かけたのでホウ酸団子の方が効果あるのだろうけどね。
(古い家&庭に虫がいっぱいいる環境なんでいくら外に追い出しても家の中に何匹か侵入される。このまえ手のひら大の超巨大なやつを見かけた)
Togetter - 「「中国嫁日記」月さんにバレる」
「抱き枕がなければ、嫁と寝ればいいじゃない」
なんかツボったw
抱き枕は布団を奪ったり蹴ったりしないけどな(寝相的な意味で)。
「そうなんだ、じゃあ俺デートいくね」だったらネタ的に満点だったのに……
2Lのコーラは3/4飲んだ。
炭酸はまだ抜けきってないが、もはやコーラの味ではない。
炭酸ぬけま栓のポンプは多分130回?押した。
何かまちがってる気がしてきた。
そして元に戻す ― 2010/08/26 20:42
※実際には違っていたので追記しました。
サイドバーのメッセージツールがCSSで自由にレイアウトできないため、デフォルトの要素をdisplay:noneで消してHTMLを書くという非常識な対応をしていたのですが、サイト内検索はメッセージツールからHTMLカスタマイズに引っ越し、ブログパーツは危険ということでメッセージツールのブログパーツは廃止したことで、メッセージツールを自由にレイアウトする意味がほぼ無くなってしまいました。
無駄なCSS定義があるのも気持ち悪いので、いずれ書き直そうと思っていたのですが半年以上も過ぎてしまいました。
ところで、メッセージツールの記述はTextとHTMLとWikiの方式が選べるようになっているのですが、不思議なことにHTMLを選んでもインライン要素だと<p>で囲まれ、ブロック要素だと要素の前に<p>で閉じられるという理解できない余計なお世話をしてくれます(バグじゃないの?)。
よく分からないでしょうから例をあげると、インライン要素の場合
<iframe src=~ </iframe>と入力すると表示されるときは
<p class="mod-text"> <iframe src=~ </iframe> </p>にされます。
ブロック要素の場合
<ul> <li>~</li> </ul>と入力すると表示されるときは
<p class="mod-text"></p>
<ul>
<li>~</li>
</ul>
とされ、何をしたいのかまるで分かりません。
これのおかげでブロック要素の場合、先頭に無駄な改行が表示されてしまいます。
この無駄な改行を無くすのに、p.mod-text{display:none;}で消してしまうと、インライン要素の方が表示されなくなってしまいます。
しばらく悩んだものの、あらかじめ何もしないブロック要素でインライン要素を囲っておけば、p.mod-text{display:none;}でいいとようやく気が付きました。
要するに例の場合
<div> <iframe src=~ </iframe> </div>と入力すれば表示されるときは
<p class="mod-text"></p>
<div>
<iframe src=~
</iframe>
</div>
こうなる訳でp.mod-textを非表示にしても問題ありません。さて、これで一件落着かと思ったら、最初から用意されているツール「携帯からアクセス」の二次元コードが表示されなくなってしまいました。orz
どうしてこうなった? とソースを見てみると
<p class="mod-text" style="text-align: center; text-indent: 0pt;"> <img src="http://q.asablo.jp/qr/puppet.k.asablo.jp.png"> </p>
………………どうしてpなんですか? divじゃダメなんですか?
そもそも、HTML入力に勝手にpを挿入しなければ、こんな問題にもならないのですが……
馬鹿馬鹿しいと思いつつ、メッセージツールで「携帯からアクセス」を作っておしまいにしましたとさ。
<div class="mod-text" style="text-align: center; text-indent: 0pt;"> <img src="http://q.asablo.jp/qr/puppet.k.asablo.jp.png"> </div>
とここまでやっても、カウンターに「Counter」ってタイトルが表示されるようになったりしたのが気に入らなかったりする訳ですが、要望が通らなかったのでしかたがない。orz
深い理由があってこの仕様なら納得もいくのですが、HTML入力でこんな余計なことをするって、実は何も考えてないんだろ!って小一時間(ry
まあ言うだけ無駄なんだろうけどな。
-追記-
よく調べてみると実際には
<ul> <li>~</li> </ul>と入力すると<p class="mod-text">と</p>で囲むのを
<p class="mod-text"> <ul> <li>~</li> </ul> </p>Firefoxが表示するときに
<p class="mod-text"></p> <ul> <li>~</li> </ul> <p></p>のように修正していただけのようです。
仕方ないので、p.mod-text{display:none;}はやめて少しスペースがとられてしまいますが
p{text-indent:0;margin:0;padding:0;}で逃げることにしましたとさ。orz
それにしてもなんで<p>なんだよ。ヽ(`Д´)ノ
<div>ならこんなややこしい事にはならないのに。
最近のコメント