スタイルシートについて
スタイルシートの定義の仕方
スタイルシートを定義するには、「CSS」というページを作って、 そこに通常 CSS ファイルに記述する内容を「そのまま」書いてください。 (プレビューの際、空行以外の行がつながってしまいますが、特に問題ありません)
サンプル
ページリンク | 内容 |
---|---|
wifky の標準テーマ | |
CSS_tDiary標準 | tDiary の標準テーマの移植 ※ |
CSS_fswiki | FreeStyleWiki の標準テーマの移植 ※ |
CSS_hatena | はてなの標準テーマの移植 ※ |
CSS_nyaos.org/top | nyaos.org のトップ |
CSS_softgold | tDiary のテーマの一つ SoftGold の移植 ※ |
※ 1.0 にて利用の際は、設定「imitate tDiary's style (put header in mainframe..)」のチェックを ON する必要があります。(wifky 1.1以降では設定が廃止され、常に ON と等価状態になっているため、不要です)
全体のページ構成
[1] 1.0.* 系(デフォルト)
- ヘッダページ(div.header)
- 本文(div.main)
- 表示ページ(div.body)
- フッタページ(div.terminator = div.footer)
- 署名表示(div.copyright)
- サイドバー(div.sidebar)
[2] 1.1以降 & 1.0系のオプション指定時
1.1以降や 1.0系 で設定「imitate tDiary's style (put header in mainframe..)」のチェックを ON にした時は、下記のとおりになっています。
-
本文(div.main)
- ヘッダページ(div.header)
- 表示ページ(div.body)
- フッタページ(div.terminator)
- 署名表示(div.copyright = div.footer)
- サイドバー(div.sidebar)
[3] 1.3.2以降
基本は [2] と同じですが、プラグインでレイアウト構造を変えることができます。 [plugin] はてなレイアウトプラグイン を利用すれば、はてなのような HTML 構造にできます。
wifky で利用されるクラス
クラス名のあるもの
- div.sidebar
- サイドバー全体
- div.header
- ヘッダ部分
- div.terminator
- フッタ部分
- div.body
- 本文全体
- p.menubar (p.adminmenu)
- 先頭のメニュー「FrontPage New Admin Index」全体
- p.menubar a (p.adminmenu a)
- 先頭のメニューの各要素(リンク)
- div.main
- サイドバーとヘッダ以外の部分。
- p.centering
- >>〜<< で囲まれる段落。スタイルシートの有無に関わらず、 タグ自身に align="center" が記述されていますので、 スタイルシートの text-align 属性が働かない可能性があります。
- div.footnote
div.footnotetext - 脚注のテキスト
- ul.comment
- コメント
- span.commentator
- コメント主
- span.comment_date
- コメント日時
- div.copyright
- 最下部の著作権表示
- a.sectionmark / a.subsectionmark / a.subsubsectionmark
- 見出しへの恒久アンカーを示す文字(当サイトの場合 †)
タグをクラス名なしに使っているもの
- body
- 凍結されていないページ
- h1
- 自動挿入されるページタイトル。!!!! で始まるセクション
- h2
- <<〜>> で囲まれているか、!!! で始まるセクション
- h3
- <<<〜>>> で囲まれているか、!! で始まるサブセクション
- h4
- <<<<〜>>> で囲まれているか、! で始まるサブサブセクション
- ol
- 番号付きリスト全体(* で始まる段落)
- ul
- 番号無しリスト全体(+ で始まる段落)
- li
- リストの各要素(* や + で始まる行)
- dl
- 定義リスト全体(: で始まる段落)
- dt
- 定義用語(行頭 + : 以下)
- dd
- 定義内容(行頭 + :: 以下)
- table
- 表(|| で始まる段落)
- tr
- 表の行全体(|| か空行で囲まれる範囲)
- td
- 表の1セル(| か空行で囲まれる範囲)
- pre
- 整形済みテキスト
- blink
- リンク切れのページリンク
- sup a
- 脚注マーク
tDiary のテーマの移植
tDiary のテーマを wifky で使うには、次のような手順を踏みます。
- 設定「imitate tDiary's style (put header in mainframe..)」にチェックを入れる(wifky 1.0系のみ)
- ページ「CSS」を作成。内容として、 tDiary 本体付属の「theme/base.css」と、 希望のテーマの css ファイルの中身を展開する。 (二つのページの内容を連続してペーストするだけで Ok です)
が、そもそも、スタイルシート体系がフルコンパチではないので、 全然ダメダメである場合もあること、あらかじめ御了承ください。 (はてな系も、ちと辛いようで。。)
なお、画像を使うテーマの場合、これだけではなく、 画像ファイルの配置やパスの調整が必要です。
添付ファイル(例:XXXXXX.jpg)を背景画像として使う場合
background:url(wifky.pl?p=CSS;f=XXXXXX.jpg)
等と CSS で指定します。
|