トップ 差分 一覧 ソース 検索 ヘルプ PDF RSS ログイン

FreeStyleWiki 入門7

ここで公開している内容は管理者・こいたろうが独自に作成しているコンテンツです。公式サイト(http://fswiki.sourceforge.jp/cgi-bin/wiki.cgi)とは関係ありません。

[入門]

目次


デザインも重要


 webサイトにおいて、「見栄え」も使い勝手に影響する無視できない要素です。FreeStyleWiki では基本的に、「テーマ」によってサイト全体の見栄えを決め、要素については CSS で変更できるようになっています。
 標準のテーマである「default」はなかなか見やすく使いやすいデザインです。しかし、いろいろな「FreeStyleWiki」サイトを見ているとみんな同じで飽きてくるということもありますし、WikiFarm を使っていると全く同じにしか見えないのでサイトごとにテーマを変えて印象に変化を与えたいと思うようになってきます。

 そこで、ここではいくつかのテーマの紹介と、CSSについてを述べます。

 各種テーマ


 管理者でログインし、上部メニューの「ログイン」から「スタイル設定」をクリックすることでデザイン変更をするメニューになります。「テーマ」でテーマを変更すると画面がガラリと変わります。標準でインストールされているのは「default」と「kati」だけ(バージョン 3.6.3から「blue_pipe」が追加)です。試しに「kati」に変えてみましょう。

標準でインストールされているテーマ「kati」

 この「kati」もなかなか使いやすいテーマです。ページタイトル部分の画像がいい感じです。

テーマの追加のしかた


 公式サイト(http://fswiki.sourceforge.jp/cgi-bin/wiki.cgi)のメニューに「テーマ投稿」があります。ここから各種テーマの圧縮ファイルをダウンロードして解凍ソフトで解凍。FTPを使ってFreeStyleWikiがインストールされているディレクトリ内の「theme」ディレクトリにフォルダごとアップロードすればテーマを追加することができます。これだけで、選択できるテーマが自動的に増えます。
 また、追加されたテーマは WikiFarm 上でも使うことができますので、子wikiをたくさん作る予定の場合は予め使えそうなテーマをできるだけ入れておいた方が、子wiki のサイトの性格ごとにテーマを変えることができ、よりバラエティに富んだサイトになるでしょう。

width:800px;固定のテーマ


 公式サイト内テーマ投稿の「BugTrack-theme/17(width:800px;固定のテーマ)」です。


 スッキリした画面で、敢えて幅を800px固定にするのは見やすいですね。最近では Yahoo! も横幅が広くなりましたが、一昔前までは「企業サイトは800px」でした。これは閲覧者のディスプレイが15インチが多かったこともありますが、一画面での情報量がそれほど多くない場合は間延びせずきちんとしたイメージになります。

clover


 同じく公式サイト「BugTrack-theme/2(clover)」です。


 クローバーのアクセントがオシャレなスッキリしたデザインです。これもお薦めです。

tDiaryのテーマ


 インストール直後の FrontPage にも書いてありますが、tDiaryのテーマがそのまま使えます。tDiary.org(http://www.tdiary.org/)にアクセスして「テーマ」を選ぶと膨大なテーマが投稿されたギャラリーになっています。基本的にシンプルなものの方が使いやすいと思います。

 CSSをいじる


 CSSを変更すれば部分的に変えられると書きましたが、「何を」変えればいいのかがなかなか難しいところです。tDiary のテーマが使えるということは基本的にdiv要素のid名やclass名が共通しているようになっている訳です。以下の図は tDiary でのテーマ作りの参考にされている図です。

  • http://tnat.net/ さんより勝手にいただいています。

 大ざっぱには上図でだいたい判ると思います。

 ただ FreeStyleWiki では若干異なる部分があります。div.main の最初に、div.adminmanu があります。そして、さらに、div.header があってから、h1 の要素になります。また、div.footer も div.main の中にあります。つまり div.sidebar の方が大きいようになっています。
 また、サイドバー(Menu ページ)が存在しない場合、div.main そのものがありません。h1 が生のままになっていることになります。

 各種プラグインにはそれぞれ固有の id が振られているのが普通なので、一度プラグインの表示をして、ソースで確認するのが手っ取り早いと思います。

 ※バージョン3.6.3 で変更になりました。div.adminmanu が一番外側、h1要素は裸、div.main が始まります。div.header は div.main の中ですが、div.footer は外のようです。div.sidebar と div.main が独立しているのは変わりありません。つまり上図に近い形になり、より tDiary のテーマとの互換性が高まったということです。

CSSの適用の順番


  1. テーマ
  2. ユーザ定義スタイル

の順番に適用されます。
 ユーザ定義スタイルは、管理者でログインした状態で、ログイン−スタイル設定から「ユーザ定義スタイル」の中を変更して保存することで適用されます。
 CSSは同じものを定義した場合、後からの定義が有効になるので、まず、テーマに設定したCSSが適用され、そこに上書きする形でユーザ定義スタイルに設定したものが適用されます。
 ちなみに、テーマは「外部ファイル」として、theme ディレクトリ内の「.css」ファイルをリンクで読み込み、ユーザ定義スタイルは HTMLの<head>内に<style>として直接書き込まれます。

CSSの変更例


 例えば、標準の「default」テーマにおいて、大見出しや小見出しの水色っぽい部分を緑っぽくしてみましょう。

 管理者で「ログイン」から「スタイル設定」をクリックして、ユーザ定義スタイルのテキストボックスの最後に次のように付け加えました。

div.body p {
  text-indent   : 0px;
}

h2 {
	background-color : #55ea9a;
}

h3 {
	border-left   : #55ea9a 10px solid;
	border-top    : #55ea9a 5px solid;
	border-right  : #55ea9a 1px solid;
	border-bottom : #55ea9a 1px solid;
}

h4 {
	border-left   : #55ea9a 10px solid;
}

dt {
	border-bottom : #44ee44 1px dotted;
}

div.comment {
	background-color : #eeffee;
	border           : #00fa9a 1px solid;
}

div.sidebar {
	background-color: #eeffee;
}

これで図のような色に変わります。


FreeStyleWiki 入門8

FreeStyleWikiSiteStyle-02.png FreeStyleWikiSiteStyle-17.gif FreeStyleWikiSiteStyle.gif FreeStyleWikiStyleGreen.gif tdiary_css.png

最終更新時間:2010年08月17日 16時07分16秒