トップ > 404 > 404 - 人気ブログ(Blog)検索結果詳細 (2008年12月1日 8時)

まずはダウンロード

Cygwinのサイトからsetup.exeをダウンロードする。

パッケージのダウンロード＆インストール

setup.exeを起動して好きなパッケージをインストールする。パスの関係上インストールディレクトリはドライブ直下(C:\cygwinやD:\cygwin)が良さげかしら。

ターミナルにrxvtを使ので、この段階でインストールしておく。

Cygwin起動前の設定

Cygwin(bash)を起動する前に以下の設定を行う。

ユーザー環境変数を追加

マイコンピュータのプロパティ -> 詳細設定タブ -> 環境変数 のユーザー環境変数の[新規]から以下の環境変数を追加。

ターミナルをrxvtに変更

CygwinをインストールしたディレクトリのCygwin.batをテキストエディタで開き、bash --login -iの部分を以下のように編集する。

@echo off

D:
chdir D:\cygwin\bin

rem 取り敢えずコメントアウト
rem bash --login -i

rem 追加
start rxvt ^
  -geometry 85x35+350+80 ^
  -bg Black ^
  -fg White ^
  -sr ^
  -fn "VL Gothic"-18 ^
  -fm "VL Gothic"-18 ^
  -km eucj ^
  -e bash --login -i

引数が改行されているのは可読性重視のため。^(キャレット)を削除して一行で書いても問題無い。

指定しているオプション(引数)については以下を参照。

今回指定していないその他のオプションについてはrxvt --helpで確認できる。

変更が完了したらCygwinを起動して色々作業する。

文字コードについて

作業内容などに合わせて変更する必要がある。

例えばWindowsで作業する場合はsjis(Shift_JIS)にしないとマルチバイト文字が文字化けする。

ちょっと不便なので何か対応策が無いか模索したいところ。取り敢えずはバッチファイルを各文字コード毎に作成して対応する。

ダウンロード

より簡単に使用できるように、ファイルをダウンロード出来るようにしました。

maybeURL.zip - v1.0

ソースコード

maybeURL.php

<?php
/**
 * もしかしてお探しのページは [URL] ではありませんか？
 *
 * @param  string $sitemap サイトマップファイル
 * @return string 最も近い実在URL
 */
function maybeURL($sitemap)
{
	// サイトマップ読み込み
	$data = file_get_contents($sitemap);

	// URLを抜き出す正規表現
	$pattern = '/<loc>http:\/\/[^\/]*(.*)<\/loc>/';
	// $urlList['1']にURLリストが入る
	preg_match_all($pattern, $data, $urlList);

	// 最短距離の初期値
	$shortest = -1;

	// 最も近い実在URLを探し始める
	foreach ($urlList['1'] as $val) {
		// リクエストURLとリストURLの距離を計算する
		$lev = levenshtein($_SERVER['REQUEST_URI'], $val);

		// 二つの距離が0(同一文字列)なら終了
		if ($lev === 0) {
			$existURL = $val;
			$shortest = 0;
			break;
		}
		// 二つの距離が最短距離よりも短いか、
		// 最短距離が初期値の場合、最短距離書き換え
		if ($lev <= $shortest || $shortest < 0) {
			$existURL = $val;
			$shortest = $lev;
		}
	}

	// 最も近い実在URL
	return $existURL;
}

必要な値がURLだけだったので、XMLとして評価せず、正規表現を使ってURLを取得しています。と言うかSimpleXmlElement遅すぎ。

URLを取得する正規表現で『http://ホスト名』の部分を除外しています。除外不要の場合は、$patternのhttp:\/\/[^\/]*を削除して下さい。

404.php

<?php
require_once 'maybeURL.php';
$url = maybeURL('./sitemap.xml');
?>
<!-- ヘッダー -->
<h1>404 指定されたページは存在しません</h1>
<h2>もしかして</h2>
<p>お探しのページは <a href="<?php echo $url; ?>"><?php echo $url; ?></a> ではありませんか？</p>
<!-- フッター -->

前のとほぼ同じです。

使用方法

1. 404.php を 404ページとして利用できるように設定する。
2. 404.phpのサイトマップやmaybeURL.phpのパスを編集する。
3. 後は表示部分を適当に編集すれば直ぐに使えます。

※サイトマップの指定はフルパス,相対パス,URLのいずれかで行って下さい。

基本的な書き方

今回は『ブログ記事』『ウェブページ』の個別ページに加え、比較的使用頻度の高そうな『カテゴリー』『月別』おまけで『タグ』の例を書いています。

ただ、URLの数は少ない方が処理は速くなるので『カテゴリー』や『月別』などのアーカイブページが削れる場合は削った方が良いと思います。

URLを書き出す際 encode_xmlモディファイア で<、>、&をエンコードしています。

url_list.php

<?php
$urlList = array(

<mt:Ignore>ブログ記事</mt:Ignore>
<mt:Entries lastn="0">
    '<$mt:EntryPermalink encode_xml="1"$>',
</mt:Entries>

<mt:Ignore>ウェブページ</mt:Ignore>
<mt:Pages>
    '<$mt:PagePermalink encode_xml="1"$>',
</mt:Pages>

<mt:Ignore>カテゴリー</mt:Ignore>
<mt:Categories>
    '<$mt:CategoryArchiveLink encode_xml="1"$>',
</mt:Categories>

<mt:Ignore>月別アーカイブ</mt:Ignore>
<mt:ArchiveList archive_type="Monthly">
    '<$mt:ArchiveLink encode_xml="1"$>',
</mt:ArchiveList>

<mt:Ignore>タグ (当サイトの場合)</mt:Ignore>
<mt:Tags>
    '/tag/<$mt:TagName encode_xml="1"$>',
</mt:Tags>

);

比較文字列は短く

http://から始まる絶対URL(デフォルト)で書き出すと、必然的に文字数が多くなり若干速度が遅くなるので、少しでもパフォーマンスを上げるため replaceモディファイア を使って絶対URLをルート基点の絶対パスに書き換えます。

<mt:Entries lastn="0">
    '<$mt:EntryPermalink encode_xml="1" replace="サイトのURL","/"$>',
</mt:Entries>

URLを書き出すMTタグにreplace="サイトのURL","/"を追加するとURLが/に置換されます(<$mt:BlogURL$>だと置換されないのは処理順の問題？)。

書き出し用テンプレート

replaceモディファイアを付与したバージョン。余分な改行が嫌いな方も以下のテンプレートを使うとサッパリスッキリします。

