ブログの内容的にスマホからの流入からのアクセスがどうとか言えるレベルでもない当サイトですが…
スマホでPC用のページを見ても見にくくなければスマホ用のページを作る必要もないとは思うのですが、サイドバーを設けてる2カラムのサイトは基本見にくいかなと思います。そんな訳でスマートフォン対応させました。
コーディング時、PHP埋め込みなどに引っかかた事や注意点などを備忘録としてまとめておきます。

※レスポンシブ対応ではありません、PV用とスマホ用のテーマを2つ作成して、端末ごとに割り振っています。
※端末切り替えはWordpressプラグインの「Multi Device Switcher」を使用しています。

viewport設定

【今回設定したviewportプロパティは以下】

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

width=device-width

横幅はデバイスに合わせる

initial-scale=1.0

倍率の初期値の設定は1.0（100％）

minimum-scale=1.0

倍率の最小値の設定は1.0（100％）

maximum-scale=1.0

倍率の最大値の設定は1.0（100％）

user-scalable=no

拡大・縮小（ピンチイン・ピンチアウト）はなし

その他viewportの設定については以下のサイトを参考にさせていただきましたm(__)m
【これを知ってはじめてスタートライン！！スマートフォンコーディング基礎知識】

横幅の指定

スマホは縦向きと横向きで横幅が変わるので、基本widthをpx指定が出来ません。
横幅が可変するリキッドレイアウトに感覚が近いです。

【今回指定した土台はこんな感じ】

body{
     min-width: 320px;
}


#wrapper{
     width: 100%;
     margin:0 auto;
     padding:0;
}

「#wrapper」の100％を軸に階層ページを作っていきます。

例えば、header部分のロゴとナビゲーションボタンの2BOXレイアウトも横幅はpx指定はせず、floatのleftとrightを使いました。

h1#toptitle {
float: left;
padding-left: 10px;
}

#menu_btn {
display: block;
cursor: pointer;
float: right;
margin: 0;
padding: 10px 20px 0;
}

このままでは、真ん中に空きがあれば中央にコンテンツが潜り込んでくるので、「clearfix」の指定をする必要があります。今回はすぐ下にサイトの解説のテキストを設けたのでコイツを「clear:both」します。

p.top_comments {
clear: both;
font-size: 0.7em;
text-align: center;
}

ナビゲーションメニューを3つ並べたりする場合は、「width:33%」とかで％で指定します。

画像作成時と表示方法の注意

iphone基準のお話ですが最近のスマホはRetinaディスプレイで高解像度なので320px✕480pxを基準に作成すると、画像が荒れます。倍ぐらいの画像サイズで作成する必要があります。
つまり、Photoshopで画像中心のサイトを作る時は特に「320✕480」で作成するのではなく、「640✕960」で作成する必要があります。
※iphone5は縦幅が増えてるので「640✕1136」を基準に作成します。
※僕のブログは画像をあんまり使わないのでIllustratorでデザインしました。

【HTML】で画像指定する場合

<!--倍の180✕130で作成した画像-->
<img src="img/logo.png" width="90" height="65" />

【CSS】で画像指定する場合

<!--倍の180✕130で作成した画像-->
{
background: url(img/logo.png) no-repeat;
background-size: 90px 65px;
}

【Wordpress】のアイキャッチでサイズ指定する場合

<!--表示させたいサイズを指定-->
<?php the_post_thumbnail(array(100,100)); ?>

【ブログ記事で画像がはみ出る場合の対処法】
PC画像とサイズが違うので、CSSで指定します。

img {
     max-width: 100%;
     height: auto;
     }

ナビゲーションメニューのデザイン

スマホの表示領域はPCと比べ物にならないぐらい少ないので、ナビゲーションメニューのレイアウトは迷います。今回コンテンツ（ナビゲーションボタンの数）は増えることも見越して作る必要があったので、クリックしたら開く「ドロワーメニュー」にしました。
Jqueryのプラグインも考えたのですが、簡単なJqueryコードの「slideToggle」で作成しました。

【Javascript】

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
  (function($){
    $(function(){
        $("#menu_btn").on("click", function() {
            $("#acMenu").slideToggle(200); //数値は好みに応じて変える
        });
    });
  })(jQuery);
</script>

【HTML】

<div id="menu_btn"><img src="img/menu_sample.png" alt="" /></div>
<nav id="acMenu">
<ul id="head_menu">
<li><a href="">カテゴリ01</a></li>
<li><a href="">カテゴリ02</a></li>
<li><a href="">カテゴリ03</a></li>
<li><a href="">カテゴリ04</a></li>
</ul>
</nav>

【CSS】

#menu_btn{
    display:block;
    cursor:pointer;
    float: right;
     margin: 0;
     padding: 10px 20px 0;  
}


#acMenu{
    display:none;
    clear: both;
    padding-right:10px;
    margin:0;
}

#acMenu ul#head_menu{
     display: block;    
     float: right;
     margin:0;
}

#acMenu ul#head_menu li{
    background-color: #f76382;
    position: relative;
    border-bottom: solid 1px white;
    width:280px;
    line-height: 50px;
    padding-left: 20px;
}

li a{
    color:#fff;
}

「#menu_btn」をクリック（タップ）すれば、「#acMenu」を開けと命令
開く命令をされるまでは「#acMenu」は「display:none;」で非表示にしています。クリック（タップ）で「display:block;」に変更されるという動きですね。

まとめ

まだまだ試してみたい事はたくさんあるのですが、一番簡単にスマホページを作成するにはどうすればいいか考えたらこんな感じになりました。というのも、今回はブログサイトなんで見た目の作り込みが最小限で済みますが、自分的にはもっと細かい部分を作りこんでいきたい気持ちです。
スマホのUIはいかに少ない領域で情報を伝えるかが勝負になります。
スマホサイトの需要は今後ドンドン増えてくるので乗り遅れないようしていかないといけませね(・∀・)