A_single_file_wiki_wifky2.png

スタイルシートについて

スタイルシートの定義の仕方

スタイルシートを定義するには、「CSS」というページを作って、 そこに通常 CSS ファイルに記述する内容を「そのまま」書いてください。 (プレビューの際、空行以外の行がつながってしまいますが、特に問題ありません)

サンプル

ページリンク 内容
CSS_original? 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.* 系(デフォルト)

  1. ヘッダページ(div.header)
  2. 本文(div.main)
    1. 表示ページ(div.body)
    2. フッタページ(div.terminator = div.footer)
    3. 署名表示(div.copyright)
  3. サイドバー(div.sidebar)

[2] 1.1以降 & 1.0系のオプション指定時

1.1以降や 1.0系 で設定「imitate tDiary's style (put header in mainframe..)」のチェックを ON にした時は、下記のとおりになっています。

  1. 本文(div.main)
    1. ヘッダページ(div.header)
    2. 表示ページ(div.body)
    3. フッタページ(div.terminator)
    4. 署名表示(div.copyright = div.footer)
  2. サイドバー(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
脚注マーク

wifky 自身は使っていないが使用が許されているタグ

単純な <tt> </tt> といった形でのみ使用可能です。

  • b
  • big
  • blockquote
  • br
  • code
  • center
  • del
  • dfn
  • em
  • hr
  • i
  • ins
  • kbd
  • q
  • s
  • samp
  • small
  • span
  • strike
  • strong
  • sup
  • sub
  • tt
  • u
  • var

tDiary のテーマの移植

tDiary のテーマを wifky で使うには、次のような手順を踏みます。

  1. 設定「imitate tDiary's style (put header in mainframe..)」にチェックを入れる(wifky 1.0系のみ)
  2. ページ「CSS」を作成。内容として、 tDiary 本体付属の「theme/base.css」と、 希望のテーマの css ファイルの中身を展開する。 (二つのページの内容を連続してペーストするだけで Ok です)

が、そもそも、スタイルシート体系がフルコンパチではないので、 全然ダメダメである場合もあること、あらかじめ御了承ください。 (はてな系も、ちと辛いようで。。)

なお、画像を使うテーマの場合、これだけではなく、 画像ファイルの配置やパスの調整が必要です。

添付ファイル(例:XXXXXX.jpg)を背景画像として使う場合

    background:url(wifky.pl?p=CSS;f=XXXXXX.jpg)

等と CSS で指定します。

|

Designed for @nifty.