<?php
$urlList = array(
<mt:Ignore>ブログ記事</mt:Ignore
><mt:Entries lastn="0"
>    '<$mt:EntryPermalink encode_xml="1" replace="サイトのURL","/"$>',
</mt:Entries

><mt:Ignore>ウェブページ</mt:Ignore
><mt:Pages
>    '<$mt:PagePermalink encode_xml="1" replace="サイトのURL","/"$>',
</mt:Pages

><mt:Ignore>カテゴリー</mt:Ignore
><mt:Categories
>    '<$mt:CategoryArchiveLink encode_xml="1" replace="サイトのURL","/"$>',
</mt:Categories

><mt:Ignore>月別アーカイブ</mt:Ignore
><mt:ArchiveList archive_type="Monthly"
>    '<$mt:ArchiveLink encode_xml="1" replace="サイトのURL","/"$>',
</mt:ArchiveList

><mt:Ignore>タグ (当サイトの場合)</mt:Ignore
><mt:Tags
>    '/tag/<$mt:TagName encode_xml="1"$>',
</mt:Tags
>);

まとめ

• URLリストは少ない方が速い
• アーカイブページを削るのも手
• 文字数も少ない方が良い
• replaceモディファイアでパス書き換え

Web サイトのデザインに関するアンケート調査のご協力をお願いします。

• 質問数は6項目です。
• 答えられる項目だけでも構いません。
• 集計結果は公開いたします。

一定以上の回答数が欲しいので、同様の疑問を持っていた方は、この記事を紹介して下さると助かります。 m(._,)m

Web デザインに関するアンケートにご協力ください - 3ping.org

と言う訳で当ブログでも紹介。

以下に入力フォームも用意していますので、是非アンケートにお答えください。

全体の流れ

基本的にはいつもの流れですが、アップロード方法をちょっと変えてみました。

1. MTの機能でバックアップ
2. データベースのバックアップ
3. zipをアップロード・解凍
4. プラグインの動作チェック
5. MTにアクセスしてアップグレード

1.MTの機能でバックアップ

MT4からは標準機能の一つに「バックアップ」があるので、まずはこれを使ってバックアップを取ります。(ツール -> バックアップ)

念のためブログ記事のエクスポートも行いました。

2.データベースのバックアップ

MySQLを使用している場合はphpMyAdminなんかでテーブルを選択してエクスポートすると簡単にバックアップが取れます。

3.zipをアップロード・解凍

今まではローカルで解凍した後に、差分ファイルだけをアップロードしていましたが、今回はzipファイルごとアップロードしてサーバー上で解凍しました。

解凍はsshなどを使ってコマンドラインから行うのが良いと思いますが、コマンドラインでの操作が出来ない場合でも、PHPでexec関数が使える環境であれば解凍可能です。

<?php
// unzipコマンドで同階層のMT-4_21-ja.zipを解凍
exec('unzip MT-4_21-ja.zip');

4.プラグインの動作チェック

前バージョンで導入していたプラグインが動くかどうかチェック。要らなくなった or 使ってなかったプラグインもついでに削除。

5.MTにアクセスしてアップグレード

ファイル名やパーミッションなどを確認してMTにアクセスすれば、後は勝手にアップグレード作業を行ってくれます。

概要・必須条件

「ちょっと便利で優しい404ページ」とは、予めサイト内のURLリストを書き出しておき、間違って入力されたURLと比較して、もっとも近い実在URLを返す404ページです。

以下、必須条件。

• PHPが使用可能
• 404ページを好きなページに出来る
• URLを書き出す [スクリプト or 根気]

各ファイルのソースコード

url_list.php

<?php
$urlList = array(
    'ページのURL',
    'ページのURL',
    'ページのURL',
);

// 例
$urlList = array(
    '/php_mysql/',
    '/javascript/',
    '/mt/',
);

例のように、 'ページのURL', の行をコピーしてサイト全体のURLを記述する。
(http://で始まる絶対パスより、/で始まる絶対パスの方が速くて精度が高いです)

404.php

<?php
// URLリスト読み込み
require 'url_list.php';

/**
 * 以下の処理の詳しい説明はマニュアルを参照してください
 * http://php.benscom.com/manual/ja/function.levenshtein.php
 */
$shortest = -1;

foreach ($urlList as $val) {
	$lev = levenshtein($_SERVER['REQUEST_URI'], $val);
	if ($lev === 0) {
		$url = $val;
		$shortest = 0;
		break;
	}
	if ($lev <= $shortest || $shortest < 0) {
		$url = $val;
		$shortest = $lev;
	}
}
?>
<!-- ヘッダー -->
<h1>404 指定されたページは存在しません</h1>
<h2>もしかして</h2>
<p>お探しのページは <a href="<?php echo $url; ?>"><?php echo $url; ?></a>ではありませんか？</p>
<!-- フッター -->

24行目以下は自由に変更して下さい。
(26行目 <?php echo $url; ?> を変更する場合は気を付けて下さい)。

実在URLと一緒にページのタイトルも表示

url_list_v2.php

<?php
$urlList = array(
    'ページのURL' => 'ページのタイトル',
    'ページのURL' => 'ページのタイトル',
    'ページのURL' => 'ページのタイトル',
);

// 例
$urlList = array(
    '/php_mysql/' => 'PHP/MySQL',
    '/javascript/' => 'JavaScript',
    '/mt/' => 'Movable Type',
);

'ページのURL' と行末の,(カンマ)の間に => 'ページのタイトル' を追加する。

404.php

<?php
// URLリスト Ver.2 読み込み
require 'url_list_v2.php';

/**
 * 以下、色々処理
 */
$shortest = -1;

foreach ($urlList as $key => $val) {
	$lev = levenshtein($_SERVER['REQUEST_URI'], $key);
	if ($lev === 0) {
		$url   = $key;
		$title = $val;
		$shortest = 0;
		break;
	}
	if ($lev <= $shortest || $shortest < 0) {
		$url   = $key;
		$title = $val;
		$shortest = $lev;
	}
}
?>
<!-- ヘッダー -->
<h1>404 指定されたページは存在しません</h1>
<h2>もしかして</h2>
<p>お探しのページは <a href="<?php echo $url; ?>"><?php echo $title; ?></a> (<?php echo $url; ?>) ではありませんか？</p>
<!-- フッター -->

<?php echo $url; ?>がURLで、<?php echo $title; ?>がページタイトルになります。

404ページに設定する

404.php を 404ページとして利用できるように設定して下さい。

.htaccess なら ErrorDocument 404 /404.php など。

補足など

デモページ: この記事のURLを間違える

肝心の精度は「無いよりまし」と言った感じです。でも、1,2文字のタイプミスならかなり近くなるはず。

URLの書き出しは何らかの方法で自動化した方がいいです。例えばMTを使う。

url_list.php の代替手段として、単純にURLを羅列したテキストファイルを fopen で読み込んでもいいと思います。速度は未検証。

PHP5の場合

<?php
// 開始時間
$startTime = microtime(true);

// 10万回ループ
for ($i = 0; $i < 100000; $i++) {
	// 処理
}

// 終了時間
$endTime = microtime(true);

// 終了時間 - 開始時間 = 処理に掛かった時間
echo $endTime - $startTime . '秒';
?>

PHP4の場合

<?php
// PHP5の動作を模擬する簡単な関数
function microtime_float()
{
    list($usec, $sec) = explode(' ', microtime());
    return ((float)$usec + (float)$sec);
}

// 開始時間
$startTime = microtime_float();

// 10万回ループ
for ($i = 0; $i < 100000; $i++) {
	// 処理
}

// 終了時間
$endTime = microtime_float();

// 終了時間 - 開始時間 = 処理に掛かった時間
echo $endTime - $startTime . '秒';
?>

説明及び補足

microtime関数を使って現在のUNIXタイムスタンプをマイクロ秒単位で取得し、開始・終了それぞれを変数に代入、処理が終ったら終了時間から開始時間を引いて処理に掛かった時間(速度)を出力。

PHP4の場合はget_as_floatが使用出来ないため、PHP5を模擬する簡単な関数を書いて対応。

まとめ

• microtime関数で開始と終了の時間を求める
• ループなどで処理を複数回実行する
• 終了時間 - 開始時間 = 処理に掛かった時間
• 詳細なベンチマークを計りたい場合はPEAR

Dreamweaverで正規表現置換を使う

Ctrl+F(Windowsの場合)を押して検索および置換ウィンドウを開き、[正規表現を使用]にチェックを入れれば検索および置換で正規表現を使うことが出来る。

改行コードを確認

実際に入力する値は、ファイル保存時の改行コードに依存するため、置換前に自分の環境の改行コードを確認しておきます。

Dreamweaverで改行コードを確認するには[環境設定]から[コードフォーマット]を選択し、その中の[改行タイプ]の項目で確認できます。

置換で空行のタブ文字を消す

確認した改行タイプと照らし合わせて見て下さい。

CR LF (Windows) の場合

検索

\t+\r\n

置換

\r\n

CR (Macintosh) の場合

検索

\t+\r

置換

\r

LF (Linux) の場合

検索

\t+\n

置換

\n

説明・補足

置換のタイプが3パターンありますが、やっている事は全て同じで、\t+で1回以上繰り返しているタブ文字、\r\nや\rでそれぞれの改行コードを指定しています。

処理を具体化すると『(検索)一回以上繰り返してるタブ文字の後に改行が在ったら、(置換)タブ文字を消して改行だけ残す』と言った感じです。

ちなみに\(バックスラッシュ)は、環境(主にフォント)によっては￥(半角エンマーク)に見える可能性がありますので、よく分からない時はコピペして使用するのがいいかと思います。

参考リンク

正規表現を使った検索および置換は他にも色々なパターンがあるので、下記サイトを参考にして色々試してみて下さい。

• Dreamweaverの正規表現置換サンプルと解説
• 教育漢字以外を検索する正規表現とDreamWeaver用Queriesファイル
• 正規表現 (Dreamweaver 8)

1) カラーセットファイルのダウンロード

まず、こちらのカラーセットファイルをダウンロードします。

Colors.xml - v1.0

対応ファイルは HTML・CSS・XML・JavaScript・PHP・テキスト。使用は自己責任で。

2) Dreamweaver起動前の準備

ダウンロードしたColors.xmlを以下の場所にコピーします。

ユーザ名 及び Dreamaweaverのバージョンは、ご自分の環境に合わせて読み替え(及び書き換え)て下さい。

Dreamweaver 8以下のバージョン

Windows XP

C:\Documents and Settings\ユーザ名\Application Data\Macromedia\Dreamaweaverのバージョン\Configuration\CodeColoring

Macintosh OSX

Macintosh HD/ユーザ/ユーザ名/ライブラリ/Application Support/Macromedia/Dreamaweaverのバージョン/Configuration/CodeColoring

Dreamweaver CS3

Windows XP

C:\Documents and Settings\ユーザ名\Application Data\Adobe\Dreamaweaverのバージョン\Configuration\CodeColoring

Macintosh OSX

Macintosh HD/ユーザ/ユーザ名/ライブラリ/Application Support/Adobe/Dreamaweaverのバージョン/Configuration/CodeColoring

※注意:Windows XPの設定次第では、Application Dataフォルダ以下が表示されない場合があるので、Windows 隠しフォルダを表示させる方法 - TechScrawlを参照して設定を変更して下さい。

3) Dreamweaverを起動し背景色を変更

(1)(2)の作業を終えたら、Dreamweaverを起動し背景色の設定を行います。

画面最上部のメニューバーから [編集(E) -> 環境設定(P) -> コードカラーリング] を選択、右下の[デフォルトの背景]を[#000000]に変更し、[OK]を押せば背景を黒くして使用できるようになっているはずです。

カラーリングスキームをデフォルトに戻したい

(2)でコピーしたColors.xmlを削除し、(3)で設定した[デフォルトの背景]を#FFFFFFに戻せばデフォルトのカラーリングスキームに戻すことが出来ます。

動作確認環境

以下の環境以外では正常に動作するかどうかは不明です。

Windows XP

• Dreamweaver MX
• Dreamweaver MX2004
• Dreamweaver 8
• Dreamweaver CS3

Macintosh OSX

• Dreamweaver MX2004
• Dreamweaver 8

ソースコード

www有りに統一

/**
 * www無しはリダイレクト
 */
if (!preg_match('/^www\./', $_SERVER['HTTP_HOST'])) {
	header("HTTP/1.1 301 Moved Permanently");
	header("Status: 301 Moved Permanently");
	header("Location: http://www." . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']);

	exit;
}

www無しに統一

/**
 * www有りはリダイレクト
 */
if (preg_match('/^www\./', $_SERVER['HTTP_HOST'])) {
	$httpHost = ereg_replace("^www.", "", $_SERVER['HTTP_HOST']);
	header("HTTP/1.1 301 Moved Permanently");
	header("Status: 301 Moved Permanently");
	header("Location: http://" . $httpHost . $_SERVER['REQUEST_URI']);

	exit;
}

説明

まず正規表現でホスト名の先頭にwww.が有るか調べる。マッチすればTUREを返すのでwww有りに統一する場合は「!」で否定。無しの場合はそのまま。

次にリダイレクトの準備。Location:ヘッダでそのままリダイレクトすると、ステータスコード302(一時的移動)を返すので、ステータスコード301(恒久的移動)を返すように設定する。

www無しで統一する場合は上記に加え、ホスト名の先頭からwww.を削除する処理を追加する。

最後にLocation:ヘッダを使用して統一するURLへリダイレクト。この時、ホスト名のみでリダイレクトするとトップページに移動してしまうので、REQUEST_URIをホスト名の後に付加してあげる。

まとめ

• 正規表現でwwwがあるかないか調べる
• ステータスコード301じゃないと本末転倒
• Location:ヘッダでリダイレクト
• REQUEST_URIも付加してあげる

基本事項

今回考えるのは、背景色のみ指定する形を基本にした以下の3パターン。

1. 背景色のみ(基本形)
2. ボーダー付き
3. ボーダー付き (ulをdivで括るver)

この記事では、各パターンの実装方法と問題点を中心に説明していきます。実際の表示とソースコードはデモページを参照して下さい。

デモページ

1. 背景色のみ

背景色(画像)のみであれば比較的簡単に実装できると思います。

実装方法

• 高さの異なるカラムを揃えるCSSを指定
• 列ごとにliの包含要素(ulやol)を分ける
• liをfloatして背景色(画像)を付ける

問題点

列ごとに包含要素を分けるため、本来同じグループに属するはずのリストが途中で別のリストになってしまう(問題点かどうかは微妙)。

デモ:1.背景色のみ

2. ボーダー付き

背景色のみをベースにボーダーを付ける。実装にはかなり制限があります。

実装方法

• [1.背景色のみ]をベースにする
• 包含要素(ulやol)の上と左にボーダー(とIE用にzoom:1;)を指定
• liのマージンを無くし、上と右にボーダーを指定

問題点

• liにマージンを指定すると下のボーダーが気まずい雰囲気。
• 個別で幅を指定しないと、横並びの数が違う時にボーダーがはみ出る(デモ参照)

デモ:2.ボーダー付き

3. ボーダー付き (ulをdivで括るver)

[2.ボーダー付き]でのliにマージンが指定出来ない問題を、下のボーダーを画像にする事でクリアしたパターンです。

実装方法

• [1.背景色のみ]をベースにする
• 直接の包含要素(ulやol)にIE用のzoom:1;を指定
• liにボーダー(と幅を空ける場合はマージン)を指定
• liで指定したボーダーやマージンと合うように画像を作る

画像の説明が難しいので、デモページ及びborder.gifを直接参照して下さい。

※デモではリスト3つ分の画像にしていますが、ボーダーとマージンを合わせた1つ分の画像を横方向も繰り返す感じでも行けます。

問題点

• 幅が変わったらイチイチ画像を作らないといけない。
• 個別で幅を指定しないと、横並びの数が違う時に画像がはみ出る(デモ参照)

3.ボーダー付き (ulをdivで括るver)

まとめ

何だか色々考えてる内に微妙な感じになってきました。

全てのパターンを通して、レイアウト目的でのマークアップになるので、どうしても実装しなくてはいけない時のみに使うのが良さそうです。

IE6とIE7が display:table-cell; に対応していればもっと楽に出来るんですけどね。

タイトルについて

ホッテントリメーカーが面白かったので早速使ってみました。なので、この記事のタイトルが若干いつもと違うのは仕様です。

HTMLサンプル

<div id="wrap">
	<div id="main">
		<div id="section1">
			<!-- 内容 -->
		</div>
		<div id="section2">
			<!-- 内容 -->
		</div>
	</div>

	<div id="navi">
		<p><a href="#section2">第二セクション</a></p>
	</div>
</div>

CSSサンプル

div#wrap {
	width: 750px;
	margin: 0 auto;
	overflow: hidden;
}

div#main {
	float: right;
	width: 550px;
}
	div#section1 {
		background: #FCC;
		height: 500px;	/* 消える領域表現の為の高さ */
	}
	div#section2 {
		background: #CCF;
		height: 500px;	/* デモなので中身無しで高さだけ */
	}

div#navi {
	float: left;
	width: 200px;
	margin-bottom: -32768px;	/* 高さを揃える */
	padding-bottom: 32768px;
	background: #CFC;
}

デモと補足

デモページ

ちょっとデモ用に要らない部分を付け足しすぎた感がありますが、そんなに難しい内容では無いので消えることだけ覚えておいて下さい。

Firefox2.0 , Safari3.1 , IE6 , IE7 で消える現象を確認。

※04/16 09:15 修正 : デモページのstyle内のコメントアウトが正しく無かったため、IEとOperaで表示出来ない不具合を修正しました。ご指摘感謝いたします。

原因

何故消えるのか、それは仕様(wuさんのコメント参照)だからです。

厳密に言うと、overflow:hidden;と言うより、下方向に指定されたパディングとネガティブマージンによる overflow:hiddenで隠れているけど存在する領域 の問題なので、包容要素にoverflow:hidden;を指定しただけでは消えることはありません。

※この問題に対する画期的な回避方法は特にありませんが、IEではdiv#mainとdiv#naviにzoom:1;を指定することで回避出来たりします。

まとめ

どうしてもページ内リンクを使いたい場合は、カラムの高さ合わせには包容要素に背景を指定する方法など、従来どおりのいわゆる正攻法を使う。

仕様を理解してても、横着するとたまにやってしまったりするかも。なメモ。

※04/17 16:47 修正 : 一部誤解を招く箇所があった為、加筆修正しました。

サンプルコード

function initRollOverImages() {
	var image_cache = new Object();
	$(".rollover a img").not("[@src*='_on.']").each(function(i) {
		var imgsrc = this.src;
		var dot = this.src.lastIndexOf('.');
		var imgsrc_on = this.src.substr(0, dot) + '_on' + this.src.substr(dot, 4);
		image_cache[this.src] = new Image();
		image_cache[this.src].src = imgsrc_on;
		$(this).hover(
			function() { this.src = imgsrc_on; },
			function() { this.src = imgsrc; }
		);
	});
}
$(document).ready(initRollOverImages);

使い方

3行目で指定した箇所の画像にマウスポインタを当てると、ファイル名に_onが付いてる画像を表示する。マウスポインタを外すと_onが付いていない画像に戻る。

以下に実装までの簡単な流れを。

1. 通常表示する画像 test.jpg とロールオーバーする画像 test_on.jpg を作成
2. jQueryの設定を記述しているファイル(又はHTMLのscript内)に上記コードを挿入
3. コード3行目の .rollover a img をCSSな記法で好きな場所に変える

こんな感じです。あら簡単。

※尚、今回ご紹介した方法は[inputにフォーカスすると消える文字をjQueryで実装する]と同様、他でjQueryを使用してる際の"おまけ"程度に考えて頂ければと思います。

オリジナルと違う点

3行目に .not("[@src*='_on.']") を追加することで、src属性で指定した画像に_onが付いている場合はロールオーバーの処理を実行しないようにしています。これにより、アクティブページなどで初めから_on付きの画像を指定したい時も、IDやCLASSを指定する必要が無くなります。

デモについて

当ブログのアーカイブページで使用されている[Read More]と言う画像は、この方法を使用してロールオーバーしています。

JavaScriptアーカイブ

まずはダウンロード

Cygwinのサイトからsetup.exeをダウンロードする。

パッケージのダウンロード＆インストール

setup.exeを起動して好きなパッケージをインストールする。パスの関係上インストールディレクトリはドライブ直下(C:\cygwinやD:\cygwin)が良さげかしら。

ターミナルにrxvtを使ので、この段階でインストールしておく。

Cygwin起動前の設定

Cygwin(bash)を起動する前に以下の設定を行う。

ユーザー環境変数を追加

マイコンピュータのプロパティ -> 詳細設定タブ -> 環境変数 のユーザー環境変数の[新規]から以下の環境変数を追加。

ターミナルをrxvtに変更

CygwinをインストールしたディレクトリのCygwin.batをテキストエディタで開き、bash --login -iの部分を以下のように編集する。

@echo off

D:
chdir D:\cygwin\bin

rem 取り敢えずコメントアウト
rem bash --login -i

rem 追加
start rxvt ^
  -geometry 85x35+350+80 ^
  -bg Black ^
  -fg White ^
  -sr ^
  -fn "VL Gothic"-18 ^
  -fm "VL Gothic"-18 ^
  -km eucj ^
  -e bash --login -i

引数が改行されているのは可読性重視のため。^(キャレット)を削除して一行で書いても問題無い。

指定しているオプション(引数)については以下を参照。

今回指定していないその他のオプションについてはrxvt --helpで確認できる。

変更が完了したらCygwinを起動して色々作業する。

文字コードについて

作業内容などに合わせて変更する必要がある。

例えばWindowsで作業する場合はsjis(Shift_JIS)にしないとマルチバイト文字が文字化けする。

ちょっと不便なので何か対応策が無いか模索したいところ。取り敢えずはバッチファイルを各文字コード毎に作成して対応する。

ダウンロード

より簡単に使用できるように、ファイルをダウンロード出来るようにしました。

maybeURL.zip - v1.0

ソースコード

maybeURL.php

<?php
/**
 * もしかしてお探しのページは [URL] ではありませんか？
 *
 * @param  string $sitemap サイトマップファイル
 * @return string 最も近い実在URL
 */
function maybeURL($sitemap)
{
	// サイトマップ読み込み
	$data = file_get_contents($sitemap);

	// URLを抜き出す正規表現
	$pattern = '/<loc>http:\/\/[^\/]*(.*)<\/loc>/';
	// $urlList['1']にURLリストが入る
	preg_match_all($pattern, $data, $urlList);

	// 最短距離の初期値
	$shortest = -1;

	// 最も近い実在URLを探し始める
	foreach ($urlList['1'] as $val) {
		// リクエストURLとリストURLの距離を計算する
		$lev = levenshtein($_SERVER['REQUEST_URI'], $val);

		// 二つの距離が0(同一文字列)なら終了
		if ($lev === 0) {
			$existURL = $val;
			$shortest = 0;
			break;
		}
		// 二つの距離が最短距離よりも短いか、
		// 最短距離が初期値の場合、最短距離書き換え
		if ($lev <= $shortest || $shortest < 0) {
			$existURL = $val;
			$shortest = $lev;
		}
	}

	// 最も近い実在URL
	return $existURL;
}

必要な値がURLだけだったので、XMLとして評価せず、正規表現を使ってURLを取得しています。と言うかSimpleXmlElement遅すぎ。

URLを取得する正規表現で『http://ホスト名』の部分を除外しています。除外不要の場合は、$patternのhttp:\/\/[^\/]*を削除して下さい。

404.php

<?php
require_once 'maybeURL.php';
$url = maybeURL('./sitemap.xml');
?>
<!-- ヘッダー -->
<h1>404 指定されたページは存在しません</h1>
<h2>もしかして</h2>
<p>お探しのページは <a href="<?php echo $url; ?>"><?php echo $url; ?></a> ではありませんか？</p>
<!-- フッター -->

前のとほぼ同じです。

使用方法

1. 404.php を 404ページとして利用できるように設定する。
2. 404.phpのサイトマップやmaybeURL.phpのパスを編集する。
3. 後は表示部分を適当に編集すれば直ぐに使えます。

※サイトマップの指定はフルパス,相対パス,URLのいずれかで行って下さい。

基本的な書き方

今回は『ブログ記事』『ウェブページ』の個別ページに加え、比較的使用頻度の高そうな『カテゴリー』『月別』おまけで『タグ』の例を書いています。

ただ、URLの数は少ない方が処理は速くなるので『カテゴリー』や『月別』などのアーカイブページが削れる場合は削った方が良いと思います。

URLを書き出す際 encode_xmlモディファイア で<、>、&をエンコードしています。

url_list.php

<?php
$urlList = array(

<mt:Ignore>ブログ記事</mt:Ignore>
<mt:Entries lastn="0">
    '<$mt:EntryPermalink encode_xml="1"$>',
</mt:Entries>

<mt:Ignore>ウェブページ</mt:Ignore>
<mt:Pages>
    '<$mt:PagePermalink encode_xml="1"$>',
</mt:Pages>

<mt:Ignore>カテゴリー</mt:Ignore>
<mt:Categories>
    '<$mt:CategoryArchiveLink encode_xml="1"$>',
</mt:Categories>

<mt:Ignore>月別アーカイブ</mt:Ignore>
<mt:ArchiveList archive_type="Monthly">
    '<$mt:ArchiveLink encode_xml="1"$>',
</mt:ArchiveList>

<mt:Ignore>タグ (当サイトの場合)</mt:Ignore>
<mt:Tags>
    '/tag/<$mt:TagName encode_xml="1"$>',
</mt:Tags>

);

比較文字列は短く

http://から始まる絶対URL(デフォルト)で書き出すと、必然的に文字数が多くなり若干速度が遅くなるので、少しでもパフォーマンスを上げるため replaceモディファイア を使って絶対URLをルート基点の絶対パスに書き換えます。

<mt:Entries lastn="0">
    '<$mt:EntryPermalink encode_xml="1" replace="サイトのURL","/"$>',
</mt:Entries>

URLを書き出すMTタグにreplace="サイトのURL","/"を追加するとURLが/に置換されます(<$mt:BlogURL$>だと置換されないのは処理順の問題？)。

書き出し用テンプレート

replaceモディファイアを付与したバージョン。余分な改行が嫌いな方も以下のテンプレートを使うとサッパリスッキリします。

<?php
$urlList = array(
<mt:Ignore>ブログ記事</mt:Ignore
><mt:Entries lastn="0"
>    '<$mt:EntryPermalink encode_xml="1" replace="サイトのURL","/"$>',
</mt:Entries

><mt:Ignore>ウェブページ</mt:Ignore
><mt:Pages
>    '<$mt:PagePermalink encode_xml="1" replace="サイトのURL","/"$>',
</mt:Pages

><mt:Ignore>カテゴリー</mt:Ignore
><mt:Categories
>    '<$mt:CategoryArchiveLink encode_xml="1" replace="サイトのURL","/"$>',
</mt:Categories

><mt:Ignore>月別アーカイブ</mt:Ignore
><mt:ArchiveList archive_type="Monthly"
>    '<$mt:ArchiveLink encode_xml="1" replace="サイトのURL","/"$>',
</mt:ArchiveList

><mt:Ignore>タグ (当サイトの場合)</mt:Ignore
><mt:Tags
>    '/tag/<$mt:TagName encode_xml="1"$>',
</mt:Tags
>);

まとめ

• URLリストは少ない方が速い
• アーカイブページを削るのも手
• 文字数も少ない方が良い
• replaceモディファイアでパス書き換え

Web サイトのデザインに関するアンケート調査のご協力をお願いします。

• 質問数は6項目です。
• 答えられる項目だけでも構いません。
• 集計結果は公開いたします。

一定以上の回答数が欲しいので、同様の疑問を持っていた方は、この記事を紹介して下さると助かります。 m(._,)m

Web デザインに関するアンケートにご協力ください - 3ping.org

と言う訳で当ブログでも紹介。

以下に入力フォームも用意していますので、是非アンケートにお答えください。

全体の流れ

基本的にはいつもの流れですが、アップロード方法をちょっと変えてみました。

1. MTの機能でバックアップ
2. データベースのバックアップ
3. zipをアップロード・解凍
4. プラグインの動作チェック
5. MTにアクセスしてアップグレード

1.MTの機能でバックアップ

MT4からは標準機能の一つに「バックアップ」があるので、まずはこれを使ってバックアップを取ります。(ツール -> バックアップ)

念のためブログ記事のエクスポートも行いました。

2.データベースのバックアップ

MySQLを使用している場合はphpMyAdminなんかでテーブルを選択してエクスポートすると簡単にバックアップが取れます。

3.zipをアップロード・解凍

今まではローカルで解凍した後に、差分ファイルだけをアップロードしていましたが、今回はzipファイルごとアップロードしてサーバー上で解凍しました。

解凍はsshなどを使ってコマンドラインから行うのが良いと思いますが、コマンドラインでの操作が出来ない場合でも、PHPでexec関数が使える環境であれば解凍可能です。

<?php
// unzipコマンドで同階層のMT-4_21-ja.zipを解凍
exec('unzip MT-4_21-ja.zip');

4.プラグインの動作チェック

前バージョンで導入していたプラグインが動くかどうかチェック。要らなくなった or 使ってなかったプラグインもついでに削除。

5.MTにアクセスしてアップグレード

ファイル名やパーミッションなどを確認してMTにアクセスすれば、後は勝手にアップグレード作業を行ってくれます。

概要・必須条件

「ちょっと便利で優しい404ページ」とは、予めサイト内のURLリストを書き出しておき、間違って入力されたURLと比較して、もっとも近い実在URLを返す404ページです。

以下、必須条件。

• PHPが使用可能
• 404ページを好きなページに出来る
• URLを書き出す [スクリプト or 根気]

各ファイルのソースコード

url_list.php

<?php
$urlList = array(
    'ページのURL',
    'ページのURL',
    'ページのURL',
);

// 例
$urlList = array(
    '/php_mysql/',
    '/javascript/',
    '/mt/',
);

例のように、 'ページのURL', の行をコピーしてサイト全体のURLを記述する。
(http://で始まる絶対パスより、/で始まる絶対パスの方が速くて精度が高いです)

404.php

<?php
// URLリスト読み込み
require 'url_list.php';

/**
 * 以下の処理の詳しい説明はマニュアルを参照してください
 * http://php.benscom.com/manual/ja/function.levenshtein.php
 */
$shortest = -1;

foreach ($urlList as $val) {
	$lev = levenshtein($_SERVER['REQUEST_URI'], $val);
	if ($lev === 0) {
		$url = $val;
		$shortest = 0;
		break;
	}
	if ($lev <= $shortest || $shortest < 0) {
		$url = $val;
		$shortest = $lev;
	}
}
?>
<!-- ヘッダー -->
<h1>404 指定されたページは存在しません</h1>
<h2>もしかして</h2>
<p>お探しのページは <a href="<?php echo $url; ?>"><?php echo $url; ?></a>ではありませんか？</p>
<!-- フッター -->

24行目以下は自由に変更して下さい。
(26行目 <?php echo $url; ?> を変更する場合は気を付けて下さい)。

実在URLと一緒にページのタイトルも表示

url_list_v2.php

<?php
$urlList = array(
    'ページのURL' => 'ページのタイトル',
    'ページのURL' => 'ページのタイトル',
    'ページのURL' => 'ページのタイトル',
);

// 例
$urlList = array(
    '/php_mysql/' => 'PHP/MySQL',
    '/javascript/' => 'JavaScript',
    '/mt/' => 'Movable Type',
);

'ページのURL' と行末の,(カンマ)の間に => 'ページのタイトル' を追加する。

404.php

<?php
// URLリスト Ver.2 読み込み
require 'url_list_v2.php';

/**
 * 以下、色々処理
 */
$shortest = -1;

foreach ($urlList as $key => $val) {
	$lev = levenshtein($_SERVER['REQUEST_URI'], $key);
	if ($lev === 0) {
		$url   = $key;
		$title = $val;
		$shortest = 0;
		break;
	}
	if ($lev <= $shortest || $shortest < 0) {
		$url   = $key;
		$title = $val;
		$shortest = $lev;
	}
}
?>
<!-- ヘッダー -->
<h1>404 指定されたページは存在しません</h1>
<h2>もしかして</h2>
<p>お探しのページは <a href="<?php echo $url; ?>"><?php echo $title; ?></a> (<?php echo $url; ?>) ではありませんか？</p>
<!-- フッター -->

<?php echo $url; ?>がURLで、<?php echo $title; ?>がページタイトルになります。

404ページに設定する

404.php を 404ページとして利用できるように設定して下さい。

.htaccess なら ErrorDocument 404 /404.php など。

補足など

デモページ: この記事のURLを間違える

肝心の精度は「無いよりまし」と言った感じです。でも、1,2文字のタイプミスならかなり近くなるはず。

URLの書き出しは何らかの方法で自動化した方がいいです。例えばMTを使う。

url_list.php の代替手段として、単純にURLを羅列したテキストファイルを fopen で読み込んでもいいと思います。速度は未検証。

PHP5の場合

<?php
// 開始時間
$startTime = microtime(true);

// 10万回ループ
for ($i = 0; $i < 100000; $i++) {
	// 処理
}

// 終了時間
$endTime = microtime(true);

// 終了時間 - 開始時間 = 処理に掛かった時間
echo $endTime - $startTime . '秒';
?>

PHP4の場合

<?php
// PHP5の動作を模擬する簡単な関数
function microtime_float()
{
    list($usec, $sec) = explode(' ', microtime());
    return ((float)$usec + (float)$sec);
}

// 開始時間
$startTime = microtime_float();

// 10万回ループ
for ($i = 0; $i < 100000; $i++) {
	// 処理
}

// 終了時間
$endTime = microtime_float();

// 終了時間 - 開始時間 = 処理に掛かった時間
echo $endTime - $startTime . '秒';
?>

説明及び補足

microtime関数を使って現在のUNIXタイムスタンプをマイクロ秒単位で取得し、開始・終了それぞれを変数に代入、処理が終ったら終了時間から開始時間を引いて処理に掛かった時間(速度)を出力。

PHP4の場合はget_as_floatが使用出来ないため、PHP5を模擬する簡単な関数を書いて対応。

まとめ

• microtime関数で開始と終了の時間を求める
• ループなどで処理を複数回実行する
• 終了時間 - 開始時間 = 処理に掛かった時間
• 詳細なベンチマークを計りたい場合はPEAR

Dreamweaverで正規表現置換を使う

Ctrl+F(Windowsの場合)を押して検索および置換ウィンドウを開き、[正規表現を使用]にチェックを入れれば検索および置換で正規表現を使うことが出来る。

改行コードを確認

実際に入力する値は、ファイル保存時の改行コードに依存するため、置換前に自分の環境の改行コードを確認しておきます。

Dreamweaverで改行コードを確認するには[環境設定]から[コードフォーマット]を選択し、その中の[改行タイプ]の項目で確認できます。

置換で空行のタブ文字を消す

確認した改行タイプと照らし合わせて見て下さい。

CR LF (Windows) の場合

検索

\t+\r\n

置換

\r\n

CR (Macintosh) の場合

検索

\t+\r

置換

\r

LF (Linux) の場合

検索

\t+\n

置換

\n

説明・補足

置換のタイプが3パターンありますが、やっている事は全て同じで、\t+で1回以上繰り返しているタブ文字、\r\nや\rでそれぞれの改行コードを指定しています。

処理を具体化すると『(検索)一回以上繰り返してるタブ文字の後に改行が在ったら、(置換)タブ文字を消して改行だけ残す』と言った感じです。

ちなみに\(バックスラッシュ)は、環境(主にフォント)によっては￥(半角エンマーク)に見える可能性がありますので、よく分からない時はコピペして使用するのがいいかと思います。

参考リンク

正規表現を使った検索および置換は他にも色々なパターンがあるので、下記サイトを参考にして色々試してみて下さい。

• Dreamweaverの正規表現置換サンプルと解説
• 教育漢字以外を検索する正規表現とDreamWeaver用Queriesファイル
• 正規表現 (Dreamweaver 8)

1) カラーセットファイルのダウンロード

まず、こちらのカラーセットファイルをダウンロードします。

Colors.xml - v1.0

対応ファイルは HTML・CSS・XML・JavaScript・PHP・テキスト。使用は自己責任で。

2) Dreamweaver起動前の準備

ダウンロードしたColors.xmlを以下の場所にコピーします。

ユーザ名 及び Dreamaweaverのバージョンは、ご自分の環境に合わせて読み替え(及び書き換え)て下さい。

Dreamweaver 8以下のバージョン

Windows XP

C:\Documents and Settings\ユーザ名\Application Data\Macromedia\Dreamaweaverのバージョン\Configuration\CodeColoring

Macintosh OSX

Macintosh HD/ユーザ/ユーザ名/ライブラリ/Application Support/Macromedia/Dreamaweaverのバージョン/Configuration/CodeColoring

Dreamweaver CS3

Windows XP

C:\Documents and Settings\ユーザ名\Application Data\Adobe\Dreamaweaverのバージョン\Configuration\CodeColoring

Macintosh OSX

Macintosh HD/ユーザ/ユーザ名/ライブラリ/Application Support/Adobe/Dreamaweaverのバージョン/Configuration/CodeColoring

※注意:Windows XPの設定次第では、Application Dataフォルダ以下が表示されない場合があるので、Windows 隠しフォルダを表示させる方法 - TechScrawlを参照して設定を変更して下さい。

3) Dreamweaverを起動し背景色を変更

(1)(2)の作業を終えたら、Dreamweaverを起動し背景色の設定を行います。

画面最上部のメニューバーから [編集(E) -> 環境設定(P) -> コードカラーリング] を選択、右下の[デフォルトの背景]を[#000000]に変更し、[OK]を押せば背景を黒くして使用できるようになっているはずです。

カラーリングスキームをデフォルトに戻したい

(2)でコピーしたColors.xmlを削除し、(3)で設定した[デフォルトの背景]を#FFFFFFに戻せばデフォルトのカラーリングスキームに戻すことが出来ます。

動作確認環境

以下の環境以外では正常に動作するかどうかは不明です。

Windows XP

• Dreamweaver MX
• Dreamweaver MX2004
• Dreamweaver 8
• Dreamweaver CS3

Macintosh OSX

• Dreamweaver MX2004
• Dreamweaver 8

ソースコード

www有りに統一

/**
 * www無しはリダイレクト
 */
if (!preg_match('/^www\./', $_SERVER['HTTP_HOST'])) {
	header("HTTP/1.1 301 Moved Permanently");
	header("Status: 301 Moved Permanently");
	header("Location: http://www." . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']);

	exit;
}

www無しに統一

/**
 * www有りはリダイレクト
 */
if (preg_match('/^www\./', $_SERVER['HTTP_HOST'])) {
	$httpHost = ereg_replace("^www.", "", $_SERVER['HTTP_HOST']);
	header("HTTP/1.1 301 Moved Permanently");
	header("Status: 301 Moved Permanently");
	header("Location: http://" . $httpHost . $_SERVER['REQUEST_URI']);

	exit;
}

説明

まず正規表現でホスト名の先頭にwww.が有るか調べる。マッチすればTUREを返すのでwww有りに統一する場合は「!」で否定。無しの場合はそのまま。

次にリダイレクトの準備。Location:ヘッダでそのままリダイレクトすると、ステータスコード302(一時的移動)を返すので、ステータスコード301(恒久的移動)を返すように設定する。

www無しで統一する場合は上記に加え、ホスト名の先頭からwww.を削除する処理を追加する。

最後にLocation:ヘッダを使用して統一するURLへリダイレクト。この時、ホスト名のみでリダイレクトするとトップページに移動してしまうので、REQUEST_URIをホスト名の後に付加してあげる。

まとめ

• 正規表現でwwwがあるかないか調べる
• ステータスコード301じゃないと本末転倒
• Location:ヘッダでリダイレクト
• REQUEST_URIも付加してあげる

基本事項

今回考えるのは、背景色のみ指定する形を基本にした以下の3パターン。

1. 背景色のみ(基本形)
2. ボーダー付き
3. ボーダー付き (ulをdivで括るver)

この記事では、各パターンの実装方法と問題点を中心に説明していきます。実際の表示とソースコードはデモページを参照して下さい。

デモページ

1. 背景色のみ

背景色(画像)のみであれば比較的簡単に実装できると思います。

実装方法

• 高さの異なるカラムを揃えるCSSを指定
• 列ごとにliの包含要素(ulやol)を分ける
• liをfloatして背景色(画像)を付ける

問題点

列ごとに包含要素を分けるため、本来同じグループに属するはずのリストが途中で別のリストになってしまう(問題点かどうかは微妙)。

デモ:1.背景色のみ

2. ボーダー付き

背景色のみをベースにボーダーを付ける。実装にはかなり制限があります。

実装方法

• [1.背景色のみ]をベースにする
• 包含要素(ulやol)の上と左にボーダー(とIE用にzoom:1;)を指定
• liのマージンを無くし、上と右にボーダーを指定

問題点

• liにマージンを指定すると下のボーダーが気まずい雰囲気。
• 個別で幅を指定しないと、横並びの数が違う時にボーダーがはみ出る(デモ参照)

デモ:2.ボーダー付き

3. ボーダー付き (ulをdivで括るver)

[2.ボーダー付き]でのliにマージンが指定出来ない問題を、下のボーダーを画像にする事でクリアしたパターンです。

実装方法

• [1.背景色のみ]をベースにする
• 直接の包含要素(ulやol)にIE用のzoom:1;を指定
• liにボーダー(と幅を空ける場合はマージン)を指定
• liで指定したボーダーやマージンと合うように画像を作る

画像の説明が難しいので、デモページ及びborder.gifを直接参照して下さい。

※デモではリスト3つ分の画像にしていますが、ボーダーとマージンを合わせた1つ分の画像を横方向も繰り返す感じでも行けます。

問題点

• 幅が変わったらイチイチ画像を作らないといけない。
• 個別で幅を指定しないと、横並びの数が違う時に画像がはみ出る(デモ参照)

3.ボーダー付き (ulをdivで括るver)

まとめ

何だか色々考えてる内に微妙な感じになってきました。

全てのパターンを通して、レイアウト目的でのマークアップになるので、どうしても実装しなくてはいけない時のみに使うのが良さそうです。

IE6とIE7が display:table-cell; に対応していればもっと楽に出来るんですけどね。

タイトルについて

ホッテントリメーカーが面白かったので早速使ってみました。なので、この記事のタイトルが若干いつもと違うのは仕様です。

HTMLサンプル

<div id="wrap">
	<div id="main">
		<div id="section1">
			<!-- 内容 -->
		</div>
		<div id="section2">
			<!-- 内容 -->
		</div>
	</div>

	<div id="navi">
		<p><a href="#section2">第二セクション</a></p>
	</div>
</div>

CSSサンプル

div#wrap {
	width: 750px;
	margin: 0 auto;
	overflow: hidden;
}

div#main {
	float: right;
	width: 550px;
}
	div#section1 {
		background: #FCC;
		height: 500px;	/* 消える領域表現の為の高さ */
	}
	div#section2 {
		background: #CCF;
		height: 500px;	/* デモなので中身無しで高さだけ */
	}

div#navi {
	float: left;
	width: 200px;
	margin-bottom: -32768px;	/* 高さを揃える */
	padding-bottom: 32768px;
	background: #CFC;
}

デモと補足

デモページ

ちょっとデモ用に要らない部分を付け足しすぎた感がありますが、そんなに難しい内容では無いので消えることだけ覚えておいて下さい。

Firefox2.0 , Safari3.1 , IE6 , IE7 で消える現象を確認。

※04/16 09:15 修正 : デモページのstyle内のコメントアウトが正しく無かったため、IEとOperaで表示出来ない不具合を修正しました。ご指摘感謝いたします。

原因

何故消えるのか、それは仕様(wuさんのコメント参照)だからです。

厳密に言うと、overflow:hidden;と言うより、下方向に指定されたパディングとネガティブマージンによる overflow:hiddenで隠れているけど存在する領域 の問題なので、包容要素にoverflow:hidden;を指定しただけでは消えることはありません。

※この問題に対する画期的な回避方法は特にありませんが、IEではdiv#mainとdiv#naviにzoom:1;を指定することで回避出来たりします。

まとめ

どうしてもページ内リンクを使いたい場合は、カラムの高さ合わせには包容要素に背景を指定する方法など、従来どおりのいわゆる正攻法を使う。

仕様を理解してても、横着するとたまにやってしまったりするかも。なメモ。

※04/17 16:47 修正 : 一部誤解を招く箇所があった為、加筆修正しました。

サンプルコード

function initRollOverImages() {
	var image_cache = new Object();
	$(".rollover a img").not("[@src*='_on.']").each(function(i) {
		var imgsrc = this.src;
		var dot = this.src.lastIndexOf('.');
		var imgsrc_on = this.src.substr(0, dot) + '_on' + this.src.substr(dot, 4);
		image_cache[this.src] = new Image();
		image_cache[this.src].src = imgsrc_on;
		$(this).hover(
			function() { this.src = imgsrc_on; },
			function() { this.src = imgsrc; }
		);
	});
}
$(document).ready(initRollOverImages);

使い方

3行目で指定した箇所の画像にマウスポインタを当てると、ファイル名に_onが付いてる画像を表示する。マウスポインタを外すと_onが付いていない画像に戻る。

以下に実装までの簡単な流れを。

1. 通常表示する画像 test.jpg とロールオーバーする画像 test_on.jpg を作成
2. jQueryの設定を記述しているファイル(又はHTMLのscript内)に上記コードを挿入
3. コード3行目の .rollover a img をCSSな記法で好きな場所に変える

こんな感じです。あら簡単。

※尚、今回ご紹介した方法は[inputにフォーカスすると消える文字をjQueryで実装する]と同様、他でjQueryを使用してる際の"おまけ"程度に考えて頂ければと思います。

オリジナルと違う点

3行目に .not("[@src*='_on.']") を追加することで、src属性で指定した画像に_onが付いている場合はロールオーバーの処理を実行しないようにしています。これにより、アクティブページなどで初めから_on付きの画像を指定したい時も、IDやCLASSを指定する必要が無くなります。

デモについて

当ブログのアーカイブページで使用されている[Read More]と言う画像は、この方法を使用してロールオーバーしています。

JavaScriptアーカイブ