目次

「テンプレート」に戻る

DokuWikiで、画面サイズに合わせてカラム数を変えるフッター


目次


概要

DokuWikiでフッターを利用する場合、PCの時とスマホでデザインを変えたいので、調査しました。
大きい画面では3カラム、中くらいの画面では2カラム、小さい画面では1カラムにするレイアウトです。

tpl_footer.php

<?php
/**
 * Template footer, included in the main and detail files
 */
 
// must be run from within DokuWiki
if (!defined('DOKU_INC')) die();
?>
 
<!-- ********** FOOTER ********** -->
<div id="dokuwiki__footer"><div class="pad">
 
</div></div><!-- /footer -->
<?php include('footer.php'); ?>
 
<?php
tpl_includeFile('footer.html');


footer.php

<style type="text/css">
.fwrapper{
   margin-left: -500%;
   margin-right: -500%;
   padding-left: 500%;
   padding-right: 500%;
   background-color: #557697;
}

.footer{
  color: #ffffff;
  max-width: 100%;
  padding: 2px;
}
.footer a { color: #ffffff ; }
</style>

<div class="fwrapper">
<div class="footer">


<style type="text/css">
.block-grid {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 -1% 30px;
  padding: 0 0 0 20px;
}
.block-grid li {
  flex: 0 1 98%;
  margin: 0 1% 10px;
  padding: 0;
}
.block-grid a {
  text-decoration: none;
  font-size: 1em;
}
@media (min-width: 600px){
  .block-grid-1-2-3 li {
    flex: 0 1 48%;
  }
}
@media (min-width: 800px){
  .block-grid-1-2-3 li {
    flex: 0 1 31.3333%;
  }
}
</style>

<p style="text-align:right">
<br>
<a href="<?php echo DOKU_BASE ?>" >Home</a> &nbsp; &nbsp;
<a href="<?php echo DOKU_URL ?>about/" >About</a> &nbsp; &nbsp;
<a href="<?php echo DOKU_URL ?>contact/" >Contact</a>
</p>

<ul class="block-grid block-grid-1-2-3">
  <li>
    <p style="font-size:120%; margin-top:25px;"><b>一般向けサイト</b></p>
    <ul>
       <li><a href="https://dokuwiki.oreda.net/" target="_blank">DokuWikiで情報発信</a></li>
       <li><a href="https://pc.oreda.net/" target="_blank">インフラエンジニアのPC環境</a></li>
       <li><a href="https://izatoki.net/" target="_blank">いざとき英語</a></li>
       <li><a href="https://software.oreda.net/" target="_blank">OREDA Software</a></li>
    </ul>
  </li>
  <li>
    <p style="font-size:120%; margin-top:25px;"><b>ITエンジニア向けサイト</b></p>
    <ul>
       <li><a href="https://cmdref.net/ " target="_blank">cmdref.net - Cheat Sheet and Example</a></li>
       <li><a href="https://fasthandle.net/" target="_blank">FastHandle - IT Operations Examples</a></li>
       <li><a href="https://network.oreda.net/" target="_blank">現場で必要なネットワーク技術入門</a></li>
       <li><a href="https://oa.oreda.net/" target="_blank">社内インフラの技術</a></li>
    </ul>
  </li>
  <li>
    <p style="font-size:120%; margin-top:25px;"><b>Portfolio</b></p>
    <ul>
       <li><a href="https://portfolio.oreda.net/" target="_blank">エンジニアがポートフォリオを作るということ</a></li>
    </ul>
  </li>
</ul>


<center>
<p>Copyright (c) <?php $year = date('Y');  echo $year;  ?> <?php echo $conf['title'] ?> All Rights Reserved.</p>
</center>
</div>
</div>

説明

〜600pxまでの画面サイズでは1カラム
600〜800pxの画面サイズでは2カラム、
800px以上の画面サイズでは3カラムで表示します。


参考





「テンプレート」に戻る