DokuWikiで情報発信

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

ユーザ用ツール

サイト用ツール


Top     SiteMap

サイドバー

Top     SiteMap

目次

DokuWikiを理解

DokuWikiの構築

よく確認するページ

最近の更新

template:dokuwiki.html



「テンプレート」に戻る

Dokuwiki標準テンプレート

標準テンプレート

DokuWiki標準のテンプレートは、PCで閲覧したらPC用のレイアウトになり、スマホで閲覧したらスマホ用のレイアウトになり、タブレットで見たらタブレット用のレイアウトになるレスポンシブWebデザインです。

サイドバーを追加したり、なくしたり、サイトの幅を変更したり、自由自在テンプレートです。

テンプレートを変えると編集系のプラグインが使えなくなったりすることもあるので、やっぱ標準テンプレートが一番だと思います。

参考


変更方法

方法1:ブラウザで管理から変更する

「管理」-「テンプレートのスタイル設定」から色やサイトの幅が変更できます。

方法2:HTMLやCSSを直接変更する

自分の好きなように細かい所まで変更が可能です。


ブラウザで管理からの変更

「管理」-「テンプレートのスタイル設定」

設定項目 デフォルト 案1(リキッド) 案2(PC専用)
通常のリンク色 #2b73b7 #2b73b7 #2b73b7
既存ページへのリンク色 #2b73b7 #2b73b7
サイトの全体 75em 1200px 1440px
サイドバーがある場合、サイドバーの幅 16em 300px 300px
タブレットモードにサイトを切替える、画面幅 800px 1100px 1300px
携帯電話モードにサイトを切替える、画面幅 400px 400px 1000px
CSS設定:body { min-width: xxxpx; } なし なし 1150px
「サイトの全体」幅

サイトの全体は、コンテンツによって違いますが、参考情報をメモしておきます。

  • モニターサイズは、「1024×768」、「1280×800」も多い。
  • スマホは、320~640PX
Tips

サイト幅の設定は、conf/tpl/dokuwiki/style.iniファイルに保存され、バージョンアップ時にも影響を受けません。
バージョンアップ時に影響を受けるdokuwiki/lib/tpl/dokuwiki/style.iniファイルではないです。


favicon.ico の変更

lib/tpl/dokuwiki/images/favicon.ico の favicon.ico を置き換える。


CSS

style.ini

自分専用のスタイルリストを設定する。

「my_style.css = screen」を追記する。

(略)
css/_edit.css             = screen
css/_modal.css            = screen
css/_forms.css            = screen
css/_admin.css            = screen
css/structure.less        = screen
css/design.less           = screen
css/pagetools.less        = screen
css/content.less          = screen
css/my_style.css      = screen


my_style.css

lib/tpl/dokuwiki/css/my_style.css

  • リッキドレイアウトCSSの最小幅を設定
  • ヘッダーの書き方を指定
  • メモ
    padding[上][左右][下] 
    padding [上][右][下][左] 
/**
 * css/basic.less
 **/
 
body {
    min-width: 1150px;
}
 
h1 {
    color: #666;
    font-size: 1.8em;
    margin: 0 0 0.444em;
}
h2 {
    color: white;
    font-size: 1.6em;
    margin: 0 0 0.5em;
    font-weight: normal;
    background-color: #557697;
    padding: 6px 0px 5px 6px;
}
h3 {
    color: #666;
    font-size: 1.4em;
    margin: 0 0 0.888em;
    font-weight: normal;
    padding: 5px 0px 5px 6px;
    background-color: #f2f2f2;
    border-left: solid 10px #557697;
    border-top: none;
    border-bottom: none;
    border-right: none;
}
h4 {
    color: #666;
    font-size: 1.4em;
    margin: 0 0 1.0em;
    padding: 3px 3px 3px 5px;
    font-weight: normal;
    border-left: none;
    border-top: 3px solid #557697;
    border-bottom: 3px solid #557697;
}
h5 {
    font-size: 1.3em;
    margin: 0 0 1.1428em;
    padding: 3px 3px 3px 5px;
    /*border-bottom: 3px solid #557697;*/
    border-bottom: none;
    border-left: 8px solid #557697;
    font-weight: normal;
}
h6 {
    font-size: .75em;
    margin: 0 0 1.333em;
    border-bottom: dotted 1px #cacaca;
    font-weight: normal;
}
 
