Pukiwikiのスキンをモバイル端末対応にした。Pukiwikiにはスマホ出現以前からUAで振り分けるガラケー用スキンはあったけども、画面サイズによって動的にCSSを切り替えていく昨今のモバイルデバイス（スマホ）対応のスキンはなかった。
そもそもガラケー用ページなんか作らなくてもフルブラウザそのまま表示できるのがスマホの利点ちゃうんかったんかいと言いたいが、猫も杓子もGoogleの「スマホ対応」のお墨付きが付いててその上、先日、スマホ対応してないと検索ランキング下げるかも？とか脅してくるので（Googleが）、仕方なく対応。
Google のシステムは、貴サイトの 129 ページをテストし、そのうちの 100% に重大なモバイル ユーザビリティ上の問題を検出しました。この 129 ページ の問題の影響で、モバイル ユーザーは貴サイトを十分に表示して楽しむこと ができません。これらのページは Google 検索でモバイル フレンドリーとは 見なされないため、スマートフォン ユーザーにはそのように表示、ランク付け されます。
ていう警告メールのようなものが来た。そんなに重大な問題とは思えないんですけど、なんなんですかねえ・・・。
できるだけ、いじらない。plugin、libは触らない。javascriptは使わない。cssだけでレイアウトする。スキンの修正のみで対応する。
pukiwiki.skin.php
<meta name="viewport" content="width=device-width, initial-scale=1.0">
実際のところ、これ一行追加するだけでグーグルのモバイル対応テストはパスできそう。
横幅480pxまでは一段組でメニューはコンテンツの下に表示する。481px以上は二段組で左メニューは固定幅とし、右側コンテンツは画面サイズによって可変とする。画面の横幅は800pxを最大とし、それ以上は拡大させない。
pukiwiki.skin.phpのレイアウト構成
<div id="contents">
<div id="menubar">...</div>
<div id="body">...</div>
</div>
contents内にmenubar(左)とbody(本文)を配置し、これをcssのdisplayプロパティのtableで二段組と一段組を切り替える。一段組みの時はbody(本文)、menubar(下)にする。
default.cssの要約ではこんな感じ
@media (max-width: 480px)
{
div#contents
{
display:table;
table-layout:fixed;
width:100%;
}
div#menubar
{
display:table-footer-group;
width:100%;
}
div#body
{
display:table-row-group;
width:100%;
}
}
@media (min-width: 481px)
{
div#contents
{
display:table;
table-layout:fixed;
width:100%;
}
div#menubar
{
display:table-cell;
vertical-align:top;
width:120px;
}
div#body
{
display:table-cell;
}
}
@media (min-width: 800px)
{
body
{
max-width: 800px;
}
}
基本的にはcssのmax-widthを設定するだけ。
div#body img
{
max-width:100%;
height:auto;
}
みたいな。実際にはセレクタはそのつどページを確認しながら付けていったので
div#body>p>a>img,
div.img_margin>a>img,
div.img_margin>img
{
max-width:100%;
height:auto;
}
こんな風になってしまったが・・・。
以上！あとは細かい修正をちょこちょこしただけ！
Googleのツールでテストすることができます。
https://www.google.com/webmasters/tools/mobile-friendly/