DokuWikiで情報発信

個人での情報発信や社内での情報共有に便利なDokuWikiを紹介するサイトです。

ユーザ用ツール

サイト用ツール


サイドバー

目次

DokuWikiを理解

DokuWikiの構築

よく確認するページ

template:change-colomn.html



「テンプレート」に戻る

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

概要

DokuWikiでフッターを利用する場合、PCの時とスマホでデザインを変えたいので、調査しました。

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;
}
.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>一般向けサイト</p>
    <ul>
       <li><a href="https://dokuwiki.oreda.net/" target="_blank">DokuWikiで情報発信</a></li>
       <li><a href="https://english.oreda.net/" target="_blank">いざとき英語</a></li>
       <li><a href="https://software.oreda.net/" target="_blank">OREDA Software</a></li>
    </ul>
  </li>
  <li>
    <p>ITエンジニア向けサイト</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>
    </ul>
  </li>
  <li>
    <p>Portfolio</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>


参考




template/change-colomn.html.txt · 最終更新: 2018/11/28 by oreda admin

ページ用ツール