![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
❶pukiwiki-rspnsv.css
pukiwiki-rspnsv.cssとして保存し、「skin」フォルダにUP
@charset "utf-8";
/* PukiWikiレスポンシブ設定 */
/* コンテンツ（メニューバー＋ページ本体）全体 */
div#contents {
display: table; /* 表示をテーブル（TABLE要素）同様にする */
table-layout: fixed; /* テーブル列幅固定 */
border-spacing: 8px; 0; /* 隣接セル間隔：左右8ピクセル */
width: 100%; /* 幅100％ */
}
/* メニューバー*/
div#menubar {
display: table-cell; /* 表示をテーブルセル（TD要素）同様にする */
vertical-align: top; /* 上端揃え */
width: 105px; /* 幅105ピクセル（オリジナルとほぼ同様サイズ：任意の数字） */
}
/* ページ本体 */
div#body {
display: table-cell; /* 表示をテーブルセル（TD要素）同様にする */
}
/* 低解像度（スマホ等）メディアクエリ */
@media (max-width: 800px) { /* 横幅800ピクセル以下のデバイス */
div#contents {
display: table; /* 表示をテーブル（TABLE要素）同様にする */
table-layout: fixed; /* テーブル列幅固定 */
border-spacing: 8px; 0; /* 隣接セル間隔：左右8ピクセル */
width: 100%; /* 幅100％ */
}
div#menubar {
display: table-footer-group; /* 表示をテーブルフッタ（TFOOT要素）同様にする */
width: 100%; /* 幅100％ */
}
div#body {
display: table-row-group; /* 表示をテーブルボディ（TBODY要素）同様にする */
width: 100%; /* 幅100％ */
}
}
/* ページ本体の画像のレスポンシブ設定 */
div#body img {
max-width: 100%; /* 幅の最大値を100％指定 */
height: auto; /* 縦は幅により自動設定 */
}
➋あと skin\pukiwiki.skin.php を少しいじる
viewportメタタグの追加
<head> <meta http-equiv="Content-Type" content="text/html; charset=<?php echo CONTENT_CHARSET ?>" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
pukiwiki-rspnsv.cssの組み込み
<link rel="manifest" href="/favicons/manifest.json">
<link rel="stylesheet" type="text/css" href="<?php echo SKIN_DIR ?>pukiwiki.css" /> <link rel="stylesheet" type="text/css" href="<?php echo SKIN_DIR ?>pukiwiki-rspnsv.css" />
ボディ部の構成を変更する
skin\pukiwiki.skin.php（修正前）
<?php if ($menu !== FALSE) { ?>
<table border="0" style="width:100%">
<tr>
<td class="menubar">
<div id="menubar"><?php echo $menu ?></div>
</td>
<td valign="top">
<div id="body"><?php echo $body ?></div>
</td>
</tr>
</table>
<?php } else { ?>
<div id="body"><?php echo $body ?></div>
<?php } ?>
skin\pukiwiki.skin.php（修正後）
<?php if ($menu !== FALSE) { ?>
<!-- ボディ部の構成を変更 -->
<div id="contents">
<div id="menubar"><?php echo $menu ?></div>
<div id="body"><?php echo $body ?></div>
</div>
<?php } else { ?>
<div id="body"><?php echo $body ?></div>
<?php } ?>
2020/10/01 PukiWiki 1.5.3 でスマホ用スキン内臓 やっぱし画像崩れたわ
PukiWiki 1.5.3 でスマホ用スキン内臓、いらなくなったかな
