スタイルガイド

　Gumikiは、レルム単位でスタイルシートを変えることができ、これによってサイトやコンテンツの雰囲気をガラリと変えることができます。
　スタイルシートはGumikiの基本セットの中に含まれており、レルム管理画面から指定できます。ver1.2系から基本スタイルの入れ替えを行いまして、現在は15種のスタイルを用意しています。

　基本セット以外のGumikiスタイルを指定したい場合は、/css/plugin フォルダの中にスタイルシートファイルを設置すればプラグイン的に認識されるようになります。スタイルシートは少し勉強すれば自分で作ることができると思いますし、基本セットのスタイルから手直しするのも良いと思います。

→基本スタイルだと何か物足りない人は…

Type1～Type3について

　標準セットのスタイルシートの構成は、Type1スタイルが8種類、Type2スタイルが5種類、Type3スタイルが2種類となっています。Type1～Type3はレイアウト配置の基本構成によって、以下のように定義されています。

Type1スタイル

　左にサイドメニューがあり、右側の広い領域をメインとする単純２層スタイルです。
　「Menu」という名前のページが必須となり、これがサイドメニューとなります。
　Type1はヘッダー領域をサポートしていません。
　「Header」という名前のページを作るとレイアウトが崩れる場合があります。但し、サイトのタイトルや広告バーを表示させる目的において、右揃えなどでうまく調整することにより活用できる場合があります。

Type2スタイル

　ページ上部にヘッダ領域があり、その下の領域に左＝サイドメニュー、右＝メインという構成で成り立つスタイルです。最近のウェブサイトでもっともオーソドックスとなっているレイアウトです。
　「Header」という名前のページが必須となり、これがヘッダーとなります。
　「Menu」という名前のページが必須となり、これがサイドメニューとなります。

Type3スタイル

　３段組だったり１段表示だったりなど、Type1～Type2の分類から外れるスタイルシートです。用いるスタイルシート毎にルールが存在しており、これに沿ったページ作成が求められます。

基本セットのスタイルシートの紹介

　基本セット（ver1.2系列）の15種類のスタイルシートの紹介です。
　あとでイメージ画像も用意しようと思います。

Type1: 青(110)

　シンプルな青系統のスタイルです。FreeStyleWiki(Lite）の標準スタイルシートを元にさせていただきました。
　なお、カッコ内に３桁の数値を記述していますが、これはスタイルシートの識別コードです。

Type1: 青装飾有(111)

　110番のスタイルにちょっとだけ画像ファイルを追加して見栄えを綺麗にしたものです。

Type1: シンプルブルー(112)

　飾り気を排除し、テキストを表示することを目的としたスタイルです。

Type1: 緑(120)

　110番の色違いバージョンです。

Type1: 緑装飾有(121)

　111番の色違いバージョンです。

Type1: 茶(130)、黄(140)、桃(150)

　110番の色違いバージョンです。この３種類には青や緑のような画像装飾スタイルはありません。（ver1.2以前では茶装飾有スタイルがありましたが廃止となりました）

Type2: 青白(210)

　青紫のヘッダ領域がありますが、基本的には白ベースのかなり素っ気無いスタイルです。ライブラリ的なページを作る場合を想定して用意しました。

Type2: 若草(220)

　緑系統のホンワカしたスタイルです。いま見ているこのGumiki公式サイトのスタイルが若草を用いています。

Type2: CoolShade - 画像なし(230)

　210番が素っ気無すぎたので、110番の青スタイルと220番の若草をミックスさせた青系統のスタイルです。

Type2: CoolShade - 画像あり(231)

　230番に画像を付けて若干ゴージャスにしたもの。「鷹月ぐみな情報局」にて使っているスタイルです。

Type2: 黒(240)

　基本セット唯一の黒系スタイルです。

Type3: ハードグレイ(310)

　グレー色調のスタイルです。唯一の３段組のスタイルとなっています。
　また、横幅が770pixelに固定されています。（その他のほとんどのスタイルはブラウザの横幅にあわせて拡縮するタイプ）

　ヘッダ部は「Header」というページで作ってください。
　「Menu」ページを作れば、左サイド領域となります。
　「__Menu」（アンダースコア２つ！）というページを作れば右サイド領域となります。但しこの右サイド領域は左サイドと違い、背景部分が後ろに透過しています。


　このように記述すると、左サイドと同様の背景枠が描画されるようになります。

Type3: フロントブルー(320)

　ヘッダはあるもののサイドメニューの存在しないスタイルです。
　また、横幅が680pixelに固定され、中央にセンタリングされて表示されます。

　「Header」ページを用意してください。画面上部のヘッダとして表示されます。
　「Menu」ページを用意してください。ヘッダのすぐ下に表示されます。但し１行分のデータしか表示されず、残りはトリムされて見えませんので注意してください。ここは主に「トップページ　日記　コンテンツ　掲示板　リンク」などと言ったグループコンテンツへのリンクを張るために用意された領域となります。

　こんな感じで記述すればリンクが出来上がると思いますが、Gumikiには「１行内に複数のリンクを連続して作ると文字化けを起こすことがある」という既知のバグが確認されています。この場合ですが、
　と、行末折り返し禁止記号（｜）を付与して複数行に分割することで不具合の回避が可能です。（#start_nobr ～ #end_nobr で括る方法もあります。こちらの場合は行末折り返し禁止記号（｜）が不要となります）

基本セットスタイルに足りないものとか

見るからに可愛いスタイルがほとんどありません。(若草くらい）
14種類が白系であり、黒系のスタイルは１つしか用意していません。

基本セットでは物足りない人は

　これらのレイアウトはスタイルシート(css)によって作成されています。スタイルシートを勉強することにより、自分なりのWebレイアウトでGumikiを動かすことができます。
　ただし、満足のいくスタイルシートを作れるようになるには多少なり時間が掛かるとは思います。最初は、基本セットのスタイルシートをコピーして変更を加えてみることをお薦めします。

　なお、事業主様が「Gumikiを活用したいけど、レイアウトはもっとリッチな画像を使い、専用のものにしたいなあ」とお考えでしたら、有償にて作成を受け付けております。詳細はお問い合わせください。

---

→TopPage