Diff of PukiwikiレスポンシブSkin

The added line is THIS COLOR.
The deleted line is THIS COLOR.
Go to PukiwikiレスポンシブSkin.
Deleting diff of PukiwikiレスポンシブSkin
Pukiwikiのスキンをモバイル端末対応にした。Pukiwikiにはスマホ出現以前からUAで振り分けるガラケー用スキンはあったけども、画面サイズによって動的にCSSを切り替えていく昨今のモバイルデバイス（スマホ）対応のスキンはなかった。~
~
そもそもガラケー用ページなんか作らなくてもフルブラウザそのまま表示できるのがスマホの利点ちゃうんかったんかいと言いたいが、猫も杓子もGoogleの「スマホ対応」のお墨付きが付いててその上、先日、スマホ対応してないと検索ランキング下げるかも？とか脅してくるので（Googleが）、仕方なく対応。~

**「重大なモバイルユーザビリティ上の問題を検出」 [#w1d860e9]
 Google のシステムは、貴サイトの 129 ページをテストし、そのうちの 100% 
 に重大なモバイル ユーザビリティ上の問題を検出しました。この 129 ページ
 の問題の影響で、モバイル ユーザーは貴サイトを十分に表示して楽しむこと
 ができません。これらのページは Google 検索でモバイル フレンドリーとは
 見なされないため、スマートフォン ユーザーにはそのように表示、ランク付け
 されます。
>Google のシステムは、貴サイトの 129 ページをテストし、そのうちの 100% 
に重大なモバイル ユーザビリティ上の問題を検出しました。この 129 ページ
の問題の影響で、モバイル ユーザーは貴サイトを十分に表示して楽しむこと
ができません。これらのページは Google 検索でモバイル フレンドリーとは
見なされないため、スマートフォン ユーザーにはそのように表示、ランク付け
されます。

ていう警告メールのようなものが来た。そんなに重大な問題とは思えないんですけど、なんなんですかねえ・・・。

**方針 [#cfc5bb78]
できるだけ、いじらない。plugin、libは触らない。javascriptは使わない。cssだけでレイアウトする。スキンの修正のみで対応する。

**やったこと [#v4afd6e5]
***viewportメタタグの追加 [#w4e50cf1]
pukiwiki.skin.php
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
実際のところ、これ一行追加するだけでグーグルのモバイル対応テストはパスできそう。

***画面サイズによるレイアウトの切り替え [#i10bd52c]
横幅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;
    }
 }

***画面サイズによる画像の自動縮小 [#ed982b28]
基本的には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;
 }
こんな風になってしまったが・・・。
~
~
~
''以上！''あとは細かい修正をちょこちょこしただけ！


**確認方法 [#w99e60b0]
Googleのツールでテストすることができます。~
https://www.google.com/webmasters/tools/mobile-friendly/

----
[[CategoryPukiwiki]]