愛solation-ward

IE7 で表示確認してみたが、MSのやろーはまたCSSの解釈を曲げやがった。
うちの Pink-Bar のメニューが出ないどころか、リンクアイコンの位置まで違うときたもんだ。
何が正しくて何が間違いなのかをハッキリさせて欲しいぞ。＞ W3C
[tags]ボヤキ,電網,css[/tags]

_/_/_/ from WX310J _/_/_/

ここでは外部リンクに特定アイコンを表示することで、そのリンク先が「隔離病棟よりも外ですよ〜」ってアナウンスしてる。（つもり）
そんでも一様に「例：上原ひろみ」のようなアイコンでは寂しいかな？と思って、下記のような主要サービス（僕がよく使ってるだけ？）のための特殊アイコンを作ってみた。

• 上原ひろみ（Wikipedia）
• 上原ひろみ（Amazon）
• 上原ひろみ（Google）
• 上原ひろみ（はてなダイアリーキーワード）

もちろん url から判断して自動でクラス名を振り分けてアイコンを付けてるんだけど、その副作用で下記のような面白いことが起こった。

• 例文１：美瑛のカレーうどん僕も食べたいよ ＞ 堂主
• 例文２：徹夜でシゴトしながらコメントするMZさん、職場で寝てください

友達にはてなユーザが多いんでこのままにしとこ。

あかん、ムリ、僕の能力では限界。。。
まず Gecko とか、Mac系ブラウザを持ってない。
そんでもって Opera の動作がよくわかんない。
IE と Firefox で表示確認して、そこで違いを見つけては css での逃げを考えるくらいが関の山。
っつか、position とか凝った表示の場合のズレは許すとしても、p とか ul で差が出るのはどうにかしてほしいぞ。
[tags]ボヤキ,電網,css[/tags]

_/_/_/ from WX310J _/_/_/

スクロールすると半透明ピンクのバーが上下に動くのがわかります？
このピンクのバーの上にマウスカーソルを持っていくと、隔離病棟サイトメニューが現れるようにしてみました。
最初はブルーにしてたんだけど、蛍光ペンでマーキングしたみたいに見えるピンクを採用。
HTMLタグに埋め込んだ javascript の onmouseover と onmouseout でスタイルクラス名を書き換えて、あとはスタイルシートに表示を任せているだけのシロモノですが、結構良いアイデアだと思いませんか？
これは最近の（エンゼルパイミニ）に並ぶヒット作品ですわ。（＾＾；

ホントにまったくこのクソ忙しいときに、毎日のようにこんなアイデアが脳味噌に溢れ出して来るんで洗濯するヒマもありません。＜ 言い訳
毎日のようにココをいじくりまわしてると、いつの間にか駄文タグ選択した時の表示に不具合が発生してることに気が付いた。
キーワードで絞込みができなくなっちゃってますね。
これを解決するまで、また眠れそうに無いな。。。

さて本日（昨日？）より駄文タイトル横にぺろっと付いてる付箋に気が付いてくださった方。
クリックしてみてちょ。

アイデア発想から実現まで期間にして約30時間。
合計実働時間約5時間もかけて実装した付箋型情報窓なのぢゃ。
CSSはもちろん、javascript も稼動できる状態でないと動きませんので、その手のアクセサリがお嫌いな方は無視してください。
ま、やってることはボックス作って

• 投稿日時（時間はSwatchインターネット時刻）
• 駄分類（いわゆるカテゴリってやつ）
• 被読性成分濃度（ページヒット率と表現すれば良いか？）
• Parmalink（そのページのurl）
• カスタムフィールド（その他任意情報）

を入れただけ。
ボックスの作り方は先日のポップアップもどき関連の技を活用。
開閉には「WordPress Japan :: トピックを表示 - ページリストをプルダウンにするには」に記載のあった custom.js を使う方法が一番軽い javascript ライブラリの組み合わせだったので採用。

あ〜、仕事納めの日だというのに寝不足確定だな。

先日からトリツカレタようにスタイルシートをいじくりまわしているしゅんろ〜ですが、皆様いかがお過ごしでしょうか？
またまたスタイルシートでポップアップもどきの話題ですみません。

以前から書いているように、ここの隔離病棟でリンク文字にマウスカーソルを重ねると、余計なサムネイル画像やら文章やらが出現するという動きをスタイルシートで実現してるのですが、よくよく検証すると ＩＥ^*1 と Fx^*2 ではちと挙動が違うことが判明。

ちなみにうちのポップアップは、わかりやすく？書けば

【aタグ 文字列 （spanタグ 画像や文字列）】

という構造をしており、spanタグ内に記述されたものがポップアップされる部分です。
・・・つまり、ポップアップ部分をクリックしてもリンク先に飛べます。

