「Cms/pukiwiki/monobookレスポンシブ化」の版間の差分

2015年5月20日 (水) 08:05時点における最新版

pukiwikiのmonobookテーマをレスポンシブにします。

monobookスキン以外でも概念は同じなのでこんな感じで組み込めば良い。

bootstrapのcssを追加

• monobook.skin.php

headタグ内に追加

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo SKIN_DIR ?>monobook/bootstrap_return.css" />

bootstrapしたが故の変更を戻すcss

• bootstrap_return.css

body {
       font: x-small sans-serif;
       background: #f9f9f9 url(headbg.jpg) 0 0 no-repeat;
       color: black;
}
@media (max-width: 991px) {
     #main-column {
       margin-left: 0em;
     }
     #menubar-footer {
       font-size:16px
     }
}

menubarをスマホ時に隠す

hidden-xs hidden-smを以下場所に追加

<div id="globalWrapper">
 <div class="hidden-xs hidden-sm">
   <div id="menubar">
   <?php echo $menu ?>
   </div>
 </div>
 <div>

navigaterをスマホ時に隠す

hidden-xs hidden-smを以下場所に追加

<div class="hidden-xs hidden-sm">
  <?php echo $navigation_tab ?>
</div>

コンテンツフッターにスマホ時にメニューを表示

  </div>
 </div>
</div>
<!-- add -->
<div class="visible-xs-block visible-sm-block">
  <div id="menubar-footer">
   <?php echo $menu ?>
  </div>
</div>
<!-- /add -->
<?php if($side) echo '<div id="sidebar">' . $side . '</div>' ?>

フッターは幅がでかいのでスマホ時に消す

footerをhidden-xs hidden-smで囲む

<div class="hidden-xs hidden-sm">
 <div id="footer">
 略

スマホ時のコンテンツフッターにページタイトルを追加

  </div>
 </div>
</div>
<!-- add -->
<div class="visible-xs-block visible-sm-block" align="center">
     メニュー<br />
     <?php echo $bread_title ?>
     <hr />
</div>
<!-- /add -->