第四演出室/PukiWikiレスポンシブ設定
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
]
開始行:
#navi(第四演出室)
[[第四演出室/PHP 7.4.3]]
*PukiWikiレスポンシブ設定 [#xb81878b]
❶pukiwiki-rspnsv.css
pukiwiki-rspnsv.cssとして保存し、「skin」フォルダにUP
@charset "utf-8";
/* PukiWikiレスポンシブ設定 */
/* コンテンツ(メニューバー+ページ本体)全体 */
div#contents {
display: table; /* 表示をテーブ...
table-layout: fixed; /* テーブル列幅...
border-spacing: 8px; 0; /* 隣接セル間隔...
width: 100%; /* 幅100% */
}
/* メニューバー*/
div#menubar {
display: table-cell; /* 表示をテーブ...
vertical-align: top; /* 上端揃え */
width: 105px; /* 幅105ピクセ...
}
/* ページ本体 */
div#body {
display: table-cell; /* 表示をテーブ...
}
/* 低解像度(スマホ等)メディアクエリ */
@media (max-width: 800px) { /* 横幅800ピク...
div#contents {
display: table; /* 表示をテーブ...
table-layout: fixed; /* テーブル列幅...
border-spacing: 8px; 0; /* 隣接セル間隔...
width: 100%; /* 幅100% */
}
div#menubar {
display: table-footer-group; /* 表示をテーブ...
width: 100%; /* 幅100% */
}
div#body {
display: table-row-group; /* 表示をテーブ...
width: 100%; /* 幅100% */
}
}
/* ページ本体の画像のレスポンシブ設定 */
div#body img {
max-width: 100%; /* 幅の最大値を...
height: auto; /* 縦は幅により...
}
➋あと skin\pukiwiki.skin.php を少しいじる
//https://dajya-ranger.com/pukiwiki/make-responsive-design/
viewportメタタグの追加
<head>
<meta http-equiv="Content-Type" content="text/html; char...
<meta name="viewport" content="width=device-width, initi...
pukiwiki-rspnsv.cssの組み込み
<link rel="manifest" href="/favicons/manifest.json">
<link rel="stylesheet" type="text/css" href="<?php echo ...
<link rel="stylesheet" type="text/css" href="<?php echo ...
ボディ部の構成を変更する
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 } ?>
*Add [#da84a8cf]
2020/10/01 PukiWiki 1.5.3 でスマホ用スキン内臓
やっぱし画像崩れたわ
PukiWiki 1.5.3 でスマホ用スキン内臓、いらなくなったかな
#navi(第四演出室)
終了行:
#navi(第四演出室)
[[第四演出室/PHP 7.4.3]]
*PukiWikiレスポンシブ設定 [#xb81878b]
❶pukiwiki-rspnsv.css
pukiwiki-rspnsv.cssとして保存し、「skin」フォルダにUP
@charset "utf-8";
/* PukiWikiレスポンシブ設定 */
/* コンテンツ(メニューバー+ページ本体)全体 */
div#contents {
display: table; /* 表示をテーブ...
table-layout: fixed; /* テーブル列幅...
border-spacing: 8px; 0; /* 隣接セル間隔...
width: 100%; /* 幅100% */
}
/* メニューバー*/
div#menubar {
display: table-cell; /* 表示をテーブ...
vertical-align: top; /* 上端揃え */
width: 105px; /* 幅105ピクセ...
}
/* ページ本体 */
div#body {
display: table-cell; /* 表示をテーブ...
}
/* 低解像度(スマホ等)メディアクエリ */
@media (max-width: 800px) { /* 横幅800ピク...
div#contents {
display: table; /* 表示をテーブ...
table-layout: fixed; /* テーブル列幅...
border-spacing: 8px; 0; /* 隣接セル間隔...
width: 100%; /* 幅100% */
}
div#menubar {
display: table-footer-group; /* 表示をテーブ...
width: 100%; /* 幅100% */
}
div#body {
display: table-row-group; /* 表示をテーブ...
width: 100%; /* 幅100% */
}
}
/* ページ本体の画像のレスポンシブ設定 */
div#body img {
max-width: 100%; /* 幅の最大値を...
height: auto; /* 縦は幅により...
}
➋あと skin\pukiwiki.skin.php を少しいじる
//https://dajya-ranger.com/pukiwiki/make-responsive-design/
viewportメタタグの追加
<head>
<meta http-equiv="Content-Type" content="text/html; char...
<meta name="viewport" content="width=device-width, initi...
pukiwiki-rspnsv.cssの組み込み
<link rel="manifest" href="/favicons/manifest.json">
<link rel="stylesheet" type="text/css" href="<?php echo ...
<link rel="stylesheet" type="text/css" href="<?php echo ...
ボディ部の構成を変更する
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 } ?>
*Add [#da84a8cf]
2020/10/01 PukiWiki 1.5.3 でスマホ用スキン内臓
やっぱし画像崩れたわ
PukiWiki 1.5.3 でスマホ用スキン内臓、いらなくなったかな
#navi(第四演出室)
ページ名: