技術メモ カテゴリー

web系技術メモ

固定幅+中央寄せサイト が多い

私に回ってくるコーディングのお仕事の場合、ほとんどがサイトwidth固定デザインです。なお幅固定の是非は今回は論じません。昔は「左寄せ」+幅固定なんてのも珍しくなかったのですが、近頃ははめっきりセンタリングです。

背景がずれる

偶数のモノを中央に寄せると言うことは、厳密には「左右いずれかに1ドットずれる」と言うことです。
出来れば規格でその左右が決まっていればよいのですが、まぁ、ブラウザ毎に異なっても仕方ありません。しかし、仕方なくない事も(ノ∀`)
IEやFireFoxは、フォアグラウンドとバックグラウンドで、ズレ方が違うんですよねぇ……
SafariやOperaは手前と奥のズレ方に差違はありませんので、例え左右どちらにずれていようともズレを感じませんが、IEやFFはウィンドウサイズによって「背景が1ドットずれたりずれなかったり」と不安定なのです。

奇数幅の背景でカバー

偶数幅だからずれる訳です。ええ、奇数幅の背景画像にしましょう。IEは1ドットのマージンを「に」入れると揃います。
FFは1ドットのマージンを「に」入れると揃います。
OperaやSafari等、本来ずれないブラウザは左右何れかにマージンを入れると当然ずれてしまいます。
ええ、場合分けが必要なんですね。

CSSハックで

このためだけにサーバサイドスクリプトやJavaScriptで分岐させるのは負けた気がします。
CSSハックは大嫌い(笑)なのですが、意味合いの重みと手段を釣り合わせる意味では、やはりCSSハックが現実的でしょうか。
と言う訳で、落ち着いたコードが以下。

body {
	background : url(../images/bg.gif) repeat-y center 0;
	_background: url(../images/bg-mr.gif) repeat-y center 0;	/* for IE6 */
	*background: url(../images/bg-mr.gif) repeat-y center 0;	/* for IE7 */
}
html>/**/body,x:-moz-any-link { /* for firefox */
	background : url(../images/bg-ml.gif) repeat-y center 0;
}

FireFoxのみに適応させるノウハウは、抜群にエレガントなFirefox 1.0, 1.5, 3.0 用の CSS ハックを頂きました。

追記

画像幅が偶数だろうときすうだろうと、ブラウザ幅と違うと、余分マージンが発生しますね(・ω・)俺馬鹿じゃん。
と言うことで、後々深く突っ込んでみようと思います。

Comments (1)

先日lightboxをいじっていた際に、IE 6および7で不可解な挙動があったのでメモ。
画像を差し替えると、表示上は新しい画像が表示されるのに、JavaScriptのnew Image()で取得したwidth heightは古い画像の数値になってしまう現象に遭遇。

具体的には、jQuery Lightbox 0.5 に於いて拡大画像を差し替えると、width heightが正しく取得されず歪んでしまう事がありました。IEのキャッシュをクリアしても駄目。放置していたらいつの間にか直っていたので、ブラウザの画像キャッシュ以外にどこかでキャッシュしてしまっている可能性?

偶々うちの2台が特殊だった!?可能性もありますが、一応メモ。

コメントは受け付けていません。

一旦ローカルで動作チェックし、そのまま当てました。アッサリ動作。
ただしMy Category Orderは管理画面内のタブを一旦選択する必要があります。ポチッと押すだけですが。「taxonomy.phpを書き換える必要がなくなった」と言うよりは「自動で書き換えてくれるようになった」のが正確でしょうか。

コメントは受け付けていません。

My Category Orderのバージョンが上がっていました。遂にコアファイル(taxonomy.php )を書き換えなくてもよい仕様に。
やっぱり、コアファイルを変えなくてよいのは楽でうれしいです(ノ∀`)

コメントは受け付けていません。

細かいバグがあった2.6がFIXされ2.6.1に。
早速ファイルを上書きして管理画面の案内に従いデータベースを更新。
JustList – 指定記事を含むリストを表示するプラグインも無変更で問題なく動作。
My Category Orderは前回同様taxonomy.phpの612行目のif文を以下に差し替えてお茶濁し。

	if ( 'count' == $orderby )
		$orderby = 'tt.count';
	else if ( 'name' == $orderby )
		$orderby = 't.name';
	else if ( 'slug' == $orderby )
		$orderby = 't.slug';
	else if ( 'term_group' == $orderby )
		$orderby = 't.term_group';
	else if ( 'order' == $orderby )   
		$orderby = 't.term_order';
	else
		$orderby = 't.term_id';

諸々、つつがなく稼働中です。

Comments (1)

ブログ革命(プチ)2のものを、プラグイン化できましたヽ(・∀・)ノ よくやった俺

JustListと命名

JustListプラグインを使用することで、WordPressに「指定記事を含む各種リストのページへ飛べる」機能を追加できます。例えば、検索エンジン等から単体記事に辿り着いたとします。前後の記事も見たくなりますよね?しかし、標準機能では前後1記事ずつしか辿れません。「リスト」には飛べないのです。

ソース

これでコアファイルを書き換える必要がなくなったぞ(*゚∀゚)=3
wordpress2.6でしか確認しておりませんが、多分2.5.1でも動くと思います。
※追記2.6.1も無変更で動きました

<?php
/*
Plugin Name: JustList
Plugin URI: http://www.denkasi.com/blog/
Feed URI: http://www.denkasi.com/blog/
Description: 指定記事を含むリストを表示します。
Version: 0.0
Author: toaruR
Author URI: http://www.denkasi.com/blog/
*/

