web デザインの最近のブログ記事

メインページ

CSS3で採用されたMedia Queriesを利用して、スマートフォン（iPhone・Android）とPCのスタイルシート（CSS）を振り分ける方法については、メリット、デメリットがありますが、デバイスのOSやUAが何であるかよりも、どのような解像度や画面の大きさでサイトを見るという観点に立てば、こちらのほうがメリットがあると思っています。

デメリットとしては、PC向けサイトをそのまま利用して、不必要なところを"display: none;で"非表示にしているだけなので、レンダリングされなくても、ソースそのものは変わらないので、スマートフォン向けにテンプレートをシンプルにしたものに比べればパケットが多くなることでしょうか。

前々回の記事では、iPhone(スマートフォン)対応テンプレート cssTouch for MT(Movable Type)のテンプレートを利用した方法を紹介しましたが、商業利用が有償であることや、もう少しプレーンなスタイルが欲しかったので、今回は、MovableType (MT4)のブログをJS・CSSのみでiPhoneに対応させる Kawanet Tech Blog/ウェブリブログで紹介されている記事ををベースに、カスタマイズしてみます。

スタイルシートの追加

スマートフォンは表示領域が小さく、pre要素とcode要素からはみ出した内容が表示されないままなので、次のスタイルを追加しました。

Movable Typeをスマートフォンに対応させるには、CSS3で採用されたMedia Queriesと、Viewportでデバイスを振り分けるアプローチもあります。

フッタ（cremaバージョン）

「iPhoneテンプレートfor MT」でスマートフォン対応にという記事の続きです。

カスタマイズというほどではありませんが、カテゴリリストを追加して見ました。

自分自身がスマートフォンに戻したこともあって、このサイトも、crema designさんの「iPhoneテンプレートfor MT」でスマートフォン対応にしてみました。

ポイントは、iUIという、iPhone向けサイトのUIを提供するライブラリを使うことなんですが、若干、iUIに癖があるので覚書。

jQueryを使って、外部サイトへのリンクにtarget=_blankを追加する仕様にしました。

外部へのリンクにtarget=_blank属性を付けることはアクセシビリティの観点から望ましくない。つまり、別ウインドウで開くかどうかはユーザーが判断すべきとされてきましたが、これだけタブブラウザが普及するとかえってアクセシビリティ上よろしくないという気がします。

サイドバーの最新記事リストについては、小粋空間さんで紹介されている、「Ajax によるモジュール化（jQuery版）」を利用していますが、maRkのMyOwnよりさんで「jQuery.ajaxでモジュール読み込み」というのが紹介されていました。

jQuery.loadではなく、jQuery.ajax()という関数を使うようです。

解説サイト

• テスト：jQuery.ajaxでモジュール読み込み « maRkのMyOwn

サイドバーの最新記事を「Ajax によるモジュール化」により行っていましたが、zenbackを導入したのをきっかけに、jQuery版に変更してみました。

zenbackは、prototypeとの相性が悪く、Firefoxなど主要なブラウザでは問題なく表示されても、Internet Explorerではエラーとなります。

【2010-12-26 追記その1】

本家本元の小粋空間さんへコメント欄でリクエストしたところ早速、Ajaxによるモジュール化（jQuery版）: 小粋空間という記事が掲載されました。ありがとうございます。

小粋空間のjQuery版のajaxUtil.jsは次の通りです。

function getFile(url, id) {
    jQuery.ajaxSetup({
        cache: false
    });
    jQuery('#'+id).load(url);
}

【2010-12-26 追記その2】

以下の以前の記事はそのまま掲載しておきます。

組み込んでいるスクリプトをjquery版に入れ替えているのですが、「Ajax によるモジュール化」で使われているajaxUtil.jsには、jquery版が無いので、jquery暫定対応版を作ってみました。

function getFile(url) {
    url = url + "?" + Math.random();
    $.ajaxSetup({
        cache: false
    });
    $("#entries").load(url, function(text, status) {
        if (status == 'success') {
            endProcess();
        } else {
            errorProcess();
        }
    });
}
　
function endProcess() {
    var value = document.getElementById('entries');
}
　
function errorProcess() {
    $("#entries").html() = 'File Not Found';
}

関連エントリー

• サイドバーの最新記事を「Ajax によるモジュール化」に変更

Youtube の貼り付け用 HTML は valid にならないので、小粋空間さんの「Youtube の貼り付け用 HTML を valid にするスクリプト」を使っています。

こちらのサイトでは、様々なスクリプトやMovable Typeプラグインを紹介されています。

紹介サイト

• 小粋空間: Youtube の貼り付け用 HTML を valid にするスクリプト

zenbackなるwebサービスのブログパーツを貼り付けてみました。

関連記事、関連リンク、Twitterのタイムライン、はてなブックマーク、アクセス元と、
ソーシャル・ボタンとして、ツイートボタン、はてなブックマーク、mixiチェック、Evernoteサイトメモリー、Facebook「いいね！」ボタンが表示されます。

ブログ記事での表示例