IE7のcssでの画像置換がおかしい

まあ、いまさらIE7?とか言われそうですが、アクセスログを取得している限りまだまだ捨て切れません。(さすがにIE6は切り捨てましたが・・・)

で、よくあるcssでの画像置換に関してなのですが、IE7で妙な挙動をします。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>inline-block test</title>
<style type="text/css">
	div#design ul {
		display:block;
		width:550px;
	}

	div#design ul.ie7out li {
		display:inline-block;
		width:146px;
		height:80px;
		/display:inline;
		/zoom:1;
		text-indent:-9999px;
	}

	div#design ul.ie7ok li {
		display:inline-block;
		width:146px;
		height:80px;
		/display:inline;
		/zoom:1;
	}

	div#design ul.ie7ok li span {
		display:none;
	}

	div#design ul li.a {
		background:url(circle_banner_01.gif) no-repeat;
	}

	div#design ul li.b {
		background:url(circle_banner_02.gif) no-repeat;
	}

	div#design ul li.c {
		background:url(circle_banner_03.gif) no-repeat;
	}
</style>
</head>
<body>
<div id="design">
<p>IE7で消える?</p>
<ul class="ie7out">
	<li class="a">A</li>
	<li class="b">B</li>
	<li class="c">C</li>
</ul>

<p>IE7でも消えない?</p>
<ul class="ie7ok">
	<li class="a"><span>A</span></li>
	<li class="b"><span>B</span></li>
	<li class="c"><span>C</span></li>
</ul>

</div><!-- END div#design -->
</body>
</html>

こんなコードで試してみました。

display:inline-block;を利用して横に画像を並べるコードですが、IE7では対応していないため良くあるハックを使用しています。

/display:inline;
/zoom:1;

この状態でtext-indent:-9999px;として文字を飛ばすとIE7の場合だけ画像ごと飛んでいってしまいます。display:inline-block;を利用していますので、display:none;と言うわけにもいきません。

そこで面倒ですがliタグの中にさらにspanタグを入れて、そのspanタグを文字ごと飛ばす方法で対応してみました。環境のある方は上記コードでIE7とFirefoxなどのメジャーブラウザで確認してみてください。メジャーブラウザでは両方とも画像が表示されます。

カテゴリー: CSS | タグ: , | コメントをどうぞ

WordPress 3.0が登場

WordPress 3.0がダウンロード可能になりました。今日(2010.06.21)現在、日本語版はまだ翻訳中のようです。

公式ブログ( http://ja.wordpress.org/2010/06/18/thelonious/ )に動画がありましたので、紹介してみます。

カテゴリー: wordpress | コメントをどうぞ

WordCamp Yokohama2010 顛末記

いや~、終わってしまいました。WordCamp Yokohama2010。
初のスタッフ参加で、いろいろと普段できないような経験と、勉強をさせてもらいました。

実は、ずっと受付に張り付いていたので、スピーカーさんの講演をまったく聞いていませんorz

受付兼総合案内はこんな感じw
いったい何者だ?というのはおいといて。なんとなく楽しそうでしょ。

当日の写真はたくさんあるけれど、レビューも面白い記事もすでにたくさんあるのでw
裏方しか分からないことをレビューとかしてみる。

なんでしょ、これ。
上の受付写真にも写ってますね、そう、スタッフTシャツです。
思った以上に人気が高く、「売ってませんか?」と何回か聞かれました。(残念ながら売ってません・・・)

スタッフのさとたかさんが技術を提供してくれたため、外注に出さずになんと手作りです!
最初の工程は特殊なインクでロゴマークをTシャツにプリントします。
このインク、熱処理しないと固まらないというインクだそうで、手についてしまうと大変です。

プリントしたTシャツをインクに触らないように気をつけながら運びます。ちなみにこの運ぶ作業がわ・た・し。
一番簡単な作業を担当してます(すみません、すみません)

運んだTシャツを念入りに3分ほどドライヤーで乾燥させます。でも、この段階ではまだインクは完全に乾きません。
一番時間のかかる根気のいる作業です。おつかれさま。

次に片面に樹脂のついた特殊なシートをずらさないように気をつけながらアイロンがけしていきます。
きっと普段アイロンがけなんてしないだろう(すみませんAtsushiさんの私生活はしりません・・・)男が丁寧にアイロンをかけていきます。

この樹脂とアイロンの熱でインクがTシャツに定着するようです。本格的ですね~

ちゃんとたたんで袋に詰めて完成です。
ねえ、まるで買ってきたみたいでしょ?50着くらいを1日で仕上げました。ごくろうさま~
なんでもマクラケン直子さんがどこぞのコレクターに送ってくれるそうで、壁一面のWordCamp TシャツにYokohama2010のTシャツも仲間入りするそうですぞ。って、どこに送るんだろ、教えてエロいひと!
海外なので見にはいけませんが、飾った写真とか見れるのかなぁ?そのあたりなおさんヨロシク!

で、最後は「このケーキ、クオリティ、っぱねぇ!」と言わしめたWordPress7周年birthdayケーキ。
なんだかサプライズはケーキというのが定番化しつつある?

そしてまたも黒歴史は刻まれた・・・

裏方、楽しいですよ!次回は名古屋との話も。(いや、名古屋のスタッフは無理っすけど)参加はしたいっすね~
いっつもお世話になっているkzさん、スタッフメンバーのようで。がんばってください!(バトンないけど)

カテゴリー: wordpress | タグ: | 8件のコメント

WordCamp Yokohama 2010 サイト正式公開

2010/4/24 WordCamp Yokohama 2010 のサイトが正式公開されました!

同時に参加登録も始まっています。

どうですか?オリジナルサイトデザインで、今回は「横浜らしく」で「つながる」のテーマにあわせたデザインです。

大学の学生さん考案デザインのロゴ原案を元に横浜らしいデザインで制作されています。

みなさま是非ご参加ください~

カテゴリー: wordpress | コメントをどうぞ

WordCamp Yokohama 2010 のロゴが発表されました!

いよいよ本格的に動いている証拠ですね!今回は私も微力ながら裏方やってます。

http://japan.wordcamp.org/2010/04/08/yokohama-2010-logo/

カテゴリー: wordpress | コメントをどうぞ

cronの考察

フォーラムのために調査しました。

プラグインの設定の削除方法

続きを読む

カテゴリー: SQL, wordpress | コメントをどうぞ

あけましておめでとうございます!

謹賀新年

あけましておめでとうございます。
今年もよろしくお願いいたします。

wordpressもいよいよ3.0でMU統合などの情報もあります。今年もまた検証に明け暮れることになるのでしょうか。しかし、日々成長してゆくwordpressの世界がとてもすばらしく、目が離せませんね!

カテゴリー: 未分類 | コメントをどうぞ

Nonce! Pleaseが超強力!

Ktai Styleでも有名なYuriko.NetさんのNonce! Pleaseを導入してみました。
結果ですが、Akismetで受けていたスパムがここ数日0です!
まさかこんなに強力だったとは思いませんでした。
しかもプラグインディレクトリーに登録されているのでwordpress上から直接ダウンロード・インストール可能で、有効にするだけの簡単設定;-)

まあ、スパムの世界も日々成長しているのでいたちごっこなのでしょうが、とてもすばらしいプラグインをありがとうございます!

カテゴリー: wordpress | タグ: , | コメントをどうぞ

Ktai Styleでカテゴリ一覧ページを構築

Ktai Styleでサイトを構成していて、要望があったので構築した際のメモ書き。

携帯サイトを構成した場合のfooterメニューにアーカイブやカテゴリーというリンクがある(defaultテーマの場合、今回の場合はdefaultテーマを利用した改造テーマ)。
このカテゴリーをクリックし、カテゴリー一覧から個別ページへ飛んだ際に、ページ下部に表示される次の記事へのリンクと前の記事へのリンクは全体の記事の前後リンクになる。
これを、カテゴリー一覧から飛んだときにはカテゴリーに絞り込んでの前後リンクにしてほしいと要望があった。

まあ前後リンクをカテゴリーに絞るのは難しくはない。が、single.phpで前後リンクをカテゴリーに絞ってしまうと、TOPページなどからカテゴリに関係なく飛んできた場合も、カテゴリ毎のリンクになってしまう。
まあ、だからカテゴリ一覧から飛んできた場合、カテゴリに絞ってシングルページを見ている場合にはカテゴリに絞ったリンクを表示するように分岐を設けただけなんだけど。

まず、最初の改造。(全てテーマのみの改造、コアは修正していない)
category.phpを作成して一覧リンクを生成する際に「?category=1」を挿入する。

<dl>
<?php for ($count = $ks_settings['ol_count']; have_posts() ; $count++) :
	the_post(); ?>
	<dt><?php
	$link = ks_ordered_link($count, $ks_settings['ol_max'], get_permalink(), get_the_title(), '%link', false, false);
	$pattern = "/(.*\.html)(.*)/i";
	echo preg_replace( $pattern, '$1?category=1$2', $link ) . ' '; ?> <img localsrc="46" alt="@ " /><font color="<?php echo ks_option('ks_date_color'); ?>"><?php ks_time(); ?></font></dt>
<?php endfor; ?>
</dl>

ソースのほとんどはdefaultのものなので一部のみ記述。
ks_ordered_linkをecho=falseして取得した後に「?category=1」を追加しているだけ。

次にsingle.phpを改造。
こちらは「?category=1」があることを確認して表示するリンクを分岐で分けているだけ。

if($_GET['category']) {
	$category = htmlspecialchars($_GET['category']);
}

ページの先頭でとりあえずGETしておく。

if( $category ) {
	$previous_post = ks_previous_post_link(array('format' => '<div align="left"><img localsrc="7" alt="« ">*.%link</div>', 'in_same_cat' => true, 'echo' => false));
	$next_post = ks_next_post_link(array('format' => '<div align="right">#.%link<img localsrc="8" alt=" »"></div>', 'in_same_cat' => true, 'echo' => false));
	$pattern = "/(.*\.html)(.*)/i";
	echo preg_replace( $pattern, '$1?category=1$2', $previous_post );
	echo preg_replace( $pattern, '$1?category=1$2', $next_post );
} else {
	ks_previous_post_link('<div align="left"><img localsrc="7" alt="« ">*.%link</div>');
	ks_next_post_link('<div align="right">#.%link<img localsrc="8" alt=" »"></div>');
}

やっていることはほぼ一緒。$categoryを調べてカテゴリーを絞る必要がある場合はks_previous_post_linkでin_same_catをtrue、echoをfalseにしてカテゴリに絞られたリンクを生成し一時取得。前後リンクに同じく「?category=1」を付加することで次のページに飛んでも絞込みを有効にしている。
それ以外の場合は普通に表示した。

Ktai Styleのコードを使用して行っているが、PC版でもコードも使用方法もほぼ一緒なので、同じことは簡単にできそう。

カテゴリー: PHP, wordpress | タグ: , , | コメントをどうぞ

home.phpとindex.php

前回、既存のURLを維持するため、wordpress1つでさまざまな方法をとっていることを紹介したが、この時点ではサイトトップを表示するのにhome.phpを使用していた。

しかし、固定ページ+ブログを構築する際、困ったことが起こった。

表示設定で固定ページを選択し、サイトトップにページで作ったindexを指定、indexにはページテンプレートの記述をいれたhome.phpを指定してある。次にブログページにはURLを維持するため空で作ったblogページを親とするindexを指定。このindexにはブログ用のテンプレートを割り当てるか、自動でindex.phpが割り当てられる。と、考えていた。

しかし、現実にはどちらのページにもhome.phpが適用されてしまった。

サイトトップに自動でhome.phpが割り当てられるのは分かっていた。日本語Codexにもそう書かれてある。しかし、ブログトップにもhome.php->index.phpの順で割り当てられるとは思わなかった。しかも指定したページテンプレートは見事に無視される。
home.phpはループなしでがっつり作りこんでいるのでブログとしては役に立たない。これは困った。

そこで、home.phpを使用するのをやめた。サイトトップのindexには今まで作っていたhome.phpをリネームしてページテンプレートとして割り当てて、ブログトップにはブログ用に作成したページテンプレートを割り当てた。
すると、サイトトップには割り当てたページテンプレートが適用される。が、ブログトップはindex.phpが適用された。どうやら固定ページを指定した場合のブログトップに指定したページにはページテンプレートを適用できないようだ。もちろんhome.phpは削除している。

まあ、これでサイトトップとブログトップが無事表示できたわけなのでOKなのだが。
固定ページをサイトトップとして使いたい場合のhome.phpの使用には十分注意してもらいたい。

カテゴリー: wordpress | タグ: , , , | 7件のコメント