PukiWiki/Customize をテンプレートにして作成

開始行:
*PukiWiki Customize ~ ***CONTENTS #contents2_1 ~ ~ **カスタマイズの基本 ここで概説するカスタマイズとは、システムの基幹部分はその... ~ ***ページの文書構造の変更： ./skin/pukiwiki.skin.php このファイルは、ページ構築するHTMLの雛形情報が書かれてい... ~ ***スタイルの変更： ./skin/pukiwiki.css このファイルは、pukiwiki.skin.php がもつ文書構造にスタイ... -これ（pukiwiki.css）を直接改修する。 -これはそのままにして、追加のCSSファイルを作成してリンク... ~ ~ **SAMPLE SKINの内容を簡潔に理解するためのミニマルサンプルです。い... ~ ***DEMOとSkinの配布 -''DEMO''：https://design.kyusan-u.ac.jp/SampleSite/pukiw... // ID user // PW password -''DATA''：https://github.com/koichi-inoue/pukiwiki_minimal ~ ***サンプルの利用方法 以下、デモサイトのトップページに記載しています。 https://design.kyusan-u.ac.jp/SampleSite/pukiwiki_minimal ~ ***サンプルの説明 -''HTMLの構造を変更しています'' 元のデザインは tableタグでレイアウトされていますが、この... --モードの分岐 <?php if ($menu !== FALSE) { ?> <div id="readMode"> // 閲覧モードで表示する内容 </div> <?php } else { ?> <div id="editMode"> // 編集モードで表示する内容 </div> <?php } ?> --生成される２種類の HTML 構造 header + #readMode( nav + article ( #main + #note +・・)... header + #editMode( ) + footer -''CSSの仕様を変更しています'' オリジナルCSS はそのまま残して、追加のCSSで上書きする方法... <link rel="stylesheet" href="skin/css/pukiwiki.css" /> <link rel="stylesheet" href="skin/css/additional.css" /> ~ ***付記：これを拡張した学内プロジェクト サンプル事例 -DEMO：https://design.kyusan-u.ac.jp/SampleSite/pukiwiki_... -Download：https://design.kyusan-u.ac.jp/ZIP/pukiwiki_sam... // ID：user // PW：password //--情報科学研究科 初期サンプル //https://design.kyusan-u.ac.jp/SampleSite/informationsci... //--情報科学研究科 2019.12.06 開発中のものは以下 //http://apus.is.kyusan-u.ac.jp/~user01/ ~ ~ **構造のカスタマイズ HTML構造のカスタマイズには、pukiwiki.skin.php の編集が必... 以下、よくある質問です。 ~ ***特定のページをレイアウトに埋め込みたい PukiWikiはデフォルトで、MenuBar という名前のページを持ち... <div id="sideBar"> <?php echo convert_html(get_source('SideBar')) ?> </div> この方法を使うことで、PukiWiki画面上には、ページとして編... ''参考'' PukiWiki には、#include というプラグインがあります。基本... #include( 読み込みたいページ名, [,title |,notitle] ) ~ ***トップページのみ特別にしたい ''トップページにのみ特定のコンテンツを表示したい場合、あ... if ( $title == ' トップページのページ名 ' ) { } -例）トップページにのみ、(例えば)スライドショーを埋め込み... <?php if ( $title == ' トップページのページ名 ' ) { ?> <div id="slideShow"> 　　　ここにスライドショーのためのコードを記述 </div> <?php } ?> -例）トップページにのみ、他のページを埋め込みたい <?php if ( $title == ' トップページのページ名 ' ) { ?> <?php echo convert_html(get_source('（埋め込みたいペ... <?php } ?> -例）トップページ''以外''に、◯◯を埋め込みたい if 文の条件式を「現在のページ Not Equal トップページ」と... <?php if ( $title != ' トップページのページ名 ' ) { ?> ここに埋め込みたい内容のコードを書く <?php } ?> ~ ~ **スタイルのカスタマイズ スタイルのカスタマイズは、skin/pukiwiki.css.php の編集が... &small(上記SAMPLE で練習中の方は、skin / css / style.css ... ~ ***基本 pukiwiki.skin.php のタグ・ID・CLASS を見ながら、それらを... ~ ***Wikiの記法とHTMLタグの対応 実際のページには、Wikiの記法にしたがって記述された内容が... ~ |33|33|33|c |要素|Wikiの記法|HTMLタグ|h |ページ名|Wikiページ名 |''h1''| |大見出し|''*''　|''h2''| |中見出し|''**''　|''h3''| |小見出し|''***''　|''h4''| |箇条書き レベル１|''-''　|''ul.list1　li''| |箇条書き第 レベル２|''--''　|''ul.list2　li''| |段落|記述+改行　|''p''| |整形済みテキスト|''行頭半角空白''　|''pre''| |引用|''行頭に ＞''　|''blockquote p.quotation''| |リンク|''[ [　] ]''　|''a''| |強調|''’’''文字列''’’''　|''strong''| |斜体|''’’’''文字列''’’’''　|''em''| |取消線|''％％''文字列''％％''　|''del''| ~ ~ **関連ファイルの編集 オリジナルのCSSでデザインする場合、PukiWiki特有の仕様の無... ~ ***default.ini.phpの編集 -リスト構造の左マージンを変更 // リスト構造の左マージン $_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:%d... -見出し右上に表示されるナビゲータへのリンク（↑）を消去 //$top = $_msg_content_back_to_top ; ← この行をコメント... $top = ''; ← このよう（シングルクオーテーション２つ）に... -ユーザー定義ルールに以下の２つを追加 $line_rules = array( "SUP{([^}]*)};" => '<span style="vertical-align:super... "SUB{([^}]*)};" => '<span style="vertical-align:sub; ... ： ); ~ ***ja.lng.php -見出しに自動生成されるダガー：†を消す アンカー機能を残しつつ、「†」が表示されないように変更する //$_symbol_anchor = '&dagger；';　← この行をコメントア... $_symbol_anchor = '　'; ←全角スペースを定義する ~ ~

終了行:
*PukiWiki Customize ~ ***CONTENTS #contents2_1 ~ ~ **カスタマイズの基本 ここで概説するカスタマイズとは、システムの基幹部分はその... ~ ***ページの文書構造の変更： ./skin/pukiwiki.skin.php このファイルは、ページ構築するHTMLの雛形情報が書かれてい... ~ ***スタイルの変更： ./skin/pukiwiki.css このファイルは、pukiwiki.skin.php がもつ文書構造にスタイ... -これ（pukiwiki.css）を直接改修する。 -これはそのままにして、追加のCSSファイルを作成してリンク... ~ ~ **SAMPLE SKINの内容を簡潔に理解するためのミニマルサンプルです。い... ~ ***DEMOとSkinの配布 -''DEMO''：https://design.kyusan-u.ac.jp/SampleSite/pukiw... // ID user // PW password -''DATA''：https://github.com/koichi-inoue/pukiwiki_minimal ~ ***サンプルの利用方法 以下、デモサイトのトップページに記載しています。 https://design.kyusan-u.ac.jp/SampleSite/pukiwiki_minimal ~ ***サンプルの説明 -''HTMLの構造を変更しています'' 元のデザインは tableタグでレイアウトされていますが、この... --モードの分岐 <?php if ($menu !== FALSE) { ?> <div id="readMode"> // 閲覧モードで表示する内容 </div> <?php } else { ?> <div id="editMode"> // 編集モードで表示する内容 </div> <?php } ?> --生成される２種類の HTML 構造 header + #readMode( nav + article ( #main + #note +・・)... header + #editMode( ) + footer -''CSSの仕様を変更しています'' オリジナルCSS はそのまま残して、追加のCSSで上書きする方法... <link rel="stylesheet" href="skin/css/pukiwiki.css" /> <link rel="stylesheet" href="skin/css/additional.css" /> ~ ***付記：これを拡張した学内プロジェクト サンプル事例 -DEMO：https://design.kyusan-u.ac.jp/SampleSite/pukiwiki_... -Download：https://design.kyusan-u.ac.jp/ZIP/pukiwiki_sam... // ID：user // PW：password //--情報科学研究科 初期サンプル //https://design.kyusan-u.ac.jp/SampleSite/informationsci... //--情報科学研究科 2019.12.06 開発中のものは以下 //http://apus.is.kyusan-u.ac.jp/~user01/ ~ ~ **構造のカスタマイズ HTML構造のカスタマイズには、pukiwiki.skin.php の編集が必... 以下、よくある質問です。 ~ ***特定のページをレイアウトに埋め込みたい PukiWikiはデフォルトで、MenuBar という名前のページを持ち... <div id="sideBar"> <?php echo convert_html(get_source('SideBar')) ?> </div> この方法を使うことで、PukiWiki画面上には、ページとして編... ''参考'' PukiWiki には、#include というプラグインがあります。基本... #include( 読み込みたいページ名, [,title |,notitle] ) ~ ***トップページのみ特別にしたい ''トップページにのみ特定のコンテンツを表示したい場合、あ... if ( $title == ' トップページのページ名 ' ) { } -例）トップページにのみ、(例えば)スライドショーを埋め込み... <?php if ( $title == ' トップページのページ名 ' ) { ?> <div id="slideShow"> 　　　ここにスライドショーのためのコードを記述 </div> <?php } ?> -例）トップページにのみ、他のページを埋め込みたい <?php if ( $title == ' トップページのページ名 ' ) { ?> <?php echo convert_html(get_source('（埋め込みたいペ... <?php } ?> -例）トップページ''以外''に、◯◯を埋め込みたい if 文の条件式を「現在のページ Not Equal トップページ」と... <?php if ( $title != ' トップページのページ名 ' ) { ?> ここに埋め込みたい内容のコードを書く <?php } ?> ~ ~ **スタイルのカスタマイズ スタイルのカスタマイズは、skin/pukiwiki.css.php の編集が... &small(上記SAMPLE で練習中の方は、skin / css / style.css ... ~ ***基本 pukiwiki.skin.php のタグ・ID・CLASS を見ながら、それらを... ~ ***Wikiの記法とHTMLタグの対応 実際のページには、Wikiの記法にしたがって記述された内容が... ~ |33|33|33|c |要素|Wikiの記法|HTMLタグ|h |ページ名|Wikiページ名 |''h1''| |大見出し|''*''　|''h2''| |中見出し|''**''　|''h3''| |小見出し|''***''　|''h4''| |箇条書き レベル１|''-''　|''ul.list1　li''| |箇条書き第 レベル２|''--''　|''ul.list2　li''| |段落|記述+改行　|''p''| |整形済みテキスト|''行頭半角空白''　|''pre''| |引用|''行頭に ＞''　|''blockquote p.quotation''| |リンク|''[ [　] ]''　|''a''| |強調|''’’''文字列''’’''　|''strong''| |斜体|''’’’''文字列''’’’''　|''em''| |取消線|''％％''文字列''％％''　|''del''| ~ ~ **関連ファイルの編集 オリジナルのCSSでデザインする場合、PukiWiki特有の仕様の無... ~ ***default.ini.phpの編集 -リスト構造の左マージンを変更 // リスト構造の左マージン $_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:%d... -見出し右上に表示されるナビゲータへのリンク（↑）を消去 //$top = $_msg_content_back_to_top ; ← この行をコメント... $top = ''; ← このよう（シングルクオーテーション２つ）に... -ユーザー定義ルールに以下の２つを追加 $line_rules = array( "SUP{([^}]*)};" => '<span style="vertical-align:super... "SUB{([^}]*)};" => '<span style="vertical-align:sub; ... ： ); ~ ***ja.lng.php -見出しに自動生成されるダガー：†を消す アンカー機能を残しつつ、「†」が表示されないように変更する //$_symbol_anchor = '&dagger；';　← この行をコメントア... $_symbol_anchor = '　'; ←全角スペースを定義する ~ ~

ページ名: