はてな用QRコードを設置する 24:45
他のブログでちょこちょこ見かけて、便利そうだなぁと思っていた携帯用のQRコード表示。もう、今、世に出回っているカメラ付携帯には、ほとんど標準で読取りアプリが搭載されてるから、雑誌や広告でよく見かけますね。
紙媒体だけでなく、TVやPC画面からも読み取れるようで、そういうサイトもチラホラ出てきて、ブログのオプション表示としてるトコもあるようです。将来的に設置出来るのかもしれないけど、まだ“はてなダイアリー”にはないので、電車内であれこれ調べて、久々にちょっとテクって自分で設置してみました(^o^)v
まずは、無料でQRコードを生成出来るサイトで、はてなモバイル用のURLコードを作る。「QR 変換」とかをググれば一発で出ます。変換するのは
http://d.hatena.ne.jp/*******(←自分のはてなid)/mobile/
というURL。PC用の本サイトURLでもいけるけど、それだと携帯で表示した時、重いのでmobile版がお薦め。それがこちら。
このQR画像をZaurusやPCに保存。ネット上のどこかにアップして、そいつにリンクさせる方法で表示させることにします。今回は、はてなユーザなら簡単に利用できる“はてなフォトライフ”を活用、ここに先程のQR画像をアップロードする。この時、アップする前に、画像サイズを140*140〜180*180あたりにしておく方がいいかな。はてなダイアリーのサイドバー幅より、狭くしておくのが表示レイアウトを崩さずにいい感じです。
で、肝心なのが、今アップした画像のネット上の住所を確認すること。はてなの画像リンク表記では直接飛べないようなんで、プロパティを開いて自分で調べないといけない。この作業、Zaurusで頑張ってみたけど、どうにもできなかったんで、ここだけは自宅PCでチェックしました(^-^; 基本的に【http://鯖/フォルダ/日付/管理番号.png】とかになってるはずです。
最後に、はてなダイアリーの“管理>デザイン”設定のサイドバーに表示タグを指定します。ページのフッタ項目にある
<div class="sidebar">〜〜</div>
の間に・・・
<div class="hatena-module"> <div class="hatena-moduletitle">QRコードです</div> <div class="hatena-modulebody"> <img src="http://〜〜画像のURLアドレス" alt="画像の説明文など"> </div> </div>
・・・という文字列を入れればOK。title、altの部分は任意に書き換えても大丈夫です。img src=のURL部分は、上で述べたPCで調べたQR画像をアップしたサイト内の画像URLにして下さい。
うちのブログのトップにあるQRは、この方法で設置してみました。まあ、必要性が高いか低いかは別として、携帯でも読めますよ〜♪という宣伝ですのでw 工夫すれば何とかなるもんですな(*^ー^*)