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/ウェブリブログで紹介されている記事ををベースに、カスタマイズしてみます。

iPhone 用 JavaScript テンプレート

記事にある、iPhone 用 JavaScript テンプレート は、Media Queries のみを利用してデバイスを振り分けるので、今回は使用しません。

iPhone 用 CSS テンプレート

iPhone 用 CSS テンプレート の冒頭には次の2行を加えて、デフォルトのスタイルシートを上書きするようにします。

@import url(<$mt:StaticWebPath$>themes-base/blog.css);
@import url(<$mt:StaticWebPath$>themes/minimalist-red/screen.css);

次に、以下のスタイルを追記します。上書きしているのは、もとのスタイルとの比較がしやすいようにですが、全くゼロから書いてもいいと思います。以前にも書いたように、メインのサイトは、既定のブログとは全くテンプレート構造が違うので、ゼロから書きおこしていますが、メンテナンスもかねてチャレンジしてみてはいかがでしょうか。

なお、スマートフォン向けのサイトの多くが、トップべーじはタイトルくらいしかないのが一般的なようなので、ここでもそうしています。

body {
  width: 100%;
  font-size: 16px;
  margin: 0;
  padding: 0;
}
#content { 
   margin-top: 10px;  
   margin-bottom: 10px;  
}
#header-inner, #content-inner, #footer-inner {
  padding-top: 10px;
  padding-bottom: 10px;
}
#alpha-inner, #beta-inner, #gamma-inner {
  padding-right: 10px;
  padding-left: 10px;
}
#header-name {
  font-size: 22px;
}
#header-description {
  padding-right: 30px;
}
.archive-title {
  font-size: 20px;
}
.asset-name {
  font-size: 20px;
}
.mt-main-index .asset-name,
.mt-archive-listing .asset-name {
  font-size: 18px;
}
h3 {
  font-size: 16px;
  border-left: 6px solid #ccc;
  padding: 1px 0 1px 6px;
}
#header-content ul {
  display: none; 
}
.asset-header,
.asset-content {
  margin: 0 0;
  padding: 10px;
}
.mt-main-index .asset,
.mt-archive-listing .asset {
  border: 1px solid #ccc;
  -webkit-border-radius: 5px; /* Safari,Google Chrome */
  -moz-border-radius: 5px; /* Firefox */
  margin-bottom: 0.5em;
}
.mt-main-index .asset-header,
.mt-archive-listing .asset-header {
}
.mt-main-index .asset-content,
.mt-main-index .author,
.mt-main-index .separator {
  display: none;
}
.mt-archive-listing .asset-content,
.mt-archive-listing .author,
.mt-archive-listing .separator {
  display: none;
}
.mt-main-index .asset-footer,
.mt-archive-listing .asset-footer {
  border-top: none;
}
.asset-meta {
  margin-top: 0;
  padding-top: 2px;
  padding-bottom: 0;
}
.asset-footer {
  clear: both;
  margin-top: 0;
  padding-top: 0;
}
.widget-header { 
  font-size: 17px; 
  margin: 0;
  padding: 4px 2px;
}
.widget-content {
  font-size: 14px;
  margin: 0;
  padding: 0 10px;
}
.archive-content ul,
.widget-content ul {
  font-size: 15px;
  margin: 10px;
  padding: 10px;
  list-style: disc;
}
.widget-about-this-page .first {
  display: none;
}
.widget-recent-comments,
.widget-recent-assets,
.widget-tag-cloud,
.widget-pages {
  display: none;
}
code {
  font-size: 14px;
  background: #f6f6f6;
  color: #333;
  white-space: pre-wrap;
  overflow: auto;
}
em {
  font-style: normal;
}
cite {
  font-weight: bold;
}
q {
  background: #e6e6e6;
}
blockquote {
  border: solid 1px #999;
  padding: 10px;
}
table {
  font-size: 14px;
  border-collapse: collapse;
  border: solid 1px #999;
  margin-bottom: 20px;
  word-break: break-all;
  overflow: auto;
}
caption {
  text-align: left;
  padding-bottom: 4px;
}
th {
  background: #e6e6e6;
  color: #222;
  font-weight: normal; 
  border: solid 1px #999;
  padding: 4px;
}
td {
  border: solid 1px #999;
  padding: 4px;
}

「JavaScript・CSS を読み込む」部分の変更

JavaScriptは今回使用しないので、HTMLヘッダーテンプレートの

<link rel="stylesheet" href="<$mt:Link template="styles"$>" type="text/css" />

を、次のように書き換えます。

minimum-scale=1.0, maximum-scale=1.0

<!--[if IE]><link rel="stylesheet" href="<$mt:Link template="styles"$>" type="text/css" media="screen,print" /><![endif]-->
<![if !IE]><link rel="stylesheet" href="<$mt:Link template="styles"$>" type="text/css" media="print,tv,screen and (min-device-width: 481px)" /><![endif]>
<link rel="stylesheet" href="<$mt:BlogURL$>iphone.css" type="text/css" media="only screen and (max-device-width: 480px)" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />

最後に、アドレスバーを隠すための処理を、バナーフッターテンプレートに入れます。

<script type="text/javascript">
/* <![CDATA[ */
window.onload = function() {
  if( (navigator.userAgent.match(/iPhone/i)) ||
    (navigator.userAgent.match(/iPod/i)) ||
    (navigator.userAgent.match(/iPad/i)) ) {
      setTimeout(scrollTo, 100, 0, 1);
    }
  else if (navigator.userAgent.match(/Android/i)) {
    window.scrollTo(0,1);
  }
}
/* ]]> */
</script>

これで、再構築するとスマートフォン対応サイトの完成です。

Tweet