PukiWiki/カスタマイズ/スキン

スキンの改造と解説

基本設定

アドレス表示部分にはtopicpath.inc.phpをインクルード

if (! defined('SKIN_DEFAULT_DISABLE_TOPICPATH'))
	define('SKIN_DEFAULT_DISABLE_TOPICPATH', 0); // 1, 0

HTMLヘッダ出力直前に管理人の連絡元のメールアドレスを設定ファイルから取得。（Hina-dプラグインの仕様にあわせる。）なお、@は@としてメールアドレス自動収集ロボット対策。

global $notify_from;

HTMLヘッダ

基本的なメタ情報を追加。trackback.jsはstd.jsと併合したためこれに変更。プロバイダ鯖に設置し転送量軽減。（配布されてるものはスキンのディレクトリに置かれています）

 <meta name="generator" content="PukiWiki <?php echo strip_tags(S_VERSION)?>" />
 <meta name="author" content="<?php echo $modifier ?>" />
 <meta name="reply-to" content="mailto:<?php echo $notify_from ?>" />
 <link rel="icon" href="http://logue.tk/elements/favicon.jpg" type="image/jpeg" />
 <link rel="shortcut icon" href="http://logue.tk/elements/favicon.ico" type="image/icon" />
 <link rel="foaf" href="http://logue.tk/elements/foaf.rdf" type="application/rdf+xml" title="FOAF" />
 <link rel="meta" href="http://logue.tk/elements/meta.rdf" type="application/rss+xml" title="Description of This Site" charset="utf-8" />
 <link rel="author" href="<?php echo $modifierlink ?>" title="<?php echo $modifier ?>" />
 <link rev="made" href="mailto:<?php echo $notify_from ?>" title="Contact to <?php echo $modifier ?>" />
 <link rel="home" href="<?php echo $_LINK['top'] ?>" title="<?php echo "$title - $page_title" ?>" />
 <link rel="index" href="<?php echo $_LINK['list']?>" title="<?php echo $_LANG['skin']['list'] ?>" />
 <link rel="contents" href="<?php echo "$script?".rawurlencode('MenuBar')?>" title="Menu" />
 <link rel="search" href="<?php echo $_LINK['search'] ?>" title="<?php echo $_LANG['skin']['search'] ?>" />
 <link rel="help" href="<?php echo $_LINK['help'] ?>" title="<?php echo $_LANG['skin']['help'] ?>" />
 <link rel="bookmark" href="<?php echo $script?>?%E3%83%AA%E3%83%B3%E3%82%AF" title="Links" />
 <link rel="glossary" href="<?php echo $script?>?%E7%94%A8%E8%AA%9E%E9%9B%86" title="Glossary" />
 <link rel="copyright" href="http://logue.tk/?%E8%91%97%E4%BD%9C%E6%A8%A9%E8%A1%A8%E8%A8%98" />
 <link rel="licence" href="http://creativecommons.org/licenses/by-nc-sa/2.0/" title="Createive Commons Lisence" />
<?php if (PKWK_ALLOW_JAVASCRIPT && $trackback_javascript) { ?>
 <script type="text/javascript" src="http://www.k3.dion.ne.jp/~logue/std.js"></script>
<?php } ?>

ページ上部

<body>タグでstd.js起動

<body onload="init();">

このデザインではあまり意味は無いが、全体を中央に寄せたかったりするときに役に立つはず。

<div id="base">

ヘッダー出力

<!-- *** Header *** -->
<div id="header">
<a href="<?php echo $modifierlink ?>"><img id="logo" src="<?php echo IMAGE_DIR . $image['logo'] ?>" width="80" height="80" alt="[Epilogue]" title="[LogueWiki]" /></a>
 <h1 class="title"><?php echo $page ?></h1>
<?php if ($is_page) { ?>
 <?php if(SKIN_DEFAULT_DISABLE_TOPICPATH) { ?>
   <a href="<?php echo $link['reload'] ?>"><span class="small"><?php echo $link['reload'] ?></span></a>
 <?php } else { ?>
   <span class="small">
   <?php require_once(PLUGIN_DIR . 'topicpath.inc.php'); echo plugin_topicpath_inline(); ?>
  </span>
 <?php } ?>
<?php } ?>

