システムガイド
PukiWikiの初期設定には「pukiwiki.ini.php」を編集しています。
九州産業大学 芸術学部 情報デザイン研究室の「PukiWiki」に詳しい説明や設定方法が書いてあるのでそちらをご参照ください。
カスタマイズは主に「pukiwiki.skin.php」、「additional.css」、「script.js」を編集しています。
基本は普通のwebサイトと同じ要領で変更できます。
pukiwiki.skin.php はHTML、additional.css はCSS、script.js はそのままJavaScriptと考えてもらって大丈夫です。
難しいことも書いてありますが、基本的にいつものコーディングをするときと変わりはありません。
pukiwiki.skin.phpは特にわからない言語が多く書かれていますが、大きな枠組みはHTMLとなんら変わりはありません。head、header、body、article、footerに大きく分けられており、その中に細かく色々な要素が入れられています。
その他細かい文字のレイアウト設定は「pukiwiki.css」に記載されています。文字の間隔やカーソルが乗った時の色、フォントなどはそちらで変更することができます。
アイコン画像やフッター画像はimagesフォルダの中に入ってます。pukiwiki.skin.php に img src="images/......png" と書くことで表示させることができます。
ナビゲーションはPukiwiki内で新規ページを追加してナビゲーションのリストを作り、それをHTML内で読み込みます。
やり方は他にもあると思いますが、このサイトでは擬似要素を使ってCSSでナビゲーションメニューに画像を表示させています。画像を表示させたいものに li:nth-of-type でlistに番号を振りそれぞれに content: url(../images/......png); と書くことで表示させています。
詳しい方法は 「content 画像 表示」などで調べてみてください。
CSS記入例(「お店」のアイコン表示)
#g-nav ul li:nth-of-type(1) {
list-style: none;
width: 180px;
height: 180px;
}
#g-nav ul li:nth-of-type(1) a {
font-size: 13px;
background-color: #CCC;
width: 180px;
height: 180px;
text-align: center;
}
#g-nav ul li:nth-of-type(1) a:before {
content: url(../images/shop.png);
vertical-align: middle;
transform: scale(0.1);
display: inline-block;
width: 50px;
height: 50px;
position: absolute;
left: 0;
}
#g-nav ul li:nth-of-type(1) a:hover::before {
opacity: 0.5;
}