Labrid WP

CSS3に非対応なIE(><)でもborder-radiusを表示できるようにするJavaScript

curved-corner – Project Hosting on Google Code

moz-border-radius: 00px;//for Firefox
-webkit-border-radius: 00px;//for Safari and chrome
border-radius: 00px;//CSS3
behavior: url(border-radius.htc);//for IE

※ただし！
上記プロパティを設定したブロックに line-height が設定されていると、
IE6で要素の下端が下に伸びます。
上位要素（body等）に line-height を指定している場合は、
line-height: normal;
を指定してあげればOK。

サンプル
（右クリック→リンクを新規ウィンドウで（略））

ウィンドウサイズの変更に合わせて背景画像が伸縮するFLASHムービーを作成してみました。

仕様：
・背景画像は縦横比固定。
・ウィンドウ内に余白が出ない。

ボタンにマウスオーバーで状態1に変わる。
ボタンクリックでさらに別の状態2に変わる。
（状態2では、マウスオーバーで変化しない）
別のボタンクリックで、初期状態に戻る。
(続きを読む…)

プラグインをモリモリ盛った Wordpress。
それがある日突然クライアントから「IE6 でスクリプトエラーになるんだけど」なんて連絡がきたら・・・考えただけでも恐ろしいです。 (続きを読む…)

今回は、ヘッダー画像をランダムに変更する仕掛けをWordpressのテーマに仕込んでみます。
アクセスする度にサイトのイメージが変わるので、訪問者に常に新鮮な印象を感じていただけます。
導入が簡単な割に、効果の高いカスタマイズです。 (続きを読む…)

共用SSL で Wordpress のメールフォーム（お問い合わせ等）のSSL化を試みました。

かなりしつこく調査してみましたが、現状では共用SSLでのSSL化は無理、という結論。残念。

が、そもそもなぜSSL化が必要か、というと、お問い合わせフォームのようなメールフォームでは通信をSSLを通して暗号化する事が常識になっているからなんですね。
本当は、入力内容をそのままメール送信するフォームでは、SSLは無意味であるにも関わらず。
入力側（ブラウザ?サーバ間）をSSLで暗号化しても、出力側（サーバ→メール送信）が暗号化されていないので、意味は無いんです。
あるとすれば『安心感』。運営側にとってはそれも大事。
だから無意味でも皆コストをかけてSSL化するんですね。

話がそれました。
現状ではどうやら、共有SSLでWordpressの特定ページをSSL化するのは不可能なようなので、Wordpress を導入しようとしていて、SSLを使う予定があるなら、多少高くても独自SSLが使えるサーバを選ぶのが正解のようです。

※管理画面をSSL化するのはセキュリティを高める手段としては有効です。
こちらは Admin-SSL を使えば共有SSLでもSSL化できるようです。
Admin-SSL プラグインについてはまた別の記事にて。

MacでファイルサーバーやUSBメモリにデータをコピーしたり、CDにデータを焼いたりすると、DS_Store というフォルダや、._（ドットアンダーバー）から始まるファイル名のデータ（リソースフォーク）が作成されます。

これらはMacからは見えないのですが、Windowsなどからは見えてしまうので、
「Macユーザーがファイルサーバに使うとゴミファイル作られて迷惑」
「MacユーザーにCDRを焼かせるとゴミファイルまで一緒に焼くので迷惑」
などと言われていました。

WEBデータをサーバにアップする際も、FTPソフトによってはこれらリソースフォークを一緒にアップしてしまうため、サーバ領域を圧迫する原因にもなります。

USBメモリタイプのミュージックプレイヤー等の場合、これが原因で正常に動作しない、フリーズするといった現象も発生します。
（私も使っている Juke Tower では、Mac からコピーした場合は、Windows でリソースフォークを消してくれと公式FAQで公言しています。）

リソースフォークの役割や意味はともかくとして、Macユーザー以外にとっては百害あって一理なし。
以下のソフトを導入すると、リソースフォークを外部に作成しないようにできます。

• BlueHarvest

BlueHarvest allows you to keep your disks and servers free of Mac “trails” by:

• Automatically removing DS_Store files.
• Automatically removing resource forks (“dot underscore” files).
• Automatically removing hidden folders such as “.Trashes” from removable disks.
• Providing simple Control-Click Finder based cleaning of disks, folders and Zip archives.

