iPhone 研究室（iPadもね）

iPhone向け表示用テンプレートのカスタマイズ

当サイトは CMS （コンテンツ・マネージメント・システム）として WordPress を利用しています。Wordpress は、カスタマイズはプラグインでほぼ何でもできるし、大量に配布されているテーマを使って外観を大幅に変更するのも簡単です。

当サイトの場合、PC向けの表示には aero というテーマを使って、部分的にカスタマイズしています。携帯電話のアクセスには、ktai style というプラグインを使っています。そして、iPhone / iPod touch / Android でのアクセスには、Wptouch というプラグインを使って最適化した表示を行っています。

Wptoudh の表示はカッコいいのですが、ノーマル状態ではアクセスしていただいた方にとって使い勝手が良いとは言えませんので、テーマをカスタマイズしています。

左がノーマル　右がカスタマイズ

このボタンの設置方法を教えてほしいという質問を頂きましたので、解説させていただきます。といっても、実は aero テーマのボタンを丸パクリしていますので、aero のソースをご覧になる方が参考になると思います。

まず、Wptouch テンプレートのボタンを設置したい場所に相当する部分に、リストでリンクを設置します。当サイトの場合、header.php のヘッダー下にある spacer の上に挿入しています。

<div id=”headmenu”>
<ul>
<li><a href=”http://iphone-lab.net/”>トップページ</a></li>
</ul>
</div>

id は自分がわかりやすい名前をつけます。フッター部分に設置する場合は、「footermenu」などとするのが良いと思います。

次に、style.css で、id=”headermenu” に設定した部分の表示方法を指定します。

/*++++ Header Menu +++*/
#headmenu {
font-size:14px;
letter-spacing:-1px;
font-weight:bold;
margin:0 0 2px 0;
color:#fff;
}

#headmenu a {
color:#fff;
background:#000;
padding:3px 8px 2px 8px;
margin:0 0 0 3px;

opacity: 0.65;filter:alpha(opacity=65);zoom:1;

-webkit-border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;

-khtml-border-radius-topleft:0px;
-khtml-border-radius-topright:0px;
-khtml-border-radius-bottomleft:5px;
-khtml-border-radius-bottomright:5px;

-moz-border-radius-topleft:0px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
}

#headmenu a:hover {text-decoration:none; color:#000; background:#fff;}
#headmenu ul {margin-top:0;}
#headmenu ul li {float:right;
list-style-type:none;
}

半透明にしないで不透明にしたい場合は、「opacity」の1行を削除してください。透明度を調整したい場合は、「opacity」の数値を適当に変更してください。

ボタンの角の丸みは、「xx-radius」の数値を変更します。0pxで角張ります。

その他、タグの詳細な意味をお知りになりたい方は、CSS の教科書本などを参照していただくか、ネットを検索していただくと解説しているサイトが多数見つかるかと思います。

同様のカスタマイズを考えていらっしゃる方の参考になりましたら幸いです。

iPhone 使いこなし術にもどる