システムガイド
PukiWikiの初期設定には「pukiwiki.ini.php」を編集しています。
九州産業大学 芸術学部 情報デザイン研究室の「PukiWiki」に詳しい説明や設定方法が書いてあるのでそちらをご参照ください。
カスタマイズは主に「pukiwiki.skin.php」、「additional.css」、「script.js」を編集しています。
基本は普通のwebサイトと同じ要領で変更できます。
pukiwiki.skin.php はHTML、additional.css はCSS、script.js はそのままJavaScriptと考えてもらって大丈夫です。
難しいことも書いてありますが、基本的にwebサイトをコーディングをするときと変わりはありません。
pukiwiki.skin.phpは特にわからない言語が多く書かれていますが、大きな枠組みはHTMLとなんら変わりはありません。head、header、body、article、footerに大きく分けられており、その中に細かく色々な要素が入れられています。
その他細かい文字のレイアウト設定は「pukiwiki.css」に記載されています。文字の間隔やカーソルが乗った時の色、フォントなどはそちらで変更することができます。
ハンバーガーメニューに関して以下のサイトを参考にしています
CSSでメニューをリストで表示させています。display:flexやgridにすれば縦並びだけでなく横並びでも表示させることが出来ます。
CSS記入例(「お店」の場合)
#g-nav{ position:fixed; z-index: 999; top:0; right: -120%; width: 50%; height: 100vh; background:#1e481c; transition: all 0.6s; } #g-nav ul { position: absolute; z-index: 999; top: 40%; left: 25%; transform: translate(-50%,-50%); transition: all 0.6s; } #g-nav ul li { list-style: none; text-align: center; } #g-nav ul li a { display: block; font-size: 20px; text-align: center; color: #f7f2e4; font-family: 'Zen Maru Gothic', serif; text-decoration: none; padding: 15px; text-transform: uppercase; letter-spacing: 0.1rem; } #g-nav ul li a:hover { opacity: 0.5; transition-duration: 0.3s; }
pukiwiki.skin.phpの<div id="main">の中に<div id="page_top"><a href="#"></a>を入れてCSSでボタンを表示させています。
CSS記入例
#page_top{ width: 60px; height: 60px; margin: 3% 0% 5% 90%; bottom: 0; background: #201714; border-radius: 10px; } #page_top a{ position: relative; display: block; width: 60px; height: 60px; text-decoration: none; } #page_top a::before{ font-family: 'Font Awesome 5 Free'; font-weight: 900; content: '\f062'; font-size: 40px; color: #f7f2e4; position: absolute; width: 40px; height: 30px; top: 0; bottom: 0; right: 0; left: 0; margin: auto; text-align: center; }
このサイトはメディアクエリを使ってレスポンシブしています。PC版、タブレット版、スマホ版のそれぞれにメディアクエリを書いています。
例えば@media screen and (max-width:1000px)と書いた場合、1000px以下にメデイアクエリが適用され、@media screen and (min-width:1000px)と書いた場合、1000px以下にメディアクエリが適用されます。このやり方以外にもスマホ用、PC用にCSSを分けて切り替える方法もあります。
CSS記入例
@media screen and (max-width:1000px) { #g-nav{ width: 100%; top:-120%; left:0; height: 70vh; } #g-nav.panelactive{ top: 0; right: 100%; } #g-nav ul { top: 30%; left: 49%; } #page_top{ width: 60px; height: 60px; margin: 3% 0% 5% 90%; } #page_top a{ width: 60px; height: 60px; } #page_top a::before{ font-size: 30px; width: 30px; height: 30px; } }
@media screen and (max-width:600px) { body { font-size: 0.8rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1rem; } #g-nav ul { top: 30%; left: 50%; } #g-nav ul li a { font-size: 15px; } #page_top{ width: 45px; height: 45px; margin: 10% 0% 5% 85%; } #page_top a{ width: 40px; height: 33px; } #page_top a::before{ font-size: 20px; width: 13px; height: 16px; } #toolbar a { margin: 0; } }