| @ブログ

Tribe Called Questの人のことじゃないよ(古)

ToolTip系のPlug-inはブログを作ったばかりの結構最初の頃から長いことArekorePopupを使ってました。透過やtext-shadowが美しいのでいまでも好きなんですけど、SafariがVersion 3.xになってからポップアップの位置がずれるようになった。誰か解決方法をブログに書いてないかなーってずーっと探してたんだけど、なかなか見つからない。

さらに先日、Googleの(Googleとは直接関係ないらしい)Chromiumを試してみたところこちらでもArekorePopupの表示位置がずれる。どうやらこれはSafariに固有の問題じゃなくてWebKit系全般の問題のようだ。

ArekorePopupは長らくバージョンアップとかされてないし、jQueryのプラグインに似たようなやつがあったので思い切って外してみることにした。それがこのqTipってやつです。

qTip jQuery plug-in qTip - The jQuery tooltip plugin - Home -

qTipの特徴はと言いますと、

  • スタイルを簡単にカスタマイズできる
  • 透過pngとか画像を使ってなくて完全にCSSとHTMLだけでスタイリングされてる
  • クロスブラウザなのでIEのこととかなんも考えずに使える
  • ファイルサイズが小さい
  • APIとかが充実しててカスタマイズ魂を刺激する
  • 画像とかHTMLもポップアップで表示できるらしい

text-shadowとか背景の透過表示はできないところがArekorePopupに負けてますが、ToolTip自体の表示位置だとか矢印の表示位置を激しくカスタマイズできるのが結構良い感じです。

ちなみにこのブログでは以下のように記述して使ってます。

$("a[title], img[alt]").qtip( {
	style: {
		padding: 5,
		background: '#191919',
		color: '#FFFFFF',
		title: {
			'font-size': 10
		},
		border: {
			width: 7,
			radius: 5,
			color: '#191919'
		},
		tip: 'topLeft',
		name: 'dark' // Inherit the rest of the attributes from the preset dark style
	},
	position: {
		target: 'mouse'
	}
});

| @ブログ

実は密かに別のサブドメインにMovable Typeを設置して、映画の感想をぼちぼち書いてました。このブログのアクセスログを見ると映画の感想はほとんどアクセスがないので、今後は別の場所に分けることにしました。映画専用ブログの方では劇場公開だけでなくDVDで見た映画の感想もわしわし書いていこうと思います。人に見せるためのものっていうより自分で後から「あー、あの映画何だったっけ?」ってときの記憶の引き出しのとっかかりにするために。

そんなブログに興味のある酔狂な方はこちら。

| @ブログ

CSS書き直した。

gygrb

space

透過pngをいっぱい使ったのでIE6では酷いことになってると思う。というか、CrossOver MacのIE6ではとんでもないことになってた。でもそういうのもひっくるめてインターネットだと思う。そういうわけでまだIE6を使っている人はFirefoxGoogle Chromeをダウンロードしましょう。

創意工夫点

:before と :after を使って、画像を使わずに記事タイトル横にサークルを表示するようにしてみた。あと、blockquoteでも同様に “ と ” を表示するようにした。頑張れば画像を使わなくても粘れることが分かった。

サイドバーを消してwidthを1024pxにしたことも新しい試み。最近はiPhoneの影響か、サイドバーを表示しないサイトが増えてる。代わりにフッターにナビゲーションっぽいのを配置するのが流行りっぽいのでそれっぽくしてみた。

space footer

↑の通り、ランダムで一枚Flickrの写真を表示するんだけど、結構懐かしい写真が表示されたりして、自分でブログを読むのが楽しくなる。撮った写真はアップロードしておくもんですな。

| @ブログ

そういえば2ヶ月くらい前からreCAPTCHAを使うようにしてみたんですけど、これが見かけ倒しで全然動いていない :-! ぶっちゃけるとこれをスルーしてもコメントできちゃいます。ちなみにreCAPTCHAとは何かというと、画像認証システムですね。スパムbotとかを排除するための機構で、Twitterのサインアップ画面でも採用されてますね。画像認証システムはいろいろありますけど、reCAPTCHAが他と違うのは本のテキストの読み取り判定精度の向上にも貢献できるところ。くわしくはこちらなどをご覧下さい。

あとこれ、ブログシステムに依存しないタイプのサービスなのが凄いですね。自前で判定用の画像生成したりする必要ない。僕のスキル不足のせいで残念ながらきちんと動いてくれてないんですけど、かなり便利なサービスだと思います。

| @ブログ

 最近、古い記事にコメントをもらうことが多い。一度、記事公開後2年くらい経過したP_BLOG関連の記事にとても参考になるコメントをもらったことがあったけど、そういう例外を除いて基本的に的外れなコメントや、記事が書かれた日付や前後の記事を読まずに思いつきで好き放題書かれたタイプのものが多い。こういうコメントの主はだいたいまともにレスを付けても書きっぱなしで返信を確認しに来ない人が多いし、匿名で好き放題書かれるコメントってのはなかなかイライラする。そういうわけで公開してから60日間が経過した記事のコメント欄は閉鎖することにした。どうしても反論や突っ込みを入れたいときはForumに書いてもらうか、トラックバックを下さい。