ここで概説するカスタマイズとは、システムの基幹部分はそのままで、ページのフレーム構造（HTML）とスタイル（CSS）を書き換えることを意味します。PukiWikiの場合、skinフォルダの中にある以下の２つのファイルを編集するだけでカスタマイズが可能です。
このファイルは、ページ構築するHTMLの雛形情報が書かれています。このHTML構造を編集し、スタイル用の id や class を下の pukiwiki.css と関連づけることでデザインのカスタマイズが可能です。この作業には、HTML+CSSによるページデザインの知識と、phpの基本的な仕組みについての理解が必要です。
このファイルは、pukiwiki.skin.php がもつ文書構造にスタイルを与えます。このCSSには、代表的なプラグイン利用時のデザインも含め、すべてのスタイル情報が書かれています。スタイルのカスタマイズには、以下の２通りが考えられます（おすすめは後者かも？）。
SKINの内容を簡潔に理解するためのミニマルサンプルです。いくつか、追加のプラグインも含めています。
以下、デモサイトのトップページに記載しています。
https://design.kyusan-u.ac.jp/SampleSite/pukiwiki_minimal
<?php if ($menu !== FALSE) { ?>
<div id="readMode">
// 閲覧モードで表示する内容
</div>
<?php } else { ?>
<div id="editMode">
// 編集モードで表示する内容
</div>
<?php } ?>header + #readMode( nav + article ( #main + #note +・・) ) + footer header + #editMode( ) + footer
<link rel="stylesheet" href="skin/css/pukiwiki.css" /> <link rel="stylesheet" href="skin/css/additional.css" />
HTML構造のカスタマイズには、pukiwiki.skin.php の編集が必要です。
以下、よくある質問です。
PukiWikiはデフォルトで、MenuBar という名前のページを持ち、その内容（主にリスト）をページ内に埋め込むかたちでメニューを表示しています。これと同様に、サイドバーやトップメニューといった機能ブロックも、別ページとして作成しておいて、それを読み込ませる・・ということが可能です。例えば以下のような記述を pukiwiki.skin.php の<body>内に置けば、SideBar という名前のページを埋め込むことが可能になります。レイアウトは #sideBar をフックとして、CSSで制御します。
<div id="sideBar">
<?php echo convert_html(get_source('SideBar')) ?>
</div>
この方法を使うことで、PukiWiki画面上には、ページとして編集された様々なパーツを埋め込むことができます。
参考
PukiWiki には、#include というプラグインがあります。基本的なブロック構造を変更する必要がなく、単に記事本体ブロック（$body）の中に他のページを読み込みたい・・という話であれば、#include プラグインの利用で解決します。具体的には、以下のように記載します。
#include( 読み込みたいページ名, [,title |,notitle] )
トップページにのみ特定のコンテンツを表示したい場合、あるいはその逆の場合、以下のように、現在のページがトップページであるか否かを判定するPHPを書けばOKです。
if ( $title == ' トップページのページ名 ' ) { }
<?php if ( $title == ' トップページのページ名 ' ) { ?>
<div id="slideShow">
ここにスライドショーのためのコードを記述
</div>
<?php } ?><?php if ( $title == ' トップページのページ名 ' ) { ?>
<?php echo convert_html(get_source('（埋め込みたいページ名）')) ?>
<?php } ?><?php if ( $title != ' トップページのページ名 ' ) { ?>
ここに埋め込みたい内容のコードを書く
<?php } ?>
スタイルのカスタマイズは、skin/pukiwiki.css.php の編集が必要です。
上記SAMPLE で練習中の方は、skin / css / style.css が相当します。
pukiwiki.skin.php のタグ・ID・CLASS を見ながら、それらをセレクタとして、プロパティーと値を記述します。
実際のページには、Wikiの記法にしたがって記述された内容が、HTMLタグに置き換えられて表示されるので、どの記法がどのHTMLタグに対応するのか、その対応関係を知っておくことが必要です。以下、主なものを挙げます。
| 要素 | Wikiの記法 | HTMLタグ |
| ページ名 | Wikiページ名 | h1 |
| 大見出し | * | h2 |
| 中見出し | ** | h3 |
| 小見出し | *** | h4 |
| 箇条書き レベル１ | - | ul.list1 li |
| 箇条書き第 レベル２ | -- | ul.list2 li |
| 段落 | 記述+改行 | p |
| 整形済みテキスト | 行頭半角空白 | pre |
| 引用 | 行頭に ＞ | blockquote p.quotation |
| リンク | [ [ ] ] | a |
| 強調 | ’’文字列’’ | strong |
| 斜体 | ’’’文字列’’’ | em |
| 取消線 | ％％文字列％％ | del |
オリジナルのCSSでデザインする場合、PukiWiki特有の仕様の無効化も必要になります。以下、よくある要望についての回答です。
// リスト構造の左マージン $_ul_left_margin = 0; // リストと画面左端との間隔(px) $_ul_margin = 16 → 0; // リストの階層間の間隔(px) $_ol_left_margin = 0; // リストと画面左端との間隔(px) $_ol_margin = 16 → 0; // リストの階層間の間隔(px) $_dl_left_margin = 0; // リストと画面左端との間隔(px) $_dl_margin = 16 → 0; // リストの階層間の間隔(px) $_list_pad_str = ' class="list%d" style="padding-left:%dpx;margin-left:%dpx"';
//$top = $_msg_content_back_to_top ; ← この行をコメントアウトして $top = ''; ← このよう（シングルクオーテーション２つ）にする
$line_rules = array(
"SUP{([^}]*)};" => '<span style="vertical-align:super; font-size:60%;">$1</span>',
"SUB{([^}]*)};" => '<span style="vertical-align:sub; font-size:60%;">$1</span>',
：
);//$_symbol_anchor = '&dagger；'; ← この行をコメントアウトして $_symbol_anchor = ' '; ←全角スペースを定義する