HOME / コンピュータTips / WikiPlus / デザインをコンバートする
自作デザインをWikiPlus対応にするチュートリアル †
このドキュメントは最新のものが、デベロッパーサイトに転載されています。
デザインの準備 †
WikiPlusはシステムを利用しながらもデザイン自由度が高く、 様々なシチュエーションで満足のいくデザインを当てはめることが出来ます。
しかし、システムでコンテンツ管理をする以上、 「1つのデザインに複数のページを当てはめる」必要があります。
このために、動的に切り替わる部分（概念的には下記）を意識する必要があります。
- コンテンツボディ
- メニューバー（あってもなくても良い）
これらのデザインの形は、一般的なWEBサイトで考慮されるものと同じで、 グローバルナビゲーションが存在するWEBサイトと同じです。
Dreamweaver等を利用している場合は、テンプレートと同じ考え方だと思えば よいでしょう。
デザインを自分で作れない場合は、下記のサイトなどで公開されているデザインがあります。
このような公開されているデザインを利用する場合は、ライセンスの確認は必須で す。利用する用途に応じて、お金を払う必要があったり、 コピーライト表記が必須であったりする場合もあるため、 この部分は各自でチェックする必要があります。
ディレクトリ構造の変更 †
デザインをWikiPlusサーバにインストールするために、 ルールが1つあります。
- 外部参照*1ファイルのリンクはhtml/以下におかなくてはならない。
このために、いくつかの考慮が必要です。
ファイルの移動 †
外部参照型ファイルには次のものがあります。
- イメージ ファイル（<IMGタグで外部参照）
- cssファイル（<link href="html/css"・・・タグで外部参照）
- scripts（<script language="JavaScript"・・・タグで外部参照）
- インラインフレーム（<IFRAME・・・タグで外部参照）
- 等。
これらは、すべて
- html/images
- html/css
- html/scripts
- 等
のディレクトリに移動しなくてはなりません。
また、直下にファイルは直接参照できないので、これらもhtml以下に移動が必要で す。
最終的には、直下のディレクトリが、
- index.html（後でbase.design.htmlにリネームされますが・・・）
- html（ディレクトリ）
のみになるようにしなくてはなりません
| 元の場所 | 移動場所 |
| css/ | html/css/ |
| js/ | html/js/ |
| images/ | html/images/ |
| iframe.html | html/iframe.html |
| title.swf | html/title.swf |
| 等 | |
ファイル移動に関するパスの修正 †
そのままではindex.htmlが崩れてしまっているので、 index.htmlを開き、パスを修正します。
※Dreamweaver等のデザインツールで上記の移動を行った場合は、 自動で行うために、このパスの修正が必要ない場合もあります。
エディタなどで編集している場合は、 移動したファイルを検索し、パスを変更します。 置換などを利用すると良いでしょう。
| 元ファイル | 移行先 |
| style.css | html/style.css |
| images/ | html/images/ |
| js/ | htmlhtml/js/ |
cssファイル内にも、ファイルパスが設定されているので注意しなくてはなりませ んが、cssの相対ファイル対象は、そのcssからの相対であるため、 該当のcssファイルと、cssファイルからの外部参照ファイルとの関係が維持できて いる場合、ディレクトリ関係を操作しなければ、そのまま動作します。
日本語コーデックについて †
デザインファイルの日本語コーデックは、 WikiPlus1.2系ではEUC_JP、WikiPlus1.3系以降ではUTF-8である必要があります。
Dreamweaverなどの古いバージョン（MX等）では、EUC_JPを利用すると文字化けを 起こすことがあります。
- HTMLのメタタグは自動的にシステムが挿入するため、入れてはいけません。
- CSSの場合、先頭に下記のタグをいれてください。
@charset "EUC-JP";
以上の状態で、index.htmlを開き、きちんとしたデザインになることは確認してお いてください。
デザインファイルの編集 †
実際にWikiPlusに組み込むための編集を行います。
index.htmlファイルを元に、base.design.htmlというファイルにコピーします。
そして以下の変数群をbase.design.htmlに入れ、自動的にページのデザインになる ようにします。
変数に関しては、 dev.wikiplus.jp のドキュメントを参考にしてください。
とりあえず入れる変数 †
<head>タグ内に入れる変数 †
まずは<head>タグのエリアに、下記の変数を入れます（1.2.4以降）。
{$headers}
${headers}には、WikiPlus下記の変数内容をすべて含んでいます。
| 変数名 | 内容 |
| {$meta_content_type} | コンテンツ・タイプ。 |
| {$meta_robots} | 検索エンジン巡回の可否。管理ツールから変更できる。 |
| {$javascript} | WikiPlusが用意するjavascriptタグ |
| {$head_tag} | WikiPlusのプラグインが必要とするヘッドタグ |
ほとんどのケースでは、{$headers}のみを記載するだけで問題ありませんが、 どうしてもデザインによって、個別に宣言する必要がある場合は、 個別に記載してください。
※1.2.3以前のバージョンのWikiPlusでは、これらをすべて記載する必要があります。
本文用変数 {$body} †
Wiki本文が入るエリア
{$body}
メニュー用変数 {$menu} †
メニュー領域（MenuBar）が入るエリア
{$menu}
ツールバー、ナビゲーションバーの配置 †
ツールバー、ナビゲーションバーは、編集可能モード（公開用URLでは設定次第、 編集用URLでは必ず）必要になるものです。
下記のものが必要です。
- アイコンが並ぶツールバーは{$toolbar}として配置する。
- テキストベースのボタンが並ぶナビゲーションバーには{$navigaterbar}を設置する。
※この変数は、WikiPlus1.3以降は必要が無くなります。
状況に合わせて入れた方がよい変数 †
サイトタイトル用変数 {$page_title} †
コントロールパネルのオプション設定-サイト名に連動します。
変更場所の例
- <title>
- サイト名としての<h1>など
サイト名はイメージファイルで直接作ることが多いのですが、
title>タグの中は文字列が必要になることがあるでしょう。
ページ名 {$title} †
現在表示中のページ名。
変更場所例
- <title>タグの中
- たとえば、下記のようにすると、サイト名 - ページ名という表現をする。
- <title>{$page_title} - {$title}</title>
ぱんくず（トピック・パス） {$topic_path} †
ぱんくず（トピック・パス）を指定する変数。
トピックパスは、ページ名を/で割った階層構造にすることで、利用すること ができます。
変更箇所例
- {$body}を配置した上など。
削除する項目 †
いくつかの項目は、デザインHTMLファイルから削除しなくてはなりません。
DOCTYPE指定 †
DreamweaverなどでHTMLファイルを作成すると、XMLのDTD表記が付加されます。
これは消去し、同様のものをWikiPlusの管理ツール-DTD選択から 選ぶ必要があります*2。
削除する例（概ね1行目です）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
METAタグ中のContents Type †
<META CONTENTS〜で始まるものは消去する。
- {$headers}、もしくは{$meta_content_type}により自動的に付記されるため。
別個、付記したほうが良いもの †
たとえば、下記のものを付記しておくことで、自動的にRSSを追加します。
<link rel="alternate" type="application/rss+xml" title="RSS" href="{$link.rss}" />
これは、{$headers}では自動的に付記されません。
たとえばニュース/以下のものだけをRSS配信にしたい場合は、
<link rel="alternate" type="application/rss+xml" title="RSS" href="{$link.rss}®ex=^ニュース" />
と記載します。
jrssのドキュメントを参照してください。
以上で、WikiPlusを利用したサイトへ、デザインを適用することが可能になります。
WikiPlus契約の開発会社用FTPアクセス権でFTPサーバに接続し、 下記のものをwikitemplate/ディレクトリ以下にアップロードしてください。
- base.design.html
- html/ディレクトリ以下
エラー回避 †
全く何も出なくなってしまった時 †
デザインのアップロード直後に全く画面が出なくなってしまった場合、エラーが出 ている可能性があります。
その場合は
''エラーログ表示（開発会社専用URL）'
https://収容サーバ名/~ユーザID/logwatch.php
にアクセスし、エラーログをみてください。
謎エラー †
下記のようなスタイルシートの宣言があると、Smartyでエラーが出ます。
<!--[if lt IE 7]>
<style type="text/css" media="screen">
#menuh{float:none;}
body{behavior:url(csshover.htc); font-size:75%;}
#menuh ul li{float:left; width: 100%;}
#menuh a{height:1%;font:normal 1em/1.6em "Trebuchet MS", helvetica, arial, sans-serif;}
</style>
<![endif]-->
次のようなエラーです。
[client 61.197.171.162] PHP Fatal error: Smarty error: [in base.design.html line 28]: syntax error: unrecognized tag: float:none; (Smarty_Compiler.class.php, line 436) in /home/www/kohju.justplayer.com/wikisettings/smarty/libs/Smarty.class.php on line 1090
どうどう対応すべきかは、現在の課題です。
CSSの追加 †
Wikiコンテンツ内のデザインはCSSで行う必要があります。
利用するデザインがCSSで、ある程度の体系化されたデザインであれば、 およそそのまま表示することができます。
しかし、そうでない場合は、いくつかのcssを追加しなくてはなりません。
私が選んだデザインは、h2〜h4の扱いが無かったので、それっぽいデザインを入れ てみました。h2〜h4の関係は次の通りです
| HTMLタグ | Wiki書式 | 意味 |
| h2 | * | 見出しレベル1 |
| h3 | ** | 見出しレベル2 |
| h4 | *** | 見出しレベル3 |
次のようにしてみました。
/* --- TITLE * -------------------------------------------------------- */
h2 {
font-size: 160%;
font-family: "A-OTF 新ゴ Pro M","メイリオ",verdana, arial, helvetica, Sans-Serif,"ＭＳ ゴシック";
color:#fff;
background-color:#6E6A5A;
padding:.1em;
border:0px;
margin:0px 0px .5em 0px;
font-weight: bold;
}
/* --- TITLE ** -------------------------------------------------------- */
h3 {
font-size: 120%;
font-family: "A-OTF 新ゴ Pro M","メイリオ",verdana, arial, helvetica, Sans-Serif,"ＭＳ ゴシック";
border-left: 10px solid #404040;
color:#fff;
background-color:#6E6A5A;
padding:.3em;
margin:0px 0px .5em 0px;
font-weight: bold;
}
/* --- TITLE *** -------------------------------------------------------- */
h4 {
font-size: 100%;
font-family: "A-OTF 新ゴ Pro M","メイリオ",verdana, arial, helvetica, Sans-Serif,"ＭＳ ゴシック";
border-left: 18px solid #404040;
color:inherit;
background:transparent;
padding:.3em;
margin:0px 0px .5em 0px;
font-weight: bold;
}
また、左に置いたメニューバーなどは、若干小さくなくてはいけません。 たまたま、このデザインではメニューバーのエリアをleftnaviという<div>タグで 囲っていたため、div#leftnavのスタイルを縮小気味にしてみました。
MenuBarのスタイル
<div id="leftnav">
{$menu}
</div>
これにあわせたCSS
/* --- MENU BAR AREA-------------------------------------------------------- */
div#leftnav {
width: 180px;
padding: 0px;
margin: 0px 0px 10px 0px;
word-break: break-all;
font-size:80%;
overflow:hidden;
word-break: break-all ;
}
div#leftnav ul {
margin:0px 0px 0px .9em;
padding:0px 0px 0px .9em;
}
div#leftnav ul li { line-height:150%; }
*1 htmlファイルからブラウザ経由で呼び出されるファイルのこと
*2 この選択をすることで各種プラグインも、自動的にDTDにあったものを出力します
