HOME / コンピュータTips / WikiPlus / デザインをコンバートする
Date: 2010/09/03 |
|
Tags: WikiPlus, デザインコンバート
自作デザインをWikiPlus対応にするチュートリアル
このドキュメントは最新のものが、デベロッパーサイトに転載されています。
デザインの準備
WikiPlusはシステムを利用しながらもデザイン自由度が高く、様々なシチュエーションで満足のいくデザインを当てはめることが出来ます。
しかし、システムでコンテンツ管理をする以上、「1つのデザインに複数のページを当てはめる」必要があります。
このために、動的に切り替わる部分（概念的には下記）を意識する必要があります。
- コンテンツボディ
- メニューバー（あってもなくても良い）
これらのデザインの形は、一般的なWEBサイトで考慮されるものと同じで、グローバルナビゲーションが存在するWEBサイトと同じです。
Dreamweaver等を利用している場合は、テンプレートと同じ考え方だと思えばよいでしょう。
デザインを自分で作れない場合は、下記のサイトなどで公開されているデザインがあります。
- http://www.opendesigns.org/
このような公開されているデザインを利用する場合は、ライセンスの確認は必須です。利用する用途に応じて、お金を払う必要があったり、コピーライト表記が必須であったりする場合もあるため、この部分は各自でチェックする必要があります。
ディレクトリ構造の変更
デザインをWikiPlusサーバにインストールするために、ルールが1つあります。
- 外部参照((htmlファイルからブラウザ経由で呼び出されるファイルのこと))ファイルのリンクは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選択から選ぶ必要があります((この選択をすることで各種プラグインも、自動的にDTDにあったものを出力します))。
削除する例（概ね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%; }