スマートフォン対応サイト制作日誌 I ～ロゴの追加～

知ってる人は知ってると思いますが、Xperia非公式マニュアルにはスマートフォン対応サイトがあります。
で、実はこれ、いま調べてみたら2010年9月に作ってるのね・・・→Xperia非公式マニュアル for スマートフォン（β版）

こんな殺風景シンプルなやつ。

このスマートフォン対応版は「iPhoneテンプレートfor MT」というテンプレートを使って自動生成しているのですが、
この度、スマートフォンメディア研究員というものに巻き込まれた大役を仰せつかったので、
重い腰を上げてリニューアル等々に取り組んでみようかと。

まずはロゴの追加。

こんな感じでサイトのロゴを配置してみるだけで、かなり印象が変わります。

このやり方は、「iui.css」ファイル内の

body > .toolbar {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-bottom: 1px solid #2d3642;
border-top: 1px solid #6d84a2;
padding: 6px;
height: 45px;
background: url(toolbar.png) #6d84a2 repeat-x;
}

の部分を

body > .toolbar {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-bottom: 1px solid #2d3642;
border-top: 1px solid #6d84a2;
padding: 6px;
height: 77px;
background: url(ヘッダー画像を置いてあるURL) no-repeat;
}

に置き換えています。heightの数値は画像の大きさに合わせて調整しています。
続いて「style.css」ファイル内の

p#logo {
background: #6d84a2 url(../img/header_bg.png) repeat-x left top;
padding: 15px;
text-align: center;
}

の部分を

p#logo {
background: url(ヘッダー画像を置いてあるURL) no-repeat left top;
padding: 40px;
text-align: center;
}

に置き換えています。paddingの数値は画像の大きさに合わせて調整しています。

やってみると意外と簡単ですので、
MovableType＆iPhoneテンプレートfor MTを利用している人は試してみてください。

次回はカテゴリアーカイブの追加についてです。