</div>
<!-- *** End Header *** -->

また、ナビゲーター前に広告枠を作る。

<!-- Ad banner -->
<div id="ad">

この部分を検索フォームとかにすると意外と便利かも。

</div>
<!-- End Ad banner -->

ここでは、navigation部分でclear:both;となっているのを利用してfloat:right;にし右に寄せている。

本文

を表示させる範囲は、本文と注釈なのでそこまで<div id="body">を伸ばす。また、この矢印を表示させるときにstd.jsでは、class要素を参照するのでclass="body"を追加する。

テーブルタグによる段組を行わず、スタイルシートのfloatを活用している。float:right;を使うと直前のボックスの左側にボックスを置くことができるので本文→メニューという順番に展開する。

回り込みを防ぐためwrap_???というボックスを用意し段組。

<!-- *** Main *** -->
<div id="main">

<!-- ** Body ** -->

このwarp_bodyでbody部を囲む。ただし、メニューを表示しないモードでこれが展開されると全体が右に寄ってしまうため、以下のようにする。

<?php if (arg_check('read') && exist_plugin_convert('menu')) { ?>
<div id="wrap_body">
<?php } ?>

<div id="body" class="body">
<?php echo $body ?>

<?php if ($notes != '') { ?>
<!-- * Note * -->
<div id="note"><?php echo $notes ?></div>
<!--  End Note -->
<?php } ?>

<?php if ($attaches != '') { ?>
<?php echo $hr ?>
<!-- * Attach * -->
<div id="attach"><?php echo $attaches ?></div>
<!--  End Attach -->
<?php } ?>

</div>
<!-- ** End Body ** -->

<?php if (arg_check('read') && exist_plugin_convert('menu')) { ?>
</div>
<!-- ** MenuBar ** -->
<div id="wrap_menubar"><div id="menubar">
 <?php echo do_plugin_convert('menu') ?>
</div></div>
<!-- ** End MenuBar ** -->
<?php } ?>

</div>
<!-- *** end Main *** -->

メニューを表示しないページで矢印を表示するようにするとエライ事になるのでこっちには、あえてclass="body"を加えない。

toolbarで一応rss2.0も出力。

<?php _toolbar('rss20', 54, 14) ?>

FoaFは、Javascriptによって追記。

バナーボックス

必要に応じて、JavaScriptで追記。（配布されてるものにはPukiwikiとHTMLintとXHTMLのバナーしか含まれていません）

<div id="banner_box">
 <a href="http://logue.tk/"><img src="<?php echo IMAGE_DIR ?>banner.png" width="88" height="31" alt="epilogue" title="Epilogue(LogueWiki)" /></a>
 <a href="http://pukiwiki.org/"><img src="<?php echo IMAGE_DIR ?>" width="88" height="31" height="31" alt="PukiWiki.org" title="PukiWiki.org" /></a>
 <a href="http://openlab.ring.gr.jp/k16/htmllint/htmllint.cgi?URL=<?php echo "$script?$r_page" ?>&amp;ViewSource=on"><img src="<?php echo IMAGE_DIR ?>ahl.png" width="88" height="31" alt="Another HTML-lint Gateway" title="Another HTML-lint Gateway" /></a>
 <a href="http://validator.w3.org/check/referer"><img src="<?php echo IMAGE_DIR ?>valid-xhtml11.png" width="88" height="31" alt="This document validates as XHTML 1.1" title="This document validates as XHTML 1.1" /></a>
</div>

著作権表記

<address>
<strong><a href="<?php echo $modifierlink ?>">Epilogue</a></strong> Copyright &copy; 2004~2005 by <a href="mailto:<?php echo $notify_from ?>"><?php echo $modifier ?></a> all rights reserved.<br />
</address>

実際はこれだけ。あとはJavaScriptによる追記。

Last-modified: Mon, 04 Apr 2005 00:41:00 HADT (5248d)

Founded by Logue

⇪Top