http://www.understandard.net Just another WordPress weblog Thu, 20 Nov 2008 08:37:58 +0000 http://backend.userland.com/rss092 ja また今度、また今度とあと回しにしているうちに、サイトを放置し始めて早4ヶ月が経とうとしています…。 久しぶりの更新ですが、さっそく本題へ。 ブログが続かない ブログが続かない理由としてよく耳にするものは、 仕事や学業など、本職が忙しい 飽きた ネタがない 炎上した・嫌がらせを受けた などなど。 今回僕が4ヶ月も記事を書かなかった（始めて2ヶ月くらいで…）理由は、上に挙げたようなちゃんとした（？）理由ではなく、ただやらなかっただけ。 うん。ホントやらなかっただけなんです。 更新しなかった間に何かしていたか 7月から8月にかけて初めて転職活動をしました。 転職活動を始めたばかりの頃は、結構気楽なもので、働かない日々を楽しんでいました。 不思議なもので、1ヶ月くらい働かないと、働かなきゃ！みたいな気持ちがふつふつと沸いてきて… 日本人的な感覚なんでしょうかねｗ いざ本格的に転職活動を始めると、決まるかどうかという不安にかられ、転職先が決まってからは会社に慣れるまで精神的な焦りや戸惑いはありました。 「転職とか忙しいから更新しなくてもいいや」って。 それを理由に自分を甘やかしてたんです。 いくら忙しかったとしても、1ヶ月に1回くらいは更新できるよね？って自問して自答できませんでした。 一応記事のネタを考えることもありました。 でも、記事のネタを考えて、途中までまとめて、「また今度やろう」って別のネタ探したりして、結局いつまで経っても更新はしないままただ月日だけが過ぎる。 変に「いい記事を書こう」って意気込むだけじゃなく、適度に肩の力抜いて記事を書いていけたらいいかな。 これからは、技術的なネタだけじゃなく、気に入ったサイトを紹介するだけの記事も書いていこうかなと思っています。 http://www.understandard.net/diary/diary002.html IE7に付いたズーム機能を使って拡大・縮小したときにbodyに指定した背景画像が拡大・縮小されず、理由が分からず困ったことがありました。 「原因はhaslayoutの値がfalseになっているから」 隣にいた同僚にそう教えてもらってなんとかズーム機能に対応はできましたが、今後同様の事例が出た時に困らないようにメモ。 でhasLayoutって何？ hasLayout は IE 独自のプロパティで、各要素がレイアウト情報を持っているかどうかを示すもののようです。 上に書いた背景画像の拡大・縮小時のバグはhasLayoutプロパティの値がfalseになっている場合に起こるそうです。 その他のバグの情報はMicrosoftのInternet Explorer 7 におけるズーム機能の問題で紹介されてます。 ここで回避策として ZOOM 機能を無効化するという方法が書かれていますが、本末転倒というか全く意味ないですｗ とにかく、haslayoutの値がfalseになってるからバグるなら、値ををtrueにすればバグらないはず。 cssで下の表に示すプロパティを指定すればhaslayoutに伴うバグを回避できます（参考：MSDN hasLayout Property (A, ABBR, ACRONYM, ...)）。 プロパティ 値 display inline-block float left もしくは right height any value position absolute width auto以外の値 writing-mode tb-rl zoom any value これを使って一番てっとり早くバグを解消するには、 *{   zoom:1; } を指定すること。 これを指定するだけで、拡大・縮小時のバグが解消されてハッピー！となれば良かったんですが、そうはいかないのがさすがIE…。 *{zoom:1;}の落とし穴 全称セレクタを使ってhaslayoutの値をtrueにしたら、今まで発生しなかったバグが発生してしまいました…。 記事を書いていたら、olのリスト番号が表示されない！ zoom:1を指定するまではちゃんと表示されていたので、原因は間違いなくこれ。 それで調べてみたら、hasLayoutプロパティがtrueで発生するバグ - Webtech Walkerで解説されていました。 サンプルページもあり、非常にわかりやすかったです。 前の記事で全称セレクタについて書きましたが、全称セレクタを使うってことは二次災害的なデメリットが生まれるし、良くないんだなと改めて痛感しました。 そこで全称セレクタではなく、バグる要素にだけzoom:1を指定することでひとまず解決しました。 IE８からhaslayoutはなくなるらしいですが、ブラウザの移行がすんなり進むとも考えにくいので、これからもしばらくはhaslayoutに頭を悩ませることになりそうですね。 http://www.understandard.net/css/css005.html ブラウザ間での見た目の差異をできるだけなくすために、各ブラウザで設定されているデフォルトのスタイルを全部リセットしてしまうという方法があります。 *{ margin:0; padding:0; border:0; } この指定は単純でとても便利だったのですが、Emotinal Webさんの*{ margin : 0 }はもう古い！？ - Emotional Webという記事にあるように最近はあまり使われない方向になっているようです。 なぜ全称セレクタは使われなくなったのか？ Emotonal Webさんの記事でも書かれていますが、全称セレクタを使ってデフォルトスタイルをリセットすると、フォーム関連のスタイルも全てリセットされてしまい、元々ブラウザが持っている優れたスタイルもリセットされてしまということなります。 <input>はデフォルトのもので充分ちゃんとしたスタイルになっています。 これらのスタイルもリセットされてしまうことになりますし、その他の箇所で予期しない表示になったりするかもしれません。 <input>の場合では、ボタンに画像を使ったり個別に指定する場合はいいとしても、デフォルトでいいと思っていたらいちいち指定しなきゃいけないというのは面倒な感じもします。 ではどうリセットするのがいいんだろう？ 最近では全称セレクタの代わりに必要な要素にだけリセットをかけるという手法が主流なようです。 ちなみにこのサイトも全称セレクタではなく、必要だと思われるものをリセットしています（実際必要ないものも入ってるかもしれませんが…）。 img, a img, ul, ul li, dl, dt, dd, h1, h2, h3, h4, h5, h6, div, span,label, input, textarea{ border:0; margin:0; padding:0; list-style:none; } 直前に書いた<input>もリセットしてるのはご愛敬ｗ 有名どころで言うと、Emotonal Webさんの記事にも書かれているYahoo! UI Library: Reset CSSでしょうかね。 これでは下のようにリセットしています。 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6, pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0; } table{ border-collapse:collapse; border-spacing:0; } fieldset,img{ border:0; } address,caption,cite,code,dfn,em,strong,th,var{ ... http://www.understandard.net/css/css004.html Dreamweaverの機能の１つとして、コードヒントいうものがあります。 これはコードの編集画面で「<」を打ったら、次に続くタグの候補を出してくれるもの。 タグを全部打つ必要がなくなるので、メモ帳などのソフトに比べ格段に作業スピードが上がります。 ただ、デフォルトの設定じゃ物足りない こんなこと書いたら怒られるかもしれませんが、今まで1回も使ったことないようなセレクタやプロパティが出てきても意味ないので、使わないものは表示して欲しくないんです。 この機能の設定を変更するのが、「CodeHints.xml」。 プログラムファイルからDreamweaverがあるディレクトリにいくと、/Configuration/CodeHintsというディレクトリがあり、その中にCodeHints.xmlがあります。 参考にさせてもらったのは、widowsプロパティの誤入力を防ぐCodeHints.xml｜カラクリエイト。 記事の中にある「windows」プロパティもさることながら、僕としては「direction」や「inherit」もイライラさせられるものです。 そういったイライラから解放してくれて、作業スピードをより早くするためのすばらしい改造です！感謝！ カラクリエイトさんの記事のコメント欄でakiraさんという方が、CodeHints.xmlをさらに改造してました。 この方は、cssの編集中に半角スペースを入れると「!important」が、数値を入れたときには「px」、「em」、「%」が候補に出るようにしてあるそうです。 自分の好みの形に改造するのは結構大変な作業ですが、思った以上に作業効率が上がるので間違いなくお勧めです！ ただ、「うっかり」に備えて、オリジナルのバックアップはとっておきましょう。 さらにスピードアップするには コードヒントをカスタマイズすることで作業スピードは結構速くなると思います。 それでももっと作業スピードを速くしたいときに活用したいのが、スニペットとショートカットキーの登録。 元同僚の方に教えてもらうまで、スニペットがある必要性を全く感じていませんでしたが、1回使うとすごく便利！ 例えば、clearfixみたいにいちいち全部覚えていられないようなものを、新規スニペットの追加からスニペットに登録します。 :after{ height:0; visibility:hidden; content:"."; display:block; clear:both; } 次に登録したコードを右クリックして「キーボードショートカットの編集」を選ぶと、ショートカットキーを登録できます。 あとは実際にclearfixを使いたい場所で割り当てたショートカットを押せば、clearfixが挿入されるわけです。 僕が登録しているショートカットは、「clearfix」と「span」の２つくらいです。spanが何気に便利だったりします。 ちなみに、clearfixには「Ctrl+Shift+F」、spanには「Ctrl+Shift+Alt+S」をショートカットとして割り当ててます。 他にも効率をあげる方法があれば教えてください！ http://www.understandard.net/tool/tool001.html 前回（透過PNGを使う時に注意すること）の続き。 どうしても透過PNGを使いたい場合、IE6でもちゃんと表示させるには、 AlphaImageLoaderを使う javascriptを使う ことになると思います。 AlphaImageLoaderを使う場合 AmentiさんのIEと透過PNGという記事にまとめられていて、読むのは大変ですがとても勉強になります。 この中に「標準準拠モードだと効かない」というように書いてあります。 IE6でも標準準拠モードになるように作っている人は要注意の箇所ですね。 AlphaImageLoaderは外部のスクリプトを使わず一番手軽に利用できるIE6の透過PNG対策だと思います。 javascriptを使う場合 かなりアバウトな表現になっているのは、同じことをするにも様々なスクリプトがあるから。 その中でも、透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる - DesignWalkerで紹介されている、「iepngfix.js」は結構使いやすいスクリプトなんじゃないかと思います。 これを使うときは、iepngfix.jsを読み込み、cssで該当箇所（仮にクラスhoge）に以下のように指定する。 * html .hoge{ behavior:expression(IEPNGFIX.fix(this)); } 指定するのはこれだけ。 あとは、このjavascriptを適用するのはIE6以下なので、html内でそれらのブラウザにだけ読ませる。 これをやらなくても「* html」がついてるので、どっちにしろIE7以上では効かないです。 <!--[if lt IE7]> <script type="text/javascript" src="iepngfix.js"></script> <![endif]--> IE以外のブラウザにはこの対処法は効かないので、[if lt IE7]の部分を[if IE]に変えて、「IEなら」という条件にしてもいいかも知れません。 他に「IE7.js」というライブラリがあります。 これを読み込んでおき、透過PNGに名前をつける時に「XX-trans.png」（XXは任意）という形式にします。 そうすると、backgroundプロパティでこのPNG画像を指定した際に透過されて表示されるというもの。 このライブラリは透過PNGのためだけのライブラリではなく、これを読み込むと、IE6以下でもIE7と同じようなレンダリングをしてくれるという機能まであります。例えばIE6以下で、 a以外の要素に:hoverなどの疑似クラスが使えるようになる position:fixedが使えるようになる というものです。 ただ注意しなければならないのは、既存のサイトにIE7.jsを読み込むと、IE6用に指定していたcssハックが影響して表示にズレが生じてしまいます。気をつけましょう。 それと、IE7.jsについてもう１つ。 サーバー環境にもよるかもしれないんですが、結構重かった記憶が・・・。 一回あるサイトのリニューアルの際に使おうとしたけど、あまりに遅くて導入を諦めたことがあったので、使ってみたい方は一度チェックしてみたほうがいいと思います。 軽かったらぜひ使いたいライブラリです。今後のバージョンアップに期待してます。 2008年7月9日追記 記事を更新した直後に発見してしまったので、追記します。 [JS]超軽量で設置も簡単な、透過PNGをIE6で表示するスクリプト -Unit PNG Fix 実際に使ったことが無いし、容量が軽いから動作が軽いとも限らないのでなんとも言えませんが、javascriptファイルだけなら1KBありません。ここまでファイルが小さいのは今までになかったんじゃないでしょうか？ ダウンロードしたら、Zipファイルを解凍し、unitpngfix.jsの1行目にある、clear.gifのパスを自分のサーバーのものにする。 画像のパスを変更したら、htmlからunitpngfix.jsを読み込む。 これだけでいいようです。 注意：imgタグにwidthとheightの値を入れておかないと画像が見えなくなってしまうようなので、それだけは気をつけてくれということです。 使ってみた方がいたら感想を教えてもらいたいですね。 http://www.understandard.net/css/css003.html 透過PNGが透過GIFより優れていることはいろいろあると思いますが、僕が一番優れていると思うのは、背景がどんな状態でもキレイに透過してくれることです。 透過GIFをグラデーションのかかった部分に乗せるとどうしても汚い部分ができてしまいます。しかし透過PNGだとそういうことが無いので、今後透過GIFよりも使われることが多くなっていくと思います。 僕個人としてはどんどん使っていきたいものなのですが、透過PNGを使う際には気をつけなきゃいけないこともあると思います。 具体的には、 本当に透過PNGを使わなきゃいけないのか？ ターゲットブラウザをどこまでの範囲にするのか？ IE6など、対応していないブラウザに対してどういう処理をするのか？ ということ。 他にもいろんな考えがあるかもしれませんが、このような問題をクリアしないとなかなか使いにくい状態に陥ると思います。 まず１の問題。 「透過PNGを使う時に～」というタイトルを根本から否定することにもなりますが、実は一番大事なことだと思っています。 使わないでも同じデザイン・機能を表現できるなら透過PNGを使わないほうが確実に安全なサイト作りができると思いますｗ しかも使わなくても何とかなる場合が結構あると思います。 以前作成したサイトに透過PNGを使ったのですが、対応ブラウザの件（後述）で余計な手間がかかってしまうことも含め、透過PNGを使う必要はなかったと思ってます…。 次に２の問題。 すべてのユーザーがブラウザを最新にしているならまだしも、未だにIE6もしくはそれ以下のブラウザを使っている人も結構います。 そういった人達もターゲットにしたいサイトならば、透過PNGを使わない、もしくはjavascriptを使って透過しているように見せるなどの対処が必要になります。 この場合なら使わないのが最善策な気がします。 最後に３の問題。 ２の問題があったとしても透過PNGを使うことを諦められない！という場合には、IE6など古いブラウザでもちゃんと見れるようにしないといけません。 具体的な対応策としては、 AlphaImageLoaderを使う javascriptを使う というもの。 ここらへんが一般的なんじゃないかと思います。 長くなったので、次回に続きます。 http://www.understandard.net/css/css002.html 投稿記事一覧をquery_posts()を使って出力して、1ページに10投稿ずつ表示していく場合、単純に1ページあたりの投稿表示数を指定すれば大丈夫だと思ってた。 <?php query_posts(posts_per_page=10); ?> <?php if(have_post()) : while (have_posts()) : the_post(); ?> 1ページ目を見たときには全く気づかなかったが、2ページ目を見てみると1ページ目と同じリストが表示されてる…。 どれだけページを進めても実際取得しているのは先頭の10件だけ。 posts_per_pageとかshowpostsとかパラメータの値を変えたり、パラメータ自体を変えたりしてみたが一向に上手くいかない。 調べてみると、フォーラムで同じ質問している人がいました。 それによると、query_posts()は現在ページの指定がないと2ページ目だろうがなんだろうが1ページ目を読み込んでしまうようで、これはquery_posts()だけではどうしようもない様子…。 それでもこの問題が簡単に解決する方法が解説してあったので、早速試してみました。 そこに書いてあった解決法は、以下の通り <?php $paged = get_query_var('paged'); ?> <?php query_posts("posts_per_page=10&paged=$paged"); ?> <?php if(have_post()) : while (have_posts()) : the_post(); ?> query_posts()の前で、現在のページ数を指定するpagedの値を取得して、その値をquery_postsの毎回入れていくってことなのかな？ おかげさまで悩んでたquery_posts()のワナから抜け出し、スッキリしたのでした。 http://www.understandard.net/wordpress/wp004.html WordPressでトップページとかアーカイブページで投稿タイトルを一部表示させるときに、表示させる関数で一般的なのはthe_content()かthe_excerpt()になるかと思います。 the_content()とthe_excerpt()の大きな（僕が気付いている）違いは、抜粋表示のしかた。 前者は投稿作成画面で自由に設定できるのに対し、後者は先頭から何文字目までと自動で表示される。 また、後者は本文中のリンクなどは無視され、文字列だけ表示されるのも大きな違い。 そしてさらにもう１つ気になるのは、「続きを読む」を押したときの両者の挙動の違い。 the_content()を使って「続きを読む」リンクを作ったとき、投稿のページを見ようとリンクを押すと、表示されるのは続きの部分から。 一覧ページ等で本文の先頭を読んでいる場合は、同じ文章を見なくてすむし、無駄なスクロールをしなくていいから、これはこれで便利な機能だけど、続きから表示されてしまうと一瞬迷子になった気分になってしまう。 タイトルだけ見てリンクをクリックしたときは特にそう思う。 これがイヤでthe_content()は使わないようにしたんですが、lessというプラグインを使えばthe_contentを使っても、投稿の先頭から表示してくれるようになります。 使いかたは以下の通り 作者のページからプラグインをダウンロード プラグインフォルダにアップロード 管理画面からプラグインを有効化する これだけで投稿の先頭から表示されるようになります。 http://www.understandard.net/wordpress/wp003.html リストマーカーを好きなものに変えたいときは、<li>に下のように背景画像を指定してあげればいい。 li{ background:url(image-path) left center no-repeat; } <li>が1行の時には全然問題ないけど、<li>が2行になったときに2行になったリストの真ん中にリストマーカーが表示されてしまうのがすごくイヤなんです…。 リストマーカーは1行目の先頭についていて欲しい！ で、これを実現するためにはどうしましょ？を解決するために、背景画像の上からの位置をpx単位で決めちゃえばいい。 上から4pxがちょうどいい位置だと仮定すると、 li{ background:url(image-path) left 4px no-repeat; } でオッケー！と思いきや、この指定の仕方だとNetScape7で表示がおかしくなるようで…。 leftと指定している部分を0pxに変更すればこのバグは回避できるそうです。 px指定じゃなくて、0%なんかでも大丈夫みたいです。 例えば、 li{ background:url(image-path) 0% 4px no-repeat; } なんていう指定でもバグは出ない。要は、leftなどの指定と数値の指定を組み合わせると出現するバグのようです。 ネスケ７のシェア自体は大したことないかもしれないけど、この方式で指定してデザインに問題が出ないようならちゃんと指定しておきたいなと思います。 http://www.understandard.net/css/css001.html WordPressで１日のうちに複数の記事を投稿したら、２つ目以降の記事の日付が表示されなかったんです。 なんで？？同じ関数使ってるのに２つ目の日付はどこに行ったの？？ 同じ状態にはまったことがある方はすぐピンときたと思います。 そう、the_dateを使って日付を表示させていたんです。 最初にいじり始めたテーマに使われてたのがこの関数だったので、「日付表示するのはコレ」って、なんの疑いもなく使ってました。 なんで表示がおかしいのかなと思って、Codexで調べてみたら、the_dateの説明にバッチリ書いてありました…。 要はthe_dateを使わないで、代わりにthe_timeを使えばこの問題は解決するみたい。 同じ日の投稿にいちいち日付を付けなくていい人、デザインの人はthe_dateを使って、それぞれ個別に日付を付けたい人、デザインの人はthe_timeを使って日付を表示させればいいってことになるのかな？ 関数が２つあって好きなほうを選べるのはいいことだけど、両方知ってないと「バグった！！」ってものすごく焦ったりしちゃいますね(^_^;) ちなみに表示させられる項目は、PHP: date - manualに載ってるものです。 見てみるといろいろな項目があってビックリしますｗ 年間の通算日ってどんな状況で使うんですかね？ あ、３６５からこの数引いたらカウントダウンとかできるのかも。 http://www.understandard.net/wordpress/wp002.html