スクロールすると半透明ピンクのバーが上下に動くのがわかります？
このピンクのバーの上にマウスカーソルを持っていくと、隔離病棟サイトメニューが現れるようにしてみました。
最初はブルーにしてたんだけど、蛍光ペンでマーキングしたみたいに見えるピンクを採用。
HTMLタグに埋め込んだ javascript の onmouseover と onmouseout でスタイルクラス名を書き換えて、あとはスタイルシートに表示を任せているだけのシロモノですが、結構良いアイデアだと思いませんか？
これは最近の（エンゼルパイミニ）に並ぶヒット作品ですわ。（＾＾；
ホントにまったくこのクソ忙しいときに、毎日のようにこんなアイデアが脳味噌に溢れ出して来るんで洗濯するヒマもありません。＜ 言い訳
毎日のようにココをいじくりまわしてると、いつの間にか駄文タグ選択した時の表示に不具合が発生してることに気が付いた。
キーワードで絞込みができなくなっちゃってますね。
これを解決するまで、また眠れそうに無いな。。。
今月やたら急がしいので、今日もあっという間に過ぎ去ってしまった。
・・・でも相変わらずたり〜ず（今日はヴィンテージコロンビアでした）には行ってるけどね。。。
さて、先日のWordpress用語辞典プラグイン！の続きなんだけど、このIMM-Glossaryというプラグインをちょっと使っていると、いろんなアイデアや要望があふれ出してくる。
そんなわけで、ここ２日くらいで色々な小細工を試してみた。
まず上記の「複数単語→ひとつの解説」を可能にするためにプラグインの中身を少しいじった。
解説文に「ID=##」のような形で解説文のIDを書き込むことで、そのIDの解説文を横取りしてくるという方法だが、我ながらうまくいってちょっと満足してる。
すると次に思い浮かんだのが、解説文に投稿記事のIDを書き込むことで、用語を指定の記事へのリンクに置換できないかということ。
これもちょっと考えたら簡単にできてしまった。
・・・と、ここまでやってふと疑問が。。。
グルーピングできない用語一覧って必要なのか？
構造上、用語集のひとつの解説でも用語一覧ページでも、他の日記やページと同じようにロードされているわけで、特にひとつのページにまとめる必要性は？。
解説文に通常の投稿記事が使えれば汎用性は上がるだろう。
ページなら階層化、投稿ならタグやカテゴリでのグルーピングが可能になり、パーマリンク構造でurlも美しい？形になる。
一覧表示はテーマテンプレートを工夫すればなんとかなるんではないかな？
では IMM-Glossary というプラグインで必要な部分というのは、用語と投稿記事IDの関連付け部分だけで、用語一覧ページ作成機能は不要ってことか。
などという考えが一気に噴出して脳味噌パンク。
現在は IMM-Glossary をベースに、PHPとかプラグインとかシロートながら、イチから書き直してみようかと模索中。
ここ「隔離病棟」を開設以来２ヶ月の研究成果（失敗成果？）を反映しサイト再構築中。
整理できていない脳みその中に溢れているアイデアの原因は下記を理解しかけているためだろう。
最初は Wordpress 既存のテンプレートタグの範囲で精一杯だったのに、php でデータをちょこっと抜き出してくることができるようになると、次から次へとアイデアが生まれ発散中。
今日は一日テストラン状態かな。
しばらくの間エラーが出てたりすることもあるでしょうけど、数分後には解決してるはずなので見捨てないでね。
さて本日（昨日？）より駄文タイトル横にぺろっと付いてる付箋に気が付いてくださった方。
クリックしてみてちょ。
アイデア発想から実現まで期間にして約30時間。
合計実働時間約5時間もかけて実装した付箋型情報窓なのぢゃ。
CSSはもちろん、javascript も稼動できる状態でないと動きませんので、その手のアクセサリがお嫌いな方は無視してください。
ま、やってることはボックス作って
を入れただけ。
ボックスの作り方は先日のポップアップもどき関連の技を活用。
開閉には「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 ファイルを読み込まなかった場合（携帯閲覧時など）に画像をずらずら並べたくなかっただけ。
このやり方を応用すれば、画像だけでなく説明文をポップアップすることも可能ではないか。
いやー、なんでこんなことに早く気が付かなかったんだろ。
先日、javascript の Ajax ライブラリである prototype.js を利用して、ツッコミの表示／非表示をコントロールできるようにしたわけだが、駄文本体も more 以降 (俗に「続きを読む…」とか表示される部分。) コントロールしたくなった。
そんで探してみると Show Hide “more” with WordPress というプラグインがあった。
ダウンロードして、中身を隔離病棟用に書き換え採用。
javascript の部分は、せっかく prototype.js を使っているので、Element.hide と Element.show を使ったものに書き換えたところ、スクリプトが若干短くなって満足。
ちなみに通常のトップページでは全文表示状態である。
以下に隔離病棟での状態を示す。
結構面白い動きをするんで、サイドバーのコンテンツもいじってみたくなってきた。
・・・が、javascript を切ってる人にはまったく無意味・・・どころか非表示部分が見えないんでマズイかもなぁ。。。
ケータイ閲覧ページは電依研時代から wp-ktai を利用させてもらっていたが、Wordpress には Mobile Eye+ というプラグインがあった。
このプラグインは、ケータイでサイトにアクセスすると自動的にケータイ用ページに飛んでくれる。
WILLCOM にも対応してるみたいなので入れてみたところ、なんでか知らんが変化が無い。。。？
あ、味ぽんの表示モードを「Smart-Fitモード」にしてるからやった。(^^;
「ケータイモード」にしたところ、無事閲覧できました。
てゆか、これってマジでケーカイやね。(^^)v
カレンダーのスクリプトをコピーして手を加え、横型カレンダーを表示するプラグインを作って、日別表示でページナビゲーションもどきに見えるようにしてみた。
結構簡単に作ることができるんやな。