そんで、aタグは position:relative で、spanタグを position:absolute にして z-index に整数を入れて重ねてるというモノなんですが、Fx ではキレイに重なり下に書いてあるものは見えなくなるのに IE では下のリンク文字や form の部分が最前面に残ったままになります。
恐らく多分 Fx の方が正しい動作だと思うんですがどうでしょう？

どっちにしても、せっかくのポップアップ (画像ならまだしも文字列ではちょっと見づらい) にゴミが重なって気に入らないんだけど、なんか回避策など無いもんですかねぇ。。。

昨日の続きです。
ちょっと css をシェイプアップしてポップアップに文章も入れられるようにしてみました。
っつーかこれで終わりにしよう (考え始めたらキリが無い性格なもので。。。) かと。
[code lang="css"]
a.pu {
position:relative;
}
a.pu:hover span,
a.pu:active span {
display:block !important;
width:160px;
font-size:small;
line-height:1.2em;
color:#557;
background-color:#fff;
margin-top:1.2em;
padding:5px;
border-style: solid;
border-color: #ddd;
border-width: 1px 2px 2px 1px;
position:absolute;
top:0;
left:1.2em;
z-index:2000;
}
a.pu span {
display:none;
}
a.pu span img {
width:160px;
}
[/code]
昨日は a タグを span タグで囲ってましたが、考えてみれば hover という擬似クラスは a[href] にしか有効にならないのよね。
だから、a タグそのものにポップアップ用のクラス pu をつけてみました。
このスタイルシートで
[code lang="xml"]
表示する文字列
　　　　　　　　ポップアップの中身（画像とか文章とか）

[/code]
てな風に記述すれば良いわけ。

Wordpress用のプラグイン mygallery と footnotes にちょいと手を加え、リンク挿入時に上記の記述を自動挿入するようにした。
mygallery の方は、いつもの「〜本日の精神安定剤〜」の目印の項目にあるリンク。
footnotes は、記事の最後に脚注を入れるものだけど、脚注ではなくポップアップ^*1で内容が表示されるようにした。

さて、明日からは別のこと考えよ。

リンクの上にマウスカーソルを重ねると、画像や文章をポップアップウィンドウで開くというテクニックがある。
大掛かりにそれを実現しているのは javascript や php や css を組み合わせてるものが多い。
知識の浅い僕は今まで「へぇなんかすごいことやってるなぁ」って思ってたんだけど、本日ふとしたはずみにそれに近いことが css のみで実現できることに気が付いてしまった。（遅い？）

ここ隔離病棟では、ほぼ毎日のように投稿される駄文「〜本日の精神安定剤〜解説ページへ飛びますが、直接関係無いんで無視してもらってもかまいません。」という日記がある。
まぁ、その日に何を着てたかとか、何飲み食いしたとか、何聴いたかとかが書いてあるんだけど、後日それらをずら〜っと並べて分析（何をぢゃ）したいがためのものである。
だから、毎日の記述は簡潔にして、記録を参照するときはリンクの上にマウスカーソルを重ねるだけで着てた服とかを眺めたい。
そんな時に画像を見るためだけにページ切り替えなんて発生したらストレス溜まりまくりである。

てなことで「〜本日の精神安定剤〜」のリンクにはポップアップする画像がセットしてある。
最初は javascript + css でポップアップを実現するモノ（某所からのいただきもの）を使っていたが、他にも javascript ライブラリを大量に読み込んでいるここで、このポップアップのためだけに豪勢＆贅沢なポップアップスクリプトの必要性に疑問を感じていた。

もっと簡単に、そして軽快にサムネイル画像をポップアップできないだろうか。。。

考えてみれば css の a:hover を使えばできるぢゃん！
いつもはリンクの上にマウスカーソルが重なったときに、リンクそのもののスタイルをセットするために使ってたけど、それに属するタグのスタイルも変えてしまえば良いんでない？
つまり
[code lang="css"]
/* thumpop */
.thumpop a:hover {
position:relative;
}
.thumpop a:hover img {
display:inline !important;
background-color:#fff;
margin-top:1.2em;
padding:5px;
border-style: solid;
border-color: #ddd;
border-width: 1px 2px 2px 1px;
position:absolute;
top:0;
left:1.2em;
z-index:2;
}
.thumpop img {
display:none;
}
[/code]
ってな感じの css を作る。
動きは”thumpop”ってぇクラス内のリンクにマウスカーソルが重なったら、そのクラス内の画像が重なって枠付きで表示されるというだけ。
実際のhtml記述は
[code lang="xml"]

文字列



[/code]ってな感じにする。
css側に display:inline !important を入れ、html記述側に display:none を入れているのは、規定の css ファイルを読み込まなかった場合（携帯閲覧時など）に画像をずらずら並べたくなかっただけ。

このやり方を応用すれば、画像だけでなく説明文をポップアップすることも可能ではないか。
いやー、なんでこんなことに早く気が付かなかったんだろ。