スキン/技術資料の履歴差分(No.2)

追加された行はこの色です。
削除された行はこの色です。
#topicpath
----
#contents

*PukiWikiのスキン [#d01151b0]
PukiWikiは、[[XHTML1.1]]or[[XHTML1.1]]のHTMLコードを生成いたします。画面デザインは、[[CSS]]ファイルとそれを使用したPHPファイルにて行います。
PukiWikiは、XHTML1.1orXHTML1.0のHTMLコードを生成いたします。画面デザインは、CSSファイルとそれを使用したPHPファイルにて行います。
~ファイルは、skin directory 以下に置かれている以下のファイルです。
-default.en.css : 英語画面用 CSS 定義デフォルトファイル
-default.jp.css : 日本語画面用 CSS 定義デフォルトファイル
-pukiwiki.skin.en.php ： 英語画面スキン 生成スクリプト
-pukiwiki.skin.ja.php ： 日本語画面スキン 生成スクリプト
-keitai.skin.ja.php ： 携帯用画面スキン 生成スクリプト

画面の基本構成は、スキン生成スクリプト側で行い、CSS側でそのデザインを行います。

ここでは、まず、スキン生成スクリプトの解説を行い、次にCSSファイルの設定について解説をいたします。そして、当サイトでの変更点を記述いたします。

**PukiWikiで生成されるHTMLの構成 [#m1e4594f]
PukiWikiで生成されるHTMLは以下のような構成を持っています。
+ 生のHTTPヘッダの送信
+ XML定義送信 
+ !DOCTYPE 送信 
+ ヘッダ送信
++ ロボット対策(閲覧のみ読めるようにする)
++ ページタイトル送信 
++ スタイルシート読み込み
++ トラックバック用 JAVA SCRIPT ON
++ 追加HEADタグの送信~
+ HTML BODY 送信
++ [HEADER部]
+++ ロゴイメージ送信 
+++ ページタイトル送信
+++ ページURL送信  
++[NAVIGATOR部]:送信 ~
++ 横線表示
++ [MENUBAR部]/[BODY部]
++ 横線表示
++[NOTE部]
++[ATTACH部]
++ 横線表示
++[TOOLBAR部]
++ [BOTTOM部]
+++ [[LASTMODIFIED部]
+++ [RELATED部]
+++ [FOOTER部]
+ HTML BODY 終了
+ HTML 終了

この構成は、skin/pukiwiki.skin.##.phpにて生成されています。以下で、pukiwiki.skin.ja.phpの解説を行います。

また、HTMLのBODYにおいて[]にて括られた部分のデザインは、[[CSS]]にて定義されています。CSSは、skin/default.##.cssにて定義されています。

** pukiwiki.skin.ja.php [#i93e8739]
+ ファイルコメント - cvs管理されているので IDなどが入っている
 <?php
 /////////////////////////////////////////////////
 // PukiWiki - Yet another WikiWikiWeb clone.
 //
 // $Id: pukiwiki.skin.ja.php,v 1.34 2004/08/08 05:33:43 henoheno Exp $
 //
+ エラー処理 (データの有無)
 if (!defined('DATA_DIR')) { exit; }
+ 生のHTTPヘッダの送信
 header('Cache-control: no-cache');
 header('Pragma: no-cache');
 header('Content-Type: text/html; charset=EUC-JP');
+XML定義送信 (XHTML 対応)
 echo '<?xml version="1.0" encoding="EUC-JP"?>';
 ?>
+ !DOCTYPE 送信 (TRANSLATIONAL(XHTML1.0)/STRICT(XHTML1.1)切替え)
lib/init.php (341行:1.4.4)で定義されている。
 <?php if ($html_transitional) { ?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
 <?php } else { ?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
 <?php } ?>
+ ヘッダ送信
 <head>
  <meta http-equiv="content-type" content="application/xhtml+xml; charset=EUC-JP" />
  <meta http-equiv="content-style-type" content="text/css" />
++ ロボット対策(閲覧のみ読めるようにする)
 <?php if (!$is_read) { ?>
  <meta name="robots" content="NOINDEX,NOFOLLOW" />
 <?php } ?>
++ ページタイトル送信 
  <title><?php echo "$title - $page_title" ?></title>
++ スタイルシート読み込み
  <link rel="stylesheet" href="skin/default.ja.css" type="text/css" media="screen" charset="Shift_JIS" />
  <link rel="stylesheet" href="skin/print.ja.css" type="text/css" media="print" charset="Shift_JIS" />
++ トラックバック用 JAVA SCRIPT ON
 <?php
   global $trackback, $referer;
   if ($trackback) {
 ?>
  <meta http-equiv="Content-Script-Type" content="text/javascript" />
  <script type="text/javascript" src="skin/trackback.js"></script>
 <?php } ?>
++ 追加HEADタグの送信~
lib/init.php (51行:1.4.4)以降で定義する。デフォルトでは未設定~
 <?php echo $head_tag ?>
 </head>
+ HTML BODY 送信
 <body>
++ [HEADER部]
+++ ロゴイメージ送信 
  <div id="header">
   <a href="<?php echo $modifierlink ?>"><img id="logo" src="<?php echo IMAGE_DIR ?>pukiwiki.png" width="80" height="80" alt="[PukiWiki]" title="[PukiWiki]" /></a>
+++ ページタイトル送信
   <h1 class="title"><?php echo $page ?></h1>
+++ ページURL送信  
  <?php if ($is_page) { ?>
   <a href="<?php echo "$script?$r_page" ?>"><span class="small"><?php echo "$script?$r_page" ?></span></a>
  <?php } ?>
  
  </div>
++[NAVIGATOR部]:送信 ~
メニューのみを変える場合には、この部分を変更する。
 <div id="navigator">
 
 <?php if ($is_page) { ?>
  [ <a href="<?php echo "$script?$r_page" ?>">リロード</a> ]
  &nbsp;
  [ <a href="<?php echo "$script?plugin=newpage&amp;refer=$r_page" ?>">新規</a>
  | <a href="<?php echo $link_edit ?>">編集</a>
 <?php   if ($is_read and $function_freeze) { ?>
 <?php     if ($is_freeze) { ?>
  | <a href="<?php echo $link_unfreeze ?>">凍結解除</a>
 <?php     } else { ?>
  | <a href="<?php echo $link_freeze ?>">凍結</a>
 <?php     } ?>
 <?php   } ?>
 
  | <a href="<?php echo $link_diff ?>">差分</a>
 
 <?php   if ((bool)ini_get('file_uploads')) { ?>
  | <a href="<?php echo $link_upload ?>">添付</a>
 <?php   } ?>
 
  ]
  &nbsp;
 <?php } ?>
 
  [ <a href="<?php echo $link_top ?>">トップ</a>
  | <a href="<?php echo $link_list ?>">一覧</a>
 
 <?php if (arg_check('list')) { ?>
  | <a href="<?php echo $link_filelist ?>">ファイル名一覧</a>
 <?php } ?>
 
  | <a href="<?php echo $link_search ?>">単語検索</a>
  | <a href="<?php echo $link_whatsnew ?>">最終更新</a>
 
 <?php if ($do_backup) { ?>
  | <a href="<?php echo $link_backup ?>">バックアップ</a>
 <?php } ?>
 
  | <a href="<?php echo $link_help ?>">ヘルプ</a>
  ]
 <?php
   if ($trackback) {
    $tb_id = tb_get_id($_page);
 ?>
  &nbsp;
  [ <a href="<?php echo "$script?plugin=tb&amp;__mode=view&amp;tb_id=$tb_id" ?>">TrackBack(<?php echo tb_count($_page) ?>)</a> ]
 <?php } ?>
 
 <?php
   if ($referer) {
 ?>
  [ <a href="<?php echo "$script?plugin=referer&amp;page=$r_page" ?>">リンク元</a> ]
 
 <?php } ?>
 
 </div>
++ 横線表示
 <?php echo $hr ?>
++ [MENUBAR部]/[BODY部]:MENUBAR部およびBODY部のレイアウトおよび送信(表形式による)~
閲覧の場合のみMENU部を送信~
 <?php if (arg_check('read') and exist_plugin_convert('menu')) { ?>
 <table border="0" style="width:100%">
  <tr>
   <td class="menubar">
    <div id="menubar">
     <?php echo do_plugin_convert('menu') ?>
    </div>
   </td>
   <td valign="top">
    <div id="body"><?php echo $body ?></div>
   </td>
  </tr>
 </table>
 <?php } else { ?>
 <div id="body"><?php echo $body ?></div>
 <?php } ?>

++[NOTE部] 脚注部表示送信
 <?php if ($notes) { ?>
 <div id="note">
 <?php echo $notes ?>
 </div>
 <?php } ?> 

++[ATTACH部] 添付ファイル表示送信
 <?php if ($attaches) { ?>
 <div id="attach">
 <?php echo $hr ?>
 <?php echo $attaches ?>
 </div>
 <?php } ?>
++ 横線表示
 <?php echo $hr ?>

++[TOOLBAR部] ツールバー送信~
メニューのみを変える場合には、この部分も変更する。
 <div id="toolbar">
 
 <?php if ($is_page) { ?>
  <a href="<?php echo "$script?$r_page" ?>"><img src="<?php echo IMAGE_DIR ?>reload.png" width="20" height="20" alt="リロード" title="リロード" /></a>
  &nbsp;
  <a href="<?php echo $script ?>?plugin=newpage"><img src="<?php echo IMAGE_DIR ?>new.png" width="20" height="20" alt="新規" title="新規" /></a>
  <a href="<?php echo $link_edit ?>"><img src="<?php echo IMAGE_DIR ?>edit.png" width="20" height="20" alt="編集" title="編集" /></a>
 <?php   if ($is_read and $function_freeze) { ?>
 <?php     if ($is_freeze) { ?>
  <a href="<?php echo $link_unfreeze ?>"><img src="<?php echo IMAGE_DIR ?>unfreeze.png" width="20" height="20" alt="凍結解除" title="凍結解除" /></a>
 <?php     } else { ?>
  <a href="<?php echo $link_freeze ?>"><img src="<?php echo IMAGE_DIR ?>freeze.png" width="20" height="20" alt="凍結" title="凍結" /></a>
 <?php     } ?>
 <?php   } ?>
  <a href="<?php echo $link_diff ?>"><img src="<?php echo IMAGE_DIR ?>diff.png" width="20" height="20" alt="差分" title="差分" /></a>
 <?php   if ((bool)ini_get('file_uploads')) { ?>
  <a href="<?php echo $link_upload ?>"><img src="<?php echo IMAGE_DIR ?>file.png" width="20" height="20" alt="添付" title="添付" /></a>
 <?php   } ?>
  <a href="<?php echo $link_template ?>"><img src="<?php echo IMAGE_DIR ?>copy.png" width="20" height="20" alt="複製" title="複製" /></a>
  <a href="<?php echo $link_rename ?>"><img src="<?php echo IMAGE_DIR ?>rename.png" width="20" height="20" alt="改名" title="改名" /></a>
  &nbsp;
 <?php } ?>
 
  <a href="<?php echo $link_top ?>"><img src="<?php echo IMAGE_DIR ?>top.png" width="20" height="20" alt="トップ" title="トップ" /></a>
  <a href="<?php echo $link_list ?>"><img src="<?php echo IMAGE_DIR ?>list.png" width="20" height="20" alt="一覧" title="一覧" /></a>
  <a href="<?php echo $link_search ?>"><img src="<?php echo IMAGE_DIR ?>search.png" width="20" height="20" alt="検索" title="検索" /></a>
  <a href="<?php echo $link_whatsnew ?>"><img src="<?php echo IMAGE_DIR ?>recentchanges.png" width="20" height="20" alt="最終更新" title="最終更新" /></a>
 
 <?php if ($do_backup) { ?>
  <a href="<?php echo $link_backup ?>"><img src="<?php echo IMAGE_DIR ?>backup.png" width="20" height="20" alt="バックアップ" title="バックアップ" /></a>
 <?php } ?>
 
  &nbsp;
  <a href="<?php echo $link_help ?>"><img src="<?php echo IMAGE_DIR ?>help.png" width="20" height="20" alt="ヘルプ" title="ヘルプ" /></a>
  &nbsp;
  <a href="<?php echo $link_rss ?>"><img src="<?php echo IMAGE_DIR ?>rss.png" width="36" height="14" alt="最終更新のRSS" title="最終更新のRSS" /></a>
 </div> 
 
++ [BOTTOM部]
+++ [[LASTMODIFIED部] 最終更新時間情報の送信~
pukiwiki.ini.php (214:1.4.4)の $lastmod により ON/OFF設定
 <?php if ($lastmodified) { ?>
 <div id="lastmodified">
  Last-modified: <?php echo $lastmodified ?>
 </div>
 <?php } ?>
 
+++ [RELATED部] 関連ページ情報の送信
ページ内への #norelatedの表記により抑制される。
 <?php if ($related) { ?>
 <div id="related">
  Link: <?php echo $related ?>
 </div>
 <?php } ?> 
 
+++ [FOOTER部] 著作権情報などの送信 ~
$modifier-サイトの持ち主 : pukiwiki.ini.php 内で設定~
S_COPYRIHT - PukiWikiプログラム著作権情報 : lib/init.php (32:1.4.4)で定義~
S_VERSION - PukiWikiバージョン情報 : lib/init.php (31:1.4.4)で定義~
 <div id="footer">
  Modified by <a href="<?php echo $modifierlink ?>"><?php echo $modifier ?></a>
  <br /><br />
  <?php echo S_COPYRIGHT ?>
  <br />
  Powered by PHP <?php echo PHP_VERSION ?>
  <br /><br />
  HTML convert time to <?php echo $taketime ?> sec.
 </div>
 
+ HTML BODY 終了
 </body>
+ HTML 終了
 </html>
スキン/技術資料 の履歴差分(No.2)

スキン/技術資料の履歴差分(No.2)
