第四演出室/PukiWikiレスポンシブ設定
の編集
http://yuma.exp.jp/?%E7%AC%AC%E5%9B%9B%E6%BC%94%E5%87%BA%E5%AE%A4/PukiWiki%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96%E8%A8%AD%E5%AE%9A
[
トップ
] [
編集
|
差分
|
履歴
|
添付
|
リロード
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
]
-- 雛形とするページ --
(no template pages)
#navi(第四演出室) [[第四演出室/PHP 7.4.3]] *PukiWikiレスポンシブ設定 [#xb81878b] ❶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 を少しいじる //https://dajya-ranger.com/pukiwiki/make-responsive-design/ 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 } ?> *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要素)同様にする */ 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 を少しいじる //https://dajya-ranger.com/pukiwiki/make-responsive-design/ 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 } ?> *Add [#da84a8cf] 2020/10/01 PukiWiki 1.5.3 でスマホ用スキン内臓 やっぱし画像崩れたわ PukiWiki 1.5.3 でスマホ用スキン内臓、いらなくなったかな #navi(第四演出室)
テキスト整形のルールを表示する