- 追加された行はこのように表示されます。
- 削除された行は
このように表示されます。
{{category 入門}}
!目次
{{outline}}
!!!デザインも重要
webサイトにおいて、「見栄え」も使い勝手に影響する無視できない要素です。FreeStyleWiki では基本的に、「テーマ」によってサイト全体の見栄えを決め、要素については CSS で変更できるようになっています。
標準のテーマである「default」はなかなか見やすく使いやすいデザインです。しかし、いろいろな「FreeStyleWiki」サイトを見ているとみんな同じで飽きてくるということもありますし、WikiFarm を使っていると全く同じにしか見えないのでサイトごとにテーマを変えて印象に変化を与えたいと思うようになってきます。
そこで、ここではいくつかのテーマの紹介と、CSSについてを述べます。
!!各種テーマ
管理者でログインし、上部メニューの「ログイン」から「スタイル設定」をクリックすることでデザイン変更をするメニューになります。「テーマ」でテーマを変更すると画面がガラリと変わります。標準でインストールされているのは「default」と「kati」だけ(バージョン 3.6.3から「blue_pipe」が追加)です。試しに「kati」に変えてみましょう。
{{ref_image FreeStyleWikiSiteStyle.gif}}
'''標準でインストールされているテーマ「kati」'''
この「kati」もなかなか使いやすいテーマです。ページタイトル部分の画像がいい感じです。
!テーマの追加のしかた
公式サイト(http://fswiki.org/)のメニューに「テーマ投稿」があります。ここから各種テーマの圧縮ファイルをダウンロードして解凍ソフトで解凍。FTPを使ってFreeStyleWikiがインストールされているディレクトリ内の「theme」ディレクトリにフォルダごとアップロードすればテーマを追加することができます。これだけで、選択できるテーマが自動的に増えます。
また、追加されたテーマは WikiFarm 上でも使うことができますので、子wikiをたくさん作る予定の場合は予め使えそうなテーマをできるだけ入れておいた方が、子wiki のサイトの性格ごとにテーマを変えることができ、よりバラエティに富んだサイトになるでしょう。
!width:800px;固定のテーマ
公式サイト内テーマ投稿の「BugTrack-theme/17(width:800px;固定のテーマ)」です。
{{ref_image FreeStyleWikiSiteStyle-17.gif}}
スッキリした画面で、敢えて幅を800px固定にするのは見やすいですね。最近では Yahoo! も横幅が広くなりましたが、一昔前までは「企業サイトは800px」でした。これは閲覧者のディスプレイが15インチが多かったこともありますが、一画面での情報量がそれほど多くない場合は間延びせずきちんとしたイメージになります。
!clover
同じく公式サイト「BugTrack-theme/2(clover)」です。
{{ref_image FreeStyleWikiSiteStyle-02.png}}
クローバーのアクセントがオシャレなスッキリしたデザインです。これもお薦めです。
!tDiaryのテーマ
インストール直後の FrontPage にも書いてありますが、tDiaryのテーマがそのまま使えます。tDiary.org(http://www.tdiary.org/)にアクセスして「テーマ」を選ぶと膨大なテーマが投稿されたギャラリーになっています。基本的にシンプルなものの方が使いやすいと思います。
!!CSSをいじる
CSSを変更すれば部分的に変えられると書きましたが、「何を」変えればいいのかがなかなか難しいところです。tDiary のテーマが使えるということは基本的にdiv要素のid名やclass名が共通しているようになっている訳です。以下の図は tDiary でのテーマ作りの参考にされている図です。
{{ref_image tdiary_css.png}}
*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の適用の順番
+テーマ
+ユーザ定義スタイル
の順番に適用されます。CSSは同じものを定義した場合、後からの定義が有効になるので、まず、テーマに設定したCSSに上書きする形でユーザ定義スタイルに設定したものが適用されます。ちなみに、テーマは外部ファイルとして、theme ディレクトリ内の「.css」ファイルをリンクで読み込み、ユーザ定義スタイルは HTMLの<head>内に<style>として直接書き込まれます。
の順番に適用されます。
ユーザ定義スタイルは、管理者でログインした状態で、ログイン−スタイル設定から「ユーザ定義スタイル」の中を変更して保存することで適用されます。
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;
}
これで図のような色に変わります。
{{ref_image FreeStyleWikiStyleGreen.gif}}
[[FreeStyleWiki 入門8]]へ