/**
 * css/_links.less
 **/
 
/* any link to current page */
.dokuwiki span.curid a {
    /*font-weight: bold;*/
    font-weight: normal;
}
 
/**
 * css/design.less
 **/
 
#dokuwiki__header {
    padding: 2em 0 1.5em;
 
    .headings,
    .tools {
        margin-bottom: 0em;
        width: 49%;
    }
}
 
/* Fonts */
body {
    font: normal 87.5%/1.6 Arial, Meiryo, Chicago, sans-serif;
}
 
/*Plugin Indexmenu*/
.dtree {
    font-family: Arial, Meiryo, Chicago, sans-serif;
    font-size: 11px;
}



出力例

h2テストabcABC

h3テストabcABC

h4テストabcABC

h5テストabcABC

= h6テストabcABC =




less

structure.less

サイドバーを右側にする

変更後
#dokuwiki__aside {
    width: @ini_sidebar_width;
    float: right;
    position: relative;
    display: block;
 
    > .pad {
        margin: 0 0 0 1.5em;
    }
}
変更前
#dokuwiki__aside {
    width: @ini_sidebar_width;
    float: left;
    position: relative;
    display: block;
 
    > .pad {
        margin: 0 1.5em 0 0;
    }
}




tpl

tpl_header.php

ログインボタンをなくす

tpl_action('login', true, 'li', true)を「//」でコメントにする。

                        tpl_toolsevent('usertools', array(
                            tpl_action('admin', true, 'li', true),
                            tpl_action('profile', true, 'li', true),
                            tpl_action('register', true, 'li', true),
                            //tpl_action('login', true, 'li', true)
                        ));

ロゴの画像をなくす

'<img src=“'.$logo.'” '.$logoSize[3].' alt=“” /> '.$conf['title'].'',を「//」でコメントにする。

        <h1><?php
            // get logo either out of the template images folder or data/media folder
            $logoSize = array();
            $logo = tpl_getMediaFile(array(':wiki:logo.png', ':logo.png', 'images/logo.png'), false, $logoSize);
 
            // display logo and wiki title in a link to the home page
            tpl_link(
                wl(),
                // 以下をコメント★
                //'<img src="'.$logo.'" '.$logoSize[3].' alt="" /> <span>'.$conf['title'].'</span>',
                '<span>'.$conf['title'].'</span>',
                'accesskey="h" title="[H]"'
            );
        ?></h1>

メディアマネージャのボタンを削除

tpl_action('media', true, 'li', true),を「//」でコメントにする。

                <?php
                    tpl_toolsevent('sitetools', array(
                        tpl_action('recent', true, 'li', true),
                        //tpl_action('media', true, 'li', true),
                        tpl_action('index', true, 'li', true)
                    ));
                ?>

モバイルページでツールを表示しない

以下のようにコメントにする

<!--
            <div class="mobileTools">
                <?php tpl_actiondropdown($lang['tools']); ?>
            </div>
-->

ヘッダーにリンクを表示

    <hr class="a11y" />
</div></div><!-- /header -->
 
//以下を追加
<p style="text-align:left">
<a href="<?php echo DOKU_BASE ?>">Top</a>
&nbsp; &nbsp;
<a href="<?php echo DOKU_BASE ?>sitemap.html">SiteMap</a>
</p>


tpl_footer.php

  • フッターの右側に、トップページなどのリンクを表示
<!-- ********** FOOTER ********** -->
<div id="dokuwiki__footer"><div class="pad">
<p style="text-align:right">
<a href="<?php echo DOKU_BASE ?>">Top</a> &nbsp; &nbsp;
<a href="<?php echo DOKU_URL ?>about/">About</a> &nbsp; &nbsp;
<a href="<?php echo DOKU_URL ?>contact/">Contact</a>
</p>


  • タイトルを表示
  • ライセンスを削除
<p>Copyright (c) 2014 - <?php $year = date('Y');  echo $year;  ?> <?php echo $conf['title'] ?> All Rights Reserved.</p>
<!--
    <?php tpl_license(''); // license text ?>
        (略)
    </div>
-->








「テンプレート」に戻る




template/dokuwiki.html.txt · 最終更新: 2017/09/07 by oreda admin