ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

リンク先が拡張子や外部サイトの時にそれぞれアイコンを表示

December 04 2011

Webを見ていてリンクをクリックするといきなり立ち上がるAdobe Reader。
「PDFならそう書いとけや!」とほんのり殺意がわく瞬間ですね。
非力なサブマシンならOS毎巻き込んで石地蔵状態になる可能性もあり
なかなかこいつは無視できない事例。

自分が制作する場合にはこういう事はかなり気をつけてますが
昔はそれこそテキストリンクの横にimgタグで
ひとつひとつ画像を貼りつけていたもんです。

しかし、このご時世、もっと簡単な方法ないんかいと世間に問えば
それがあるんですよ奥さんっ!
CSS3なら以下の書き方が可能です。

参考サイト:コリス様

外部リンクでアイコンを変更する場合
a[href^=”http://”]{
background:transparent url(../images/external.png) center right no-repeat;
display:inline-block;
padding-right:15px;
}

判別する箇所のサンプル -mailto
a[href^=”mailto:”]

判別する箇所のサンプル -PDF
a[href$=’.pdf’]

判別する箇所のサンプル -圧縮ファイル
a[href$=’.zip’], a[href$=’.rar’], a[href$=’.gzip’]

判別する箇所のサンプル -画像
a[href$=’.gif’], a[href$=’.jpg’], a[href$=’.jpeg’], a[href$=’.png’]

判別する箇所のサンプル -ドキュメント
a[href$=’.xls’], a[href$=’.csv’], a[href$=’.doc’], a[href$=’.txt’]

もちろんこれはIE6では動作しないので、IE6対応の場合
behaviorを使って以下の記述もプラス。

* html a{
behavior: expression(
this.className += this.getAttribute("href").match(/^http.*/) && (!this.getAttribute("href").match("自サイトドメイン")) ? " external" : "",
this.className += this.getAttribute("href").match(/\.pdf$/) ? " pdf" : "",
this.className += this.getAttribute("href").match(/\.doc$/) ? " doc" : "",
this.className += this.getAttribute("href").match(/\.xls$/) ? " xls" : "",
this.className += this.getAttribute("href").match(/\.zip$/) ? " zip" : "",
this.className += this.getAttribute("href").match(/^mailto.*/) ? " mailto" : "",
this.style.behavior = "none"
);
} 

それでも、めんどくせえという人はJQueryを使いましょう。
もちろんJavascriptをオフにされると動作しません。

以下のサイトで紹介されてるやり方が一番簡単です。
Lost Technology様の「リンクしているファイルのアイコンを表示
http://www.losttechnology.jp/WebDesign/2010/linkicon.html

アイコン画像は・・・・・それぐらい作ろうね、と言いたいけども
ICON WANTEDって便利なサイトもあったり。
http://iconwanted.com/

一度、この設定をしておけば使い回しも利くし
うっかり間違いもなくなるので便利には違いないですね。

「深く眠る」ためのアイマスク、そして耳栓を試す。

December 03 2011

Twitterで家入一真氏がつぶやいていたこのツイート。
http://twitter.com/#!/hbkr/status/127299994364559360
二つの画像は眠りの深さを表すグラフ。

Sleep CycleというのはiPhoneアプリで
睡眠サイクルに合わせてやさしく起こしてくれるのだそうだが
それよりもこのグラフの違いに驚きました。
耳栓とアイマスクをして眠ればこんなに深く眠れるのか、と。

僕は朝6時頃寝て、11時ぐらいに起きる生活なので
できればこの間は「死んだ様に深く深く眠りたい」と常々思ってたわけですが
こんな画像を見てしまうと、善は急げで早速アイマスクと耳栓を買ってきました。

 

アイマスクは使った事あるんですが、耳栓は生まれて初めて使います。
なんか硬質スポンジみたいな形状で、コヨリみたいに細くして耳に入れると
あら不思議、じわじわ膨らんで耳の穴にぴったりとフィットするんですね。
なんと言いますか、「シーン」という音が聞こえるような遮断具合。

そして、アイマスクをして布団の中に。

・・・・・・・あっという間に眠ってましたww

今までは本読んだり、スマートフォン触ったり、PSP触ったりと
寝る事に対して集中できてなかったのですが、目と耳を塞がれちゃあ
もう正直寝るしかやる事がないんですね。
脳と体があきらめたかの如く、すーっと眠りに落ちてたみたいです。

実際これを使ってみてどうだったか、というとお昼ご飯の後に眠くなることがなくなりました。
たぶん今までと同じような睡眠時間でもしっかりと眠れてるのかも知れません。

人生の半分近くは寝てるんですよ!ってキャッチコピーで
布団売りに来た兄ちゃんとか、枕に数万かける知人とか
めっさ高価なマットレスを数年ローンで買っちゃう友人とか
それぞれ「眠り」というのは立派なビジネスになりうるほど関心が高いのでしょうけども
このアイマスクと耳栓なら、2000円弱の投資で効果が実感できるので
とってもコストパフォーマンスが高いですよね。

ただ・・・・・・

目覚まし時計使って起きなきゃならない場合はバクチですけど(笑)

紅葉を見に箕面の滝に行ってきました。

December 02 2011

近場で「紅葉」を楽しめる所、と言えばやっぱり箕面の滝。
以前はドライブがてらよく行ってたんですが、最近はご無沙汰でした。
娘もてくてくと歩けるようになったので久しぶりに行ってきました。

確かにきれいでしたが、昔ほどの鮮烈さはないような・・・?
最近は赤く染まる時期がすこし遅くなってる気がします。
それこそ小さい頃は11月にはもう真っ赤だった、みたいな記憶しかないですが。

山の上の駐車場前にあった茶屋がきれいさっぱりと更地になってたのはショック。
いつ行っても閉まってたここが営業してるのをぜひ見たかったのですが
まさか根こそぎ無くなっているとは・・・(笑)

自動販売機もなくなったので、駐車場周辺でドリンクを買うことができなくなっています。
(滝の前まで行くとまさにお祭り価格ですからね・・・・)

さすがに12月にはいったばかりだったのでとても風が冷たい!
体もどんどん冷えてくるので、滝から少し駅に戻った茶屋でおうどんを食べました。
嫁さんはぜんざいを食べたのですが、800円というすばらしくリーズナブルな値段(泣)
うどんより高いってのもなんとなく納得いかないような。

まあ、場所代も入ってると考えたらそれなりなのかも知れません。
娘は初めて見る大滝に大興奮の様子で
「あーあー!」と「あそこ(滝壺)に連れて行け!」となんとも無茶な要求をしてました。
さすがにまだ・・・・いや一生行きたくないです・・・滝壺には(笑)

箕面の滝と言えば、野生のニホンザルも楽しみの一つなのですが
さすがに寒すぎるのか、滝周辺では全く見かけませんでした。
でも、やっぱり猿を見ないと箕面に来た気がしない。
行きは勝尾寺側から来たので、帰りは箕面駅方面に走ってみると・・・
やはりいました。道路の上を傍若無人に走り回るモンキー達が(笑)

時期的に小猿はいないんでしょうかね。。
一匹も見かけませんでした。
今度は夏前ぐらいの風が気持ちよい時期に家族と行きたいもんです。

« Oct 2018 November 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30