PukiwikiレスポンシブSkin をテンプレートにして作成

Start:
Pukiwikiのスキンをモバイル端末対応にした。Pukiwikiにはス... ~ そもそもガラケー用ページなんか作らなくてもフルブラウザそ... **「重大なモバイルユーザビリティ上の問題を検出」 [#w1d860... >Google のシステムは、貴サイトの 129 ページをテストし、そ... に重大なモバイル ユーザビリティ上の問題を検出しました。こ... の問題の影響で、モバイル ユーザーは貴サイトを十分に表示し... ができません。これらのページは Google 検索でモバイル フレ... 見なされないため、スマートフォン ユーザーにはそのように表... されます。 ていう警告メールのようなものが来た。そんなに重大な問題と... **方針 [#cfc5bb78] できるだけ、いじらない。plugin、libは触らない。javascript... **やったこと [#v4afd6e5] ***viewportメタタグの追加 [#w4e50cf1] pukiwiki.skin.php <meta name="viewport" content="width=device-width, initi... 実際のところ、これ一行追加するだけでグーグルのモバイル対... ***画面サイズによるレイアウトの切り替え [#i10bd52c] 横幅480pxまでは一段組でメニューはコンテンツの下に表示する... pukiwiki.skin.phpのレイアウト構成 <div id="contents"> <div id="menubar">...</div> <div id="body">...</div> </div> contents内にmenubar(左)とbody(本文)を配置し、これをcssのd... 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]]

End:
Pukiwikiのスキンをモバイル端末対応にした。Pukiwikiにはス... ~ そもそもガラケー用ページなんか作らなくてもフルブラウザそ... **「重大なモバイルユーザビリティ上の問題を検出」 [#w1d860... >Google のシステムは、貴サイトの 129 ページをテストし、そ... に重大なモバイル ユーザビリティ上の問題を検出しました。こ... の問題の影響で、モバイル ユーザーは貴サイトを十分に表示し... ができません。これらのページは Google 検索でモバイル フレ... 見なされないため、スマートフォン ユーザーにはそのように表... されます。 ていう警告メールのようなものが来た。そんなに重大な問題と... **方針 [#cfc5bb78] できるだけ、いじらない。plugin、libは触らない。javascript... **やったこと [#v4afd6e5] ***viewportメタタグの追加 [#w4e50cf1] pukiwiki.skin.php <meta name="viewport" content="width=device-width, initi... 実際のところ、これ一行追加するだけでグーグルのモバイル対... ***画面サイズによるレイアウトの切り替え [#i10bd52c] 横幅480pxまでは一段組でメニューはコンテンツの下に表示する... pukiwiki.skin.phpのレイアウト構成 <div id="contents"> <div id="menubar">...</div> <div id="body">...</div> </div> contents内にmenubar(左)とbody(本文)を配置し、これをcssのd... 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]]

Page: