※ここの情報は古い情報です。2.0では仕様が異なります。

テーマのデザイン

PukiWikiではページのテンプレートデザインのことを、スキンだったり、テーマだったりと読んでいましたが、Adv.では「テーマ」という単語に統一します。

PukiWiki Adv.のテーマファイルの仕様

PukiWiki Adv.用のテーマは、HTML5に対応させたり、JavaScriptのパフォーマンスを最大限に出す都合上、他のPukiWikiと互換性がありません!PukiWiki Adv.用のスキンをオリジナル版やPlus!で使うことはできません。(その逆は条件付きで使用可能です。)

圧縮転送にob_gzhandler関数を用いています。スキンを呼び出したあと、ob_end_flush();が実行されるようになっているため、特にデザイナー側が意識することはありません。

PukiWiki Adv.では、画像読み込みを高速化するためCSSスプライトを用いてUIアイコンを表示しています。このため、PLUGIN_ATTACH_FILE_ICONのような、Imgタグによるアイコンの多くが廃止になっています。代わりにclass属性で定義します。<span class="pkwk-icon icon-new"></span>のように空白のspanタグを用いてアイコンを表現します。

例:

 <a href="http://pukiwiki.logue.be/?cmd=newpage&amp;refer=Technical+Note%2FTheme+Design" rel="nofollow"><span class="pkwk-icon icon-new"></span>新規</a>

ヘッダー部分

一般的なAdv.用スキンのヘッダー部分は下記のようになります。$pkwk_metaには、metaタグとlinkタグが入ります。$pkwk_headには、スキンスクリプトやプラグインで指定された$head_tags[]が入ります。

// Output HTML DTD, <html>, and receive content-type
$meta_content_type = (isset($pkwk_dtd)) ? pkwk_output_dtd($pkwk_dtd) : pkwk_output_dtd();
?>
	<head>
		<?php echo $meta_content_type; ?>
		<?php echo $pkwk_head; ?>
		<title><?php echo $page_title; ?></title>
	</head>

自動生成されるヘッダー部分のタグ

Yslowでは、ヘッダー部分のタグは、メタタグ、Linkタグ(スタイルシート)Scriptタグの順番に出力することが推奨されています。このため、ヘッダー部分の出力が$meta_content_typeと、$pkwk_metaと、$pkwk_headの3つにわかれています。

$meta_content_typeで出力されるタグ

<meta http-equiv="content-type" content="text/html" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-language" content="[言語コード]" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-Frame-Options" content="deny" />

なお、HTML5の場合はhttp-equivが非推奨になったため出力されません。HTMLヘッダーのみ出力される仕様になります。

<meta charset="UTF-8" />

ヘッダー出力のうち、X-UA-Compatibleは、ブラウザのレンダリングモード指定、X-Frame-Optionsは、クリックジャッキング対策です。詳細はリンクをクリックしてください。

$pkwk_headで出力されるメタタグ

pukiwiki.ini.phpで$google_site_verificationや、$yahoo_site_explorer_id$bing_siteidなどが指定されている場合は、自動的にここに追記されます。

なお、スキン側のスタイルシートは、スキン名.ini.phpから読み込まれます。

<meta name="generator" content="PukiWiki Advance v1.0 beta2" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta property="og:title" content="ページ名" />
<meta property="og:locale " content="ja_JP" />
<meta property="og:type" content="website" />
<meta property="og:url" content="[正規化されたページのURL]" />
<meta property="og:image" content="サイトのロゴ" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:description" content="要約文" />
<meta property="og:updated_time" content="更新日時" />

<link rel="dns-prefetch" href="//ajax.aspnetcdn.com" />
<link rel="alternate" href="[スクリプト]?cmd=mixirss" type="application/rss+xml" title="RSS" />
<link rel="archive" href="[スクリプト]?cmd=backup&amp;page=[ページ名]" type="text/html" title="バックアップ" />
<link rel="canonical" href="[正規化されたページのURL]" type="text/html" title="" />
<link rel="contents" href="[スクリプト]?MenuBar" type="text/html" title="" />
<link rel="sidebar" href="[スクリプト]?SideBar" type="text/html" title="" />
<link rel="glossary" href="[スクリプト]?Glossary" type="text/html" title="" />
<link rel="help" href="[スクリプト]?cmd=help" type="text/html" title="ヘルプ" />
<link rel="first" href="[スクリプト]?FrontPage" type="text/html" title="ホーム" />
<link rel="index" href="[スクリプト]?cmd=list" type="text/html" title="一覧" />
<link rel="search" href="[スクリプト]?cmd=search&amp;format=xml" type="application/opensearchdescription+xml" title="PukiWiki Advance検索"/>
<link rel="search" href="[スクリプト]?cmd=search" type="text/html" title="検索" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/[jQueryUIのバージョン]/themes/[任意のテーマ]/jquery-ui.css" type="text/css" id="ui-theme" />
[任意のスタイルシート]
<script type="text/javascript" src="/skin/js/modernizr-1.6.min.js"></script>

ogが含まれる要素は、Open Graph Protocol用のもので、FacebookなどのSNSから参照されるときに使用されます。

正規化されたページのURLは、サーチエンジンに渡すページのURLです。$static_urlが有効な場合は、そのアドレスが入力されます。スクリプトレベルでのSEOは特に意識する必要はありません。

$pkwk_tagsで出力されるタグ

現在jQuery専用になっていますが、今後dojoやsenchaなどにも対応させたいので、仕様が変更になる可能性があります。

<script type="text/javascript">/*<![CDATA[*/
var DEBUG = "1";
var DEFAULT_LANG = "ja_JP";
var IMAGE_URI = "/adv/webroot/image/";
var JS_URI = "/adv/webroot/js/";
var LANG = "ja_JP";
var SCRIPT = "http://localhost/adv/webroot/";
var SKIN_DIR = "/adv/webroot/skin/";
var THEME_NAME = "default";
var PAGE = "FrontPage";
var MODIFIED = "1343203776";
/*]]>*/</script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.24/jquery-ui.min.js" defer="defer"></script>
<script type="text/javascript" src="/js/src/tzCalculation_LocalTimeZone.js" defer="defer"></script>
<script type="text/javascript" src="/js/src/activity-indicator.js" defer="defer"></script>
<script type="text/javascript" src="/js/src/jquery.a-tools.js" defer="defer"></script>
<script type="text/javascript" src="/js/src/jquery.beautyOfCode.js" defer="defer"></script>
<script type="text/javascript" src="/js/src/jquery.cookie.js" defer="defer"></script>
<script type="text/javascript" src="/js/src/jquery.dataTables.js" defer="defer"></script>
<script type="text/javascript" src="/js/src/jquery.i18n.js" defer="defer"></script>
<script type="text/javascript" src="/js/src/jquery.jplayer.js" defer="defer"></script>
<script type="text/javascript" src="/js/src/jquery.lazyload.js" defer="defer"></script>
<script type="text/javascript" src="/js/src/jquery.query.js" defer="defer"></script>
<script type="text/javascript" src="/js/src/jquery.superfish.js" defer="defer"></script>
<script type="text/javascript" src="/js/src/jquery.tabby.js" defer="defer"></script>
<script type="text/javascript" src="/js/src/jquery.ui.rlightbox.js" defer="defer"></script>
<script type="text/javascript" src="/js/src/skin.original.js" defer="defer"></script>
<script type="text/javascript" src="/js/locale.js" defer="defer"></script>
<script type="text/javascript" src="/skin/theme/default/default.js" defer="defer"></script>

IEのHTML5対応処理は、Modernizrが行います。

PukiWiki Adv.では、$head_tagsと$foot_tagsが非推奨になっています。原則的にModernizr以外のJavaScriptをHeadタグ内に入れることはできません。よって、href="javascript:関数名()"のような表記や、onclickなどの属性は一切使えません。

フッター部分

$relatedおよび、$attaches、$note_footerの仕様が変更になっています。$relatedと$attachesは<dt>タグと、<dd>タグで描画しています。また、注釈も、<li>タグを使ったものになっており、ハイライト時に、そこの文章がブロック単位でハイライトするようになっています

スタイルシートについて

ページの段組み

layout.png

ベージの基本的デザインは、基本的に以下の要素に分かれます。

原則的にこのレイアウトを守るようにデザインしていけば問題ありません。(どこの位置に何を置くかは自由ですけど)

また、Adv.および、Plus!ではこれに加えて以下の要素が使えます。

  • Headarea(WikiでHeaderの内容を指定)
  • Navigator(NaviBarをWikiで指定。ポップアップメニューにする)
  • SideBar(3段組みにする)
  • Footarea(WikiでFooterの内容を指定)

これらの要素は、ページが存在しない時のことを考慮してください。また、MenuBarは編集画面などでは表示されないようになっています。

CSSについて

jQuery UIのCSS

jQuery UIのCSSは、フォームのデザイン、インラインウィンドウなどといったUIのデザインを指定します。以下から選んでください。

base, black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks
humanity, le-frog, mint-choc, overcast, pepper-grinder, redmond, smoothness, south-street,
start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, vader

jQuery UI Theme Rollerでサンプルを見ることができます。また、同じページで自作のテーマファイルを作ることができます。

scripts.css.php

PukiWiki Adv.は、HTML5対応を前提に設計しています。HTML5では、これまでのHTMLと異なり、スタイルシートでブロック型と指定しないとブラウザによって、デザインの統一が取れなくなる可能性があります。そこで、PukiWiki Adv.では、HTML5 Boilerplateを用いていてリセットしています。

この他、絵文字入力やプラグイン、JavaScriptにより生成されるウィジットなどは、このscript.css.phpで指定しています。特別な理由がない限り、極力一番最初にこのCSSを読み込ませるようにしてください。

