第四演出室/PukiWikiレスポンシブ設定の変更点

追加された行はこの色です。
削除された行はこの色です。
第四演出室/PukiWikiレスポンシブ設定へ行く。
#author("2020-10-02T08:26:54+09:00","","")
#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(第四演出室)
第四演出室/PukiWikiレスポンシブ設定 の変更点

第四演出室/PukiWikiレスポンシブ設定の変更点