$pagewith_where;
$pagewith_join;

function pagewith_posts_where_request($where) {
	global $pagewith_where;
	$pagewith_where = $where;
	return $where;
}
function pagewith_posts_join_request($join) {
	global $pagewith_join;
	$pagewith_join = $join;
	return $join;
}

function pagewith_post_limits_request($limits) {
	global $wpdb,$paged,$pagewith_where,$pagewith_join;
	if (!$_GET['paged']) {
		$pagewith = ereg_replace('[^0-9]+','',$_GET['pagewith']); //ごみを取る
		if ($pagewith) {
			$pagewithby = "AND wp_posts.ID>$pagewith";
			$postCounter = (int) $wpd-->get_var("SELECT COUNT(*) FROM $wpdb-&gt;posts $pagewith_join WHERE 1=1 $pagewith_where $pagewithby");
			//$paged $limit作り直し
			$posts_per_page = get_option('posts_per_page');
			$paged = floor( $postCounter / $posts_per_page ) + 1;
			$pgstrt = ($paged -1) * $posts_per_page;
			set_query_var('paged',$paged);
			$limits = 'LIMIT '.$pgstrt.','.$posts_per_page;
		}
	}
	return $limits;
}

add_action('posts_where_request','pagewith_posts_where_request');
add_action('posts_join_request','pagewith_posts_join_request');
add_action('post_limits_request','pagewith_post_limits_request');

/* pagewith リンクの調整 */
function pagewith_remove_pagenum_link($result) {
	$result = preg_replace('/(\?|\&amp;)pagewith=\d*/','',$result);
	$result = str_replace('/&amp;','/?',$result);
	return $result;
}

add_action('get_pagenum_link','pagewith_remove_pagenum_link');

?>

課題

まだ、そのリストへのリンクを楽に取得できるタグを作っておりません。
従って、実装はスキン(たとえば single.php)に
<?php bloginfo(‘url’); ?>/?pagewith=<?php the_ID(); ?>#post-<?php the_ID(); ?>”>[全体]</a>
等と記述せねばなりません。
また、URLが orderby=rand 等の引数を持つ場合は無効となります。

使用例

今回の拡張で、リストURLに「pagewith=ポストID」を付加することで、ポストIDの記事を含むページが自動的に選択されます。
たとえば、本ブログの87番記事の場合。(なお、この記事への通常のリンクは http://www.denkasi.com/blog/?p=87 です。)

全時系列リストの87番記事を含むページへは

http://www.denkasi.com/blog/?pagewith=87#post-87
との記述になり、(本記事を書いている現在は)8ページ目へ飛びます。

同カテゴリリストの87番記事を含むページへは

http://www.denkasi.com/blog/?cat=20&pagewith=87#post-87
との記述になり、4ページ目へ飛びます。

2008年5月のアーカイブリストの87番記事を含むページへは

http://www.denkasi.com/blog/?m=200805&pagewith=87#post-87
との記述になり、2ページ目へ飛びます。

語句’IE’で検索した結果リストの87番記事を含むページへは

http://www.denkasi.com/blog/?s=IE&pagewith=87#post-87
との記述になり、2ページ目へ飛びます。

実装はテーマ(スキン)次第となりますが、87番記事単体ページに、色々付加することで、直感的なナビゲーションが構築できるはずです。

※Macだと(FireFox3、Safari3で確認)パーマリンクを設定している場合 #post-87 の部分がキャンセルされてしまうようです。

Comments (1)

2カラムにしてみました。
最大の変更点はカレンダー削除。
ブログにおけるカレンダーの意義は、

  1. 時系列アーカイブをたどるナビゲーション
  2. 更新有無の可視化
  3. 日々更新のちょっとした励み

こんな感じでしょうか。なんか大事な役割を忘れている気もしますが。
1に関しては記事からリストへ飛べるインターフェイスを導入したのでもはや不要です。2,3に関しては「カウンタ」のようなものを感じます。人様はほとんど気にしていない……みたいな。

本文エリアが広がり「コード」部もそこそこ読みやすくなりました(・∀・)

コメントは受け付けていません。

ページトップへ

Mac用CSS

[技術メモ] 2008年7月28日(月曜日) 21:23

Safari3がむしろ正常だったのか

Mac用css実装 の際は、「MacだとSafari3だけフォントが大きくなる」と理解していました。これは逆で、Safari3が正常だったのですね。
Winに比べてMacのFireFox2やSafari2あたりは、若干小さく表示されていました。それで「Macならちょっと拡大」をMac用cssのデフォルトにしていた為、Safari3のフォントサイズが大きくなってしまっていたのです。

FireFoxもいつの間にか追従

近頃3になったFireFoxも、Safari3と同じ表示サイズとなっていました(ノ∀`)
つまり、WinとMacのフォントサイズ差はいつの間にか(笑)ほとんど無くなっていたのです。

フォントサイズ補正はやめた

MacのFireFox2は切り捨てちゃいます(・∀・)場合分けとか面倒くさいですし。
ついでに私はIE5.5もとっくに切り捨てております。(セキュリティ的に更新終了になったブラウザを推奨すべきではないと考え。逃げてません、逃げてませんとも)

なにやら、Vistaの出来が良くないせいか、Macのシェアが上がっているとか……
Macチェックも、ケータイサイトよりはマシと割り切ります(ノ∀`)

コメントは受け付けていません。