iconsetについて

これは、PukiWiki Adv.で使われるアイコンを指定します。default以外にcrystal、nuvola、oxygenなどが使えるようになる予定です。アイコンの仕様や変更点に関しては、Technical Note/Iconをご覧になってください。

最低限この2つを、記入した上でデザインしてください。

Modernizr1

なお、HTML5サポートとはいえ、すべてのブラウザが必ずしもサポートしているとは言えませんし、仮にサポートしていても解釈の違いなどがあるかもしれません。そこで、標準でModernizrが入れられています。このModernizrは、ブラウザのサポート状況によってhtmlのclass属性に使用可能な要素をクラス名で追記していくスクリプトです。例えば、canvasタグをサポートしているとき<canvas>タグを表示したい場合、スタイルシートで以下のように入力することで簡単に切り替えることができます。

.canvas canvas{ display:block; }
.no-canvas canvas{ display:none; }

この例では、canvasタグが使えない場合、canvasタグが見えなくなります。実際は、excanvasでIEでもcanvasを実装しているため、上の例は、そのまま使わないでください。

このスクリプトは、IEでHTML5をサポートさせる処理でも使用します。

Modernizrを用いたIE8未満のCSS3の実装

角丸などの処理は、border-radiusを使いましょう。IEでは対応していませんが、スキンスクリプトで、ie-css3.htcを読み込ませることでIEでも角丸が使えます。(もちろんCSSに書いてもかまいませんが、推奨しません。)スキンスクリプトの詳細は、../JavaScriptを参考にしてください。

pukiwiki_skin.custom.before_init = function{
	if (Modernizr.borderradius !== true){
		$([角丸を適応したいクラス名]).css({
			'behavior': 'url('+SKIN_DIR+'js/ie-css3.htc)'
		});
	}
};

この他に、text-shadow、box-shadowがIEでも使えます。判定処理は、以下の関数を使うといいでしょう。

CSS3判定フラグCSSによる判別
border-radiusModernizr.borderradius.boderradius
box-shadowModernizr.boxshadow.boxshadow
text-shadowModernizr.textshadow.textshadow

ただし、あくまでもhtcで無理やり実装しているため完璧ではありません。スクリプトで実装しているので当然重くなります。(それでも、直接CSSに記入するよりも速いですが)詳細は、CSS3 support for Internet Explorer 6, 7, and 8を見てください。

あるいは、pukiwiki.ini.phpで$x_ua_compatibleの値をIE=edge,Chrome=1にするという方法もあります。

オリジナルとの主な変更点

リストの$_list_pad_strは、廃止になっています。2スタイルシートで設定してください。一番大きな変更点は、アイコン等をスタイルシートで表示するようになったことと、attach、relatedです。attachとrelatedはdlタグ、noteはulタグを用いたものになっています。つまり、リストと同じ扱いです。オリジナルと同じように表示したい場合は、以下のようにスタイルシートを入れてください。なお、フォントサイズは任意で決めてください。

#attach{
	margin:0px 1%;
}

#related{
	font-size:93%;
}

#attach, #related{
	clear:both;
	margin:10px 0px;
}

#attach dl, #related dl{
	display:block;
}

#attach dl dt, #related dl dt{
	margin-left:0.5em;
	margin-top:0px;
	float:left;
	font-weight:normal;
}

#attach dl dd, #related dl dd{
	margin-left:0.5em;
	padding:0.1em;
	display:block;
	float:left;
}

フォントサイズについてのガイドライン

フォントサイズの指定ですが、一般的にpxやptで指定するのは好ましくありません。というのは、拡大縮小をしたときにフォントサイズがブラウザによっては固定されてしまうためです。また、bodyだけを固定し、残りの要素を%で指定することもありますが、これもやはりブラウザによって、bodyのフォントサイズに対して何%のサイズか、それともブラウザ規定のフォントサイズに対して何%のサイズかというように、解釈が分かれてしまいます。これを防ぐために、すべて%で指定するようにしましょう。しかし、どれくらいの大きさになるのか、分かりにくいと思います。そこで、Fonts CSSが参考になります。ここのパーセンテージ通りに入れれば、割とすんなりサイズを決めることが出来ると思います。

px単位のサイズ実際のパーセンテージ
1077
1185
1293
13100
14108
15116
16123.1
17131
18138.5
19146.5
20153.9
21161.6
22167
23174
24182
25189
26197

便利なテクニック

1カラムモード、2カラムモード、3カラムモードの切替

if (arg_check('read') && exist_plugin_convert('menu')) {
	$layout_class = (arg_check('read') && exist_plugin_convert('side') && is_page($sidebar) ? 'three-colums' : 'two-colums');
}else{
	$layout_class = '';
}

このコードで、$layout_classに2カラムの時はtwo-colums、3カラムの時はthree-columsが入ります。これを利用して、CSSのみでカラムモードを切り替えることが可能です。

関連サイト