BlueHarvest is fully customizable (via a System Preferences Panel) and is a Universal binary, supporting Intel and PowerPC based Macs. BlueHarvest 2 requires 10.4.x or 10.5 and later.

これを導入するとシステム環境設定に BlueHarvest の項目ができ、リソースフォークの存在を意識する事無く、自動でサーバやUSBメモリにこれらをコピーしないように設定する事ができます。

BlueHarvest 設定画面

日本語版も用意されているので、英語が苦手でも安心です。

HTMLソースの差分データをエクセルデータにして提出して欲しいと、とあるクライアントに要望されました。

経緯は・・・ここでは言いますまい。

そこで、差分ツールの２大巨頭「DF」「WinMerge」でこの要望に応える方法をメモ。

※ググったところ、まさに！というソフトを見つけましたが、動かず。
必要そうなランタイムを入れてみたもののダメ・・・原因をさぐるより他のツールを探したほうが早そうなので放置。
(続きを読む…)

IE6問題への対処に関するテクニックをまとめた記事を紹介する記事を紹介します。

• IE6問題に対処する10のテクニック | エンタープライズ | マイコミジャーナル

(続きを読む…)

今更・・と思われるかもですが、ちょっと感動したのでメモ。

透過PNG（α値を持ち半透明が表現できる）がIE6以前で表示できない問題を解決する方法が DesignWalker さんのところで紹介されていました。

• 透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる

今まで悩んでいたのがバカみたいに全ての問題がすっきり解決しました。
自分が開眼したのかと錯覚する程の感動。感謝！

尚、今まで悩んでいたのは、ここの iepngfix.htc を使った方法。
これだと、float関連でレイアウトが崩れたり、表示がとんでもなく重くなったり、場合によってはブラウザが固まったりするので、お勧めできません。
sorry -> author.

いつのまにか ユーザーディレクトリ

http://localhost/~(user)/

が 403 Forbidden で見えなくなっていた。

おかしいなと思い、ググって・・・さんざんググってようやく情報発見。

• LeopardアップグレードインストールとWeb共有

Leopardにアップデートしたらみえていたサイトが見えなくなった, と聞いて確認したところ, みえなくなったのではなく, そのサイトのホスト側でWeb共有がおかしくなっていたのだとわかった. まず, Web共有がオフになってしまっていたので, これをオンにする. しかし, Permission deniedで403 Forbidden. いろいろ調べていて以下のサイトにどんぴしゃなことが書かれていた. http://earlybirds.ddo.jp/namahage/inegalog/forum/topic.php?tid=73&p=0 ようするにApacheのバージョンがあがったので, それにともなってファイルを設定しなおす必要があったらしい./etc/httpd/usersから/etc/apache2/usersへconfファイルをコピーする.

新しいユーザーつくると見えるし、それにしては /etc/httpd/users に user.conf がないし。おかしいなとは思ってたんです > <

jQueryアニメ＆エフェクト合わせ技で画像を拡大｜ASCII.jp

jQueryでちょっと小粋なアニメエフェクトを追加するテクニックが紹介されています。

流行の lightbox（Labrid WP でも使っている、画像をクリックすると周囲が暗くなり画像だけが画面中央にハイライト拡大表示されるエフェクト）もいいですが、猫も杓子も・・・的なところがあります。
こういったエフェクトをオリジナルに付け加えられる技術はぜひ持っておきたいところです。

jQuery 関連情報

• jQuery 1.3.2 日本語リファレンス
• jQueryサンプル集 | DesignWalker
• All About：タグ「jQuery」の記事一覧

CSSでマウスオーバー効果を得るのに非常に便利な :hover 疑似クラス。

こんなに便利なのに、IE6以前では A 要素にしか対応していない。不便。

例えば、フォームの input ボタンに マウスオーバー効果を付加したい。

なんて時には、泣く泣くCSSは諦めて、マウスオーバー用の画像を用意してonmouseover=”this.src=’button_over.gif’”
なんて事をしないといけなかった。

が、ここで朗報！
この問題だけをクリティカルに解決してくれる素晴らしい方法がありました。

• IEでa要素以外に:hover擬似クラスを適用させる

要するに、
Whatever:hover で配布している csshover.htc をダウンロードして、
これを body { behavior:url(“csshover.htc”); } で読込む。以上！

なんて簡単な・・いや、この htc を開発した開発者さんに感謝。