携帯端末対策

はてなダイアリで携帯端末にやさしくする CSS を追加してみた。出来るだけ丁寧に解説してみる。
はてなダイアリの管理からデザイン、詳細を開き、ページのヘッダの中味の最初と最後に以下の記述を追加する。

<div class="mobileskip">
・・・
</div>

同ページの「スタイルシート」に、以下の記述を追加する。

@media handheld{
div.mobileskip, table#banner{display:none}
}

待てよ。

インターネット接続機能付きの携帯電話からはてなダイアリーのページ（パソコンからアクセスする時と同じURL）にアクセスすると、自動的にモバイル版（携帯版）ページが表示されます。

こんな余計な仕掛けがはてなにはあったのか。ここなら http://d.hatena.ne.jp/saiton/mobile だったか。ともかく、この仕掛けははてな以外のページのモバイル最適化に使えるかも

• しかし、上記 /mobile を開いて驚いた。カタカナが半角仮名になっている。気持ち悪い。
• 開いてみれば分かる、/mobile のソースは WAP クオリティ。自分では決して使いたくない。
• 無料利用なのに、はてなのバナーを外して問題ないのか。/mobile では表示されないのだから、デスクトップで消さなければ問題なかろう。

いや待て。少なくとも Opera Mini では /mobile をデフォルトでは表示しない。ここの右上バナーから確認すると分かるが、最初に表示するのは以下の左側の絵だろう。はてなが用意した /mobile をわざわざ表示させてみると、右側のようになる。

はてなが言う「インターネット接続機能付きの携帯電話」に Opera Mini は含まれないようだ。
追加したモバイル向け CSS 指定を一旦外して Opera Mini で表示させると、以下のようになる。

最初に表示されるのが、巨大なバナー。スクロールさせるとデスクトップ用バナーとリンク、そうしてようやく本文、となる。繰り返すが、上記 CSS を追記して Opera Mini で開くと、一つ上の左側の画面がスクロールさせる前の最初に表示される。この差は大きい。指定は無駄ではないと確認出来た。

• One Web for All にした方が資源節約になるでしょう。/mobile は .mobi と同じく無駄です。