Help:User style/ja

MediaWiki ハンドブック: 目次、読者、編集者、中間管理者、システム管理者 +/-

ログインしている利用者は、フォント、色、ページ内におけるリンクなどの位置、その他いろいろなことを自分の好みによって変えることができます。これは自分の利用者ページのサブページの中に、Cascading Style Sheets（一般にCSSと呼ばれています）という一種のスタイルシートを置くことによって実現することができます。

たとえば、monobookスキンに、自分の好みの変更を加えるには、Special:Mypage/monobook.cssページを作成して、使いたいと思っているCSSを書き加えればいいのです。

概要Edit

注意: MediaWikiのデフォルトの設定では、利用者設定のスタイルコードはすべて無視されます。ユーザースタイルを有効にするには、LocalSettings.phpに以下の2つの設定をしなければなりません:

$wgAllowUserJs  = true;
$wgAllowUserCss = true;

利用者それぞれの外装のスタイルは、まずスキンが選択され、次に選択したスキンに対応するCSSが選択されるようになっています。そして、それぞれのスキンの設定として、フォント、色、ページ内におけるリンクの位置など、いろいろな設定ができます。言い換えると、利用者は好みの設定をスキンごとに作ることができるのです。CSSは、HTMLコード中で指定されたHTML要素、クラス（class）、IDというセレクタ[1]を参照することで指定されます。したがって、それぞれのスキンにどんなスタイルが設定できるかは、ページのHTMLソースコードを見ることで、特に、クラスとIDを見ることによって理解できます。クラスやIDの数が多ければ多いほど、幅広い選択肢が生じます。

全スキン共通のデフォルトのCSS設定はMediaWiki:Common.cssにあります。またJavaScript (JS) のデフォルト設定と一部のIEFixes ファイルは[2]と、MediaWiki:Common.jsにあります。（どんなページでも、HTMLソースを覗いてみると、必ずMediaWiki:Common.jsが参照されているはずです。）

その他のデフォルトのCSSとJSページはスキン毎に設定されています。例をあげると、日本語版ウィキペディアではデフォルト設定は次のページにあります。

外装が「MonoBook」：http://ja.wikipedia.org/style/monobook/main.css 及び ja:MediaWiki:Monobook.css
外装が「標準」：http://ja.wikipedia.org/style/wikistandard.css 及び ja:MediaWiki:Standard.css
外装が「ケルンブルー」：http://ja.wikipedia.org/style/cologneblue.css 及び ja:MediaWiki:Cologneblue.css
外装が「ノスタルジア」：http://ja.wikipedia.org/style/nostalgia.css 及び ja:MediaWiki:Nostalgia.css
外装が「MySkin」：ja:MediaWiki:Myskin.css

また、このメタウィキメディアでは次のページにあります。

外装が「MonoBook」：http://meta.wikimedia.org/style/monobook/main.css 及び MediaWiki:Monobook.css
外装が「標準」http://meta.wikimedia.org/style/wikistandard.css 及び MediaWiki:Standard.css
外装が「ケルンブルー」http://meta.wikimedia.org/style/cologneblue.css 及び MediaWiki:Cologneblue.css
外装が「ノスタルジア」http://meta.wikimedia.org/style/nostalgia.css 及び MediaWiki:Nostalgia.css
外装が「MySkin」MediaWiki:Myskin.css

styleディレクトリにあるファイルは、外装ごとにあり、おそらくどのプロジェクトでも同じです。styleディレクトリの名前は、インストールの時に決められます。詳しくはLocalSettings.php#Stylesheet_Locationを見てください。

monobookスキンでは、http://ja.wikipedia.org/style/monobook/main.css や ja:MediaWiki:Monobook.cssなどで指定されているユーザーインターフェイスの様々な容貌を、JavascriptやCSSを使って変えることができます。これらは自分のユーザページのサブページを作って設定します。例えば、メタウィキメディアにおけるmonobookスキンなら、Special:Mypage/monobook.css ないし Special:Mypage/monobook.jsという名前のページを作り、その中で記述します。

「標準」でも同様です。つまり、Special:Mypage/standard.css ないし Special:Mypage/standard.jsという名前のページです。その他の外装でも同様です。

設定は、これらのページの中に、CSSやJavaScriptを書き込むだけです。プレビューでの動作確認はJSでは動かず、CSSでは特殊な動き方をします。編集時に、CSSを設定しようとしているスキンを実際に使用していれば、プレビューでスタイルシートの効果を直接見ることができます。ただし、これはページマージンなど、そのページに現れている要素のみですので、利用者がチェックしたいことのすべてがここでチェックできるとは限りません。ページを保存したら、強制リロード（シフト+リロード/ctrl+f5）をしてください（これはどのページからでも有効です）。そうしないと、新しいスタイルシートが読み込まれません。

通常のページのHTMLソースには、共有スタイルシートとユーザー設定のスタイルシートを読み込む、次のような行があります。

<script type="text/javascript"
src="/w/wiki.phtml?title=User:username/standard.js&action=raw&ctype=text/javascript">
</script>
@import "/style/wikistandard.css";
@import "/w/wiki.phtml?title=User:username/standard.css&action=raw&ctype=text/css";

まず、プロジェクト共有のCSSを参照し（メタでは //meta.wikimedia.org/style/wikistandard.css を参照しています）、次にユーザー個人のJSとCSSを参照しているのがわかると思います。プロジェクト共有のCSSよりもユーザー個人のCSSがあとなので、後者が優先するわけです。

サーバは、CSSとJSファイルを参照してHTMLを生成しますが、HTMLコードの解釈はしません。ですから、例えば[[a]] をリンクとして解釈したりしません。解釈はブラウザによって行なわれ、その能力と設定に応じた結果が表示されます。

「MySkin」の外装には、main.cssのようなファイルはありません。ユーザーのCSSファイルは、Special:Mypage/myskin.cssとなります。

CssEdit

利用者サブページのCSSとローカルCSSEdit

上に加えて、ブラウザーにはローカルCSSが設定できます。もし、いくつかのブラウザを使っているなら、それぞれに別のCSSを設定できます。それぞれのCSSは、ログインしていなくても適用されますし、ウィキペディアなど、メディアウィキプロジェクトに限らず、すべてのインターネットページに適用されます。ただし、この設定は、閲覧しているページが同じCSSセレクタを、すなわちclass名なら同じclass名を、ID名なら同じID名を使っているときだけに適用されます。たとえば、a.extiwの設定はタグであるh2を使っているサイトには適用されません。

CSSの命令は、メディアウィキプロジェクトごとに、変えたいことがあります。たとえば、違うプロジェクトであることを区別しやすくするために、背景色を変えるなどです。当然この用途には、ローカルCSSを使うことができません。このような用途のためには、少なくともユーザーサブページを使う必要があります。

一部のコンピューター、たとえばインターネットカフェのコンピューターなどでは、ブラウザの設定ができないことがあります。このような場合にも、ユーザーサブページを使った設定は役に立ちます。

一方、ブラウザで、ウェブページや外部CSSファイルで指定されたフォントサイズを無視する設定をしてあるとき、フォントサイズを参照するCSSの命令は、ローカルCSSに置かれていなければなりません。

CSSセレクタEdit

CSSのセレクタは、要素、class、IDごとに指定することができます。ページ本体のスタイルに関連するものは、次のようなものです。現在の設定を確認できるような例をできるだけ与えています。

a - リンクとアンカー。ただし、アンカーではオープンタグとクローズタグの間に文字が入らないので、スタイル指定は、リンクのものにしか関係ありません。例：help:index
:link - リンク - 例: help:index ; デフォルト設定: help:index (See a vs :link)
:link:link
:link:visited
:link#contentTop
:link.external - 外部リンク - 例: http://example ; デフォルト設定: http://example
:link.extiw – ページ本体のインターウィキリンク - 例: en:example ; デフォルト設定: en:example
:link.image – 縮小されていない画像から画像説明ページへのリンク
:link.internal – ファイル（メディア）そのものへのリンク、およびサムネイルや虫眼鏡アイコンから画像説明ページへのリンク（ただし、色やフォントサイズに関するスタイル指定は、前者にしか適用しません） - 例：Media:example
:link.new - リンク先のページのないリンク - 例: example ; デフォルト設定: example

.allpagesredirect - abc - Special:Allpages と Special:Prefixindexのリダイレクトの表示
body.ns-0, ..., body.ns-15 - 各ネームスペースのbody*div#bodyContent
div#column-content
div#editsection
div#globalWrapper
div#tocindent
div.tocline
h1.firstHeading
h2
h3
img.tex TeX画像
small - smallタグ - 例：example
table.toc

a vs :link - よくある間違いとして、スタイルにリンクするために、":link"ではなく"a"を使うというものがあります。":link"はリンクのみに適用されますが、"a"はリンクと名前が付けられたアンカーの両方に適用されます（たとえば、<a name="bookmark">など）。

通常の内部リンクは、現在では「internal」のclassで設定されていません（MediaWikiの古いヴァージョンではそうでしたので、今でも古いヴァージョンを使っているサイト［たとえば、[3]］ではそうなっているものがあります）。現在では、通常は、:linkと:link:visitedを参照しています。加えて、:link.extiwなどのスタイルは、例外的なスタイルとして提供されています。

言語間リンクは次で設定できます。

#p-lang a

また、属性の値に依存するスタイルを持つことができます。たとえば、

:link[title ="User:ユーザー名"]
:link[title ="ページ名"]
:link[href ="完全なurl"]

のように特定の利用者（自分を含む）や特定のページへのリンクに対して、色を付けたり強調したりすることができます。たとえば最近更新したページでウォッチリストのページが強調されるようにです。これはOperaでは働きますが、IEではうまくいきません。Help:Watching pages/ja#Cssを参照してください。

ウォッチリストと最近更新したページでは、次の2つのclassが使われています。

autocomment（自動コメント。/* */で囲まれた部分の色）
例
new (以下を参照)

履歴では、autocommentと、

user
minor

のclassを使っています。

このため、userのclassに対して指定したフォントはページ履歴中では適用されますが、ウォッチリスト又は最近更新したページでは適用されません。

編集ページEdit

本文編集テキストボックス：textarea#wpTextbox1
例1
要約欄：input#wpSummary
例2

Major style blocksEdit

Customization:Explaining_skins#Major_style_blocks_by_nameを参照。

非表示Edit

One application is the use of a hidden sortkey in JavaScript table sorting. It cannot be used to remove text in expressions for template names, parameter names, parameter values, page names in links, etc. On Meta MediaWiki:Common.css contains テキストや画像の極端な「スタイル」として、非表示の設定ができます。たとえば、

.classname {display: none}
#id {display: none}

など。

非表示のリンクは機能しません（一方極小フォントのリンクは機能します）。これは、たとえばJaveScriptの表内のソートにつかう、隠しソートキーに応用することができます。一方、テンプレート名、パラメータ名、パラメータ値、リンク中のページ名など表現中のテキストを削除するためには使えません。

メタウィキメディア上では MediaWiki:Common.cssに

.hiddenStructure {display: none}

が含まれています。

パラメータや変数に依存するスタイルEdit

クラスまたはidの変数Edit

クラスまたはidは、テンプレート又はテンプレートパラメータによって生成された結果に依存させることができます。たとえば、class="abc{{{1|def}}}"のようにです。これを使えば、1つ以上のクラス名に、1つのスタイルを定義することができます。クラスが未定義ならばそれは無視され、標準のスタイルが適用されます。

最も単純な例として、class="abc{{{1}}}"を用い、同時にクラス abcdef を定義しておいたとしましょう。もしパラメータ値が "def"ならば、このクラスが適用されます。

もしも、一般に使うページにおいて、特定のクラスのためのスタイルが定義されていないとそのページが意味不明になる場合、これらのクラスはMediaWiki:Common.cssページ内で指定されなければなりません。Common.cssは、ユーザースタイルによって上書きされない限り、全ての利用者と全てのスキンに対して適用されます。このプロジェクトでは以下のようになっています。

MediaWiki:Common.css

変数を用いたスタイルはTemplate:M to ft css中で適用されています。

可変HTML属性名Edit

HTML属性名は変数にすることができます。無効な名前の属性は、HTML Tidyがサーバ側で削除するので、ブラウザに無効な属性名を無視する機能がなくても正しい結果が出力され、データの送信量が減少します。変数に設定できる"class"の値の範囲については、 w:en:Wikipedia:HiddenStructure と w:en:Template:Infoboxを参照のこと。

スタイルのパラメータの可変値Edit

<span style="display:{{{3|none}}}">水曜日</span>のようなウィキ文は、パラメータ3が定義されていて、かつ値が"none"でない時に"水曜日"を表示し、パラメータ3が未定義か値が"none"の場合、何も表示しません。パラメータ3の値が"none"以外の表示スタイルの場合、そのスタイルが適用されます。

サンプルEdit

/* 本文部分とタブの背景を薄いグレーにする */
#content, #content table
#p-cactions ul li a { background: #f5f5f5; }

/* 本文部分と一緒に背景画面がスクロールしないようにする */
body { background-attachment: fixed; }

/* 背景を他のものに変える */
body { background: Purple; }

/* preタグの部分の背景を変える  */
pre { background: White }

/* ロゴを変える */
#p-logo a { background: url(http://en.wikipedia.org/upload/wiki.png) 35% 50% no-repeat !important; }

/* ロゴを無くして、左のボックス部分をロゴ部分まで上げる */
#p-logo { display: none }
#column-one { padding-top: 0; }

/* ユーザページへリンクするユーザ名の左側のユーザアイコンを消す */
li#pt-userpage { background: none }

/* 文字のサイズとフォントをブラウザ指定のものにする */
body, #globalWrapper { font: inherit !important; }

/* 常にリンクにアンダーラインを引く */
a { text-decoration: underline; }

/*本文部分の幅をせばめて可読性を上げる*/
/*adjust percentages as desired*/
div#bodyContent {
  width: 50%;
  line-height: 105%;
}

/* 選択していないタブの背景を変える */
#p-cactions ul li a { background: #C7FDC7; }

/* 選択しているタブの背景を変える */
#p-cactions ul li.selected a { background: white; }

/* 選択しているタブの縁を変える */
#p-cactions li.selected { border-color: #aaaaaa; }



/* 選択していないタブにマウスを当てても、タブの下の線が消えないようにする */
#p-cactions li a:hover { z-index: 0; text-decoration: none; }
#p-cactions li.selected a:hover { z-index: 3; }

/* 検索ボックスと検索ボタンの下部のスタイルを変える */
input.searchButton {
    background-color: #efefef !important;
    border: 1px outset !important;  
}
#searchInput { border: 1px inset !important; }

/* 標準のリンクの色 */
a { color: #0000FF; }
a:visited { color: #7F007F; }
a:active, a.new { color: #FF0000; }
a.interwiki, a.external { color: #3366BB; }
a.stub { color: #772233; }

/* firefoxを使っているときpreの部分でみにくい遮断や重なりがあるので、スクロールバーを付ける */
pre { overflow: auto; }

/* コモンズへのアップロードを推進するために、ファイルのアップロードのリンクに消し線を引く */
li#t-upload { text-decoration: line-through; }

Mozillaで角を丸くするEdit

/* さしあたり、mozillaやfirefoxなどのgeckoブラウザでのみサポート。いくつかの角が丸くなります。 */
#p-cactions ul li, #p-cactions ul li a {  
  -moz-border-radius-topleft: 1em;
  -moz-border-radius-topright: 1em;
}
#content { 
  -moz-border-radius-topleft: 1em; 
  -moz-border-radius-bottomleft: 1em;
}
div.pBody {
  -moz-border-radius-topright: 1em;
  -moz-border-radius-bottomright: 1em;
}

/* css3ドラフトで規定されているが、ブラウザはサポートしているかどうかわかりません */
#p-cactions ul li, #p-cactions ul li a {  
  border-radius-topleft: 1em;
  border-radius-topright: 1em;
}
#content { 
  border-radius-topleft: 1em;
  border-radius-bottomleft: 1em;
}
div.pBody {
  border-radius-topright: 1em;
  border-radius-bottomright: 1em;
}

firefoxで角を丸くする

角やタブを丸くするためのリンクEdit

Mozilla：上記
http://www.vertexwerks.com/tests/sidebox/ -- サイドボックスのフォーマット
http://www.alistapart.com/articles/slidingdoors2/ -- ロールオーバー効果と丸いタブ
http://www.alistapart.com/articles/customcorners/ -- 箱の角を丸くするもうひとつの形
http://alistapart.com/articles/customcorners2/, そのデモ
http://www.alistapart.com/articles/mountaintop/ -- さらなる奇妙な角の形
http://www.virtuelvis.com/gallery/css/rounded/ -- :before と :after の偽要素を使った単純な自由な形の別形。（css2ブラウザのみ。IEは不可）

印刷用バージョンの変化　Edit

/*
** すべてのプリントアウト用の規定は@media printブロックに置いてください

/* とても小さいフォントを使って紙とインクを節約 */
@media print {
    #footer,
    #content,
    body { font-size: 8pt !important; }
    h1 { font-size: 17pt }
    h2 { font-size: 14pt }
    h3 { font-size: 11pt }
    h4 { font-size: 9pt }
    h5 { font-size: 8pt }
    h6 { 
        font-size: 8pt;
        font-weight: normal;
    }
}

/* 高度な指定：:before と :afterを使ってここにリンクの完全なhrefをその後ろに置くことが可能です
　（現行のヴァージョンでは必要ありません） */
@media print {
  #content a:link:after, 
  #content a:visited:after {
     content: " ( " attr(href) " ) ";
  }
}

ユーザーツールバー（右上の行）をサイドボックスに入れるEdit

Camino 、 Safari と Internet Explorer 7 で動作確認。

/* ユーザーツールバーをサイドボックスに入れる */
#p-personal {
    position:relative;
    z-index:3;
    width: 11.6em;
}

#p-personal .pBody {
    width: 10.7em;
    border: none;
    margin: 0 0 0.1em 0em;
    float: none;
    overflow: hidden;
    font-size: 95%;
    background: White;
    border-collapse: collapse;
    border: 1px solid #aaaaaa;
    padding: 0 0.8em 0.3em .5em;
}

#p-personal ul {
    line-height: 1.5em;
    list-style-type: square;
    list-style-image: url("/style/monobook/bullet.gif");

    font-size:95%;
    margin: 0 0 0 1.5em;
    padding:0;
    text-align:left;
    text-transform: none;
}

#p-personal li {
    display: list-item;
    padding:0;
    margin: 0 0 0 0;
    margin-bottom: 0.1em;
}

/* ユーザアイコンを消す */
/* もし他のところで指定していない場合には必要 */
li#pt-userpage { background: none }

デフォルトで使われているスタイルすべてを見たい場合には、monobook main.css を参照してください。

スクロール時にサイドボックスを固定Edit

このスクリプトとCSSを使うと、スクロールしてもサイドバーを画面上の同じ位置にとどめることができます

「ケルンブルー」スキンには、スクロールしても、ナビゲーションリンクやツールボックスなどが同じ位置に固定される"floating left"クイックバー機能のオプションがあります。このスクリプトをつかうと、「Monobook」スキンでも同じ機能を使うことができます（Mozillaのみ）。詳しくはHelp:User style/floating quickbarを参照してください。

本文領域で、MonobookのメニューをセリフフォントにEdit

テキスト領域でserif フォントのmonobookメニューを使うq&dコンビネーションを開発しました。まだおかしなところやバグがいくつかありますが（いくつかは、wikipediaのcssスキームがあんまり思いやりのあるものではないせい）、もし試したり、ちょっと見てみたりしたければ、[4]へ行って、最初の部分をコピーしてください。動作保証はしません。Netscape7/Win98では動いていますが… --Tillwe 14:05, 30 May 2004 (UTC)Reply[reply]

追加情報 (01.06.04): 現在は、多かれ少なかれ、テーブルにフォーマットされたものも正しく表示してます。 -- Tillwe 17:45, 1 Jun 2004 (UTC)

カテゴリーへのリンクを動かすEdit

カテゴリーへのリンクを本文部分の右上角に動かし、グレーにする。


/******************************************************************/
/* カテゴリーへのリンクを右上角に動かす                               */
/******************************************************************/

/* カテゴリーへのリンクのボックスを動かす */
#catlinks {  
  position:absolute;
  z-index:1;
/*  border: 1px solid #aaaaaa; 
  background: #fafaff; */
  right:1em; 
  top:-0.25em;
  width:10.5em;
  float:right;
  margin: 0.2em;
  padding:0.2em;
}

/* カテゴリーへのリンク自体のフォーマット */
p.catlinks {
  color: #aaaaaa;
  font-family: Verdana,sans-serif;
  font-size:67%;
  line-height: 1.5em;
  text-align:left;
  text-indent:0;
  text-transform: none;
  white-space:normal;
  margin: 0.2em;
}

#p-personal h5 {
    display: inline;
}

/* カテゴリーリンク内のリンクのフォーマット (":" と "|"による区別を使う) */
p.catlinks a {
  color:#888888;
}

差分表示のスタイルEdit

/* 小さいフォントを使わない */
td.diff-addedline, td.diff-deletedline, td.diff-context { font-size: 100% };

/* 違っている部分だけにアンダーライン */
span.diffchange { text-decoration:underline; }

CSSについての外部リンクEdit

http://www.csszengarden.com/ -- インスピレーション
http://css-discuss.incutio.com/ -- 非常に濃密な情報、非常に包括的です
http://www.alistapart.com/ -- すばらしい記事がいろいろあります
http://www.positioniseverything.net/ -- IEのおもしろいバグなど
http://meyerweb.com/eric/css/edge/ -- 高度なCSSのためのすぐれたアイディア

JavaScriptEdit

JavaScript は沢山の可能性を持っています。たとえば、望みの位置に、テキストやリンクを追加することができます。この追加されたコンテンツは、サーバによって生成されたHTMLソース上のコンテンツに依存させることもできます。例をあげると、getElementByIdを適用することによって、IDを持つHTML要素に依存させることができます。挿入位置はinsertBeforeで指定します。

システム動作条件Edit

利用者の JavaScript カスタマイゼーションを可能にするためには、wikiの管理者が LocalSettings.php 中にある下記の構成パラメータを設定しなければなりません。

$wgAllowUserJs = true;

MediaWiki 1.6.3 段階では、設定でユーザー JavaScript を無効にしていても、monobook.js のような利用者の JavaScript ページをカスタマイズしても警告メッセージはでません。ユーザー JavaScript が使えるか判断するための最もよい方法はおそらく、アクセスする権利があるならば、MediaWikiサーバの LocalSettings.php をチェックするか、カスタムJavaScriptを追加してそれが動くか試してみることです。Firefox Web開発者の拡張には、FirefoxがどのJavaScriptをロードし、どれをロードしなかったかを確認するのに便利な、"information | view Javascript"機能があります。なお、英語版Wikipediaは利用者のJavaScriptを有効にしています。

編集リンクを本文エリアの下部にも表示するEdit

User Styles/bottom tabsを見てください。

Firefoxでの下向きタブ

下部のリンクの単純なバージョン、動作中

アクセスキーの変更Edit

これはJavaScriptで定義、設定しているので、簡単にカスタマイズすることができます。ta配列のいくつかの要素を変更してください。（[5]参照）たとえば：

ta['ca-nstab-main'] = new Array('c','View the content page');

アクセスキーは配列中の先頭の値です。このアクセスキーを'0'に変更する例:

ta['ca-nstab-main'] = new Array('0','View the content page');

alt-dはほとんどのブラウザでアドレスバーへのショートカットとされているので、以下の方法で、アクセスキーとして空白の文字列を入力することによって、alt-dの「削除」のショートカットを無効にすることができます。

ta['ca-delete'] = new Array(' ','このページを削除');

最後に、すべてのアクセスと、tooltipsを無効にするためには、

ta = false;

をユーザーの monobook.js に書きます。

サイトのグローバルアクセスキーは、各スキンごとの JavaScript に書かれています。例えば、 Monobook のためのキーは（保護された）ページ MediaWiki:Monobook.js にあります。

'power user editing shortcuts' のためのグローバルアクセスキーを無効にしたり変更したりするためには、 MediaWiki名前空間にある AccessKey プリフィックスが付いた、6つの（保護された）ページを編集しなければなりません。

カテゴリーを上に移すEdit

次のコードはカテゴリーボックスを記事上部に移します。もちろんいくつかのCSSを使って、見た目をもっときれいにすることもできます。

function catsattop() {
  var cats = document.getElementById('catlinks');
  var bc = document.getElementById('bodyContent');
  bc.insertBefore(cats, bc.childNodes[0]);
}

別の方法として、適当なスタイルシートと組み合わせて、文字を上へ上げてタイトルと同じ高さに持っていくことができます。

function categoryToTop() {
  var thebody = document.getElementById('contentTop');
  var categories = document.getElementById('catlinks');

  if (categories != null) {
    categories.parentNode.removeChild (categories);
    thebody.parentNode.insertBefore(categories, thebody);
  }
}

一緒に使うことのできるCSSをいくつか……

/* カテゴリーリンクを動かす */
#catlinks {  
  right:1em; 
  top:-0.25em;
  max-width: 50%; /* this limits the box size, but doesn't set strictly */
  float: right;
  margin: 0.5em;
  padding: 0.2em;
}

/* カテゴリーリンク自体のフォーマット */
p.catlinks {
  font-size:67%;
  text-align:left;
  text-indent:0;
  text-transform: none;
  white-space:normal;
  margin: 0.2em;
}

残念ながらこれを使うと、例えばアメリカ合衆国の大統領の記事のようにカテゴリーボックスが大きいと、情報ボックス（infobox）を横に押しだして端からはみ出させしまうことがあります。これを直すには、"clear: right"属性を情報ボックスに付け加えてください。

Wikitextで制御されるCSSEdit

wikitextによってJSを通してCSSを制御することができます。例えば、中身のないHTML要素 "span" は、そのクラスとidを通して、ページの任意の部分に対してCSSを指定するJavaScriptのパラメータを提供することができます。例をあげると、もし、FAという class と lc というidを持つ "span" 要素がページ内にあれば、 w:en:MediaWiki:Monobook.js は interwiki-lc クラスの"li"要素のスタイルとタイトルを指定し、結果としてマージン中の言語コードlcの言語間リンクのスタイルとタイトルのを制御します（使用しているスキンが interwiki-lc クラスを指定している場合。たとえば、ケルンブルーは言語ごとに class='external' を指定しているので、この機能は働きません）。これについてはw:en:Template:Link FAも参照してください。

変数Edit

システムの生成する変数（例付き）

var skin = "myskin";
var stylepath = "/skins-1.5";
var wgArticlePath = "/wiki/$1";
var wgScriptPath = "/w";
var wgServer = "http://meta.wikimedia.org";
var wgCanonicalNamespace = "Help";
var wgCanonicalSpecialPageName = false;
var wgNamespaceNumber = 12;
var wgPageName = "Help:User_style";
var wgTitle = "User style";
var wgAction = "view";
var wgArticleId = "6919";
var wgIsArticle = true;
var wgUserName = "Patrick";
var wgUserGroups = ["sysop", "*", "user", "autoconfirmed", "emailconfirmed"];
var wgUserLanguage = "en";
var wgContentLanguage = "en";
var wgBreakFrames = false;
var wgCurRevisionId = "568720";

JavaScriptに関する外部リンクEdit

http://www.quirksmode.org/ -- Javascript and DOM のセクションを参照
http://www.alistapart.com/
http://www.quirksmode.org/dom/domform.html -- フォームのクローニング（これを使うと、いくつかの画像がいっぺんにアップロードできるようになります。ページの構造のクローニングのためのよいスタート地点にもなります）

Help:User style/ja

Contents

概要Edit

CssEdit

利用者サブページのCSSとローカルCSSEdit

CSSセレクタEdit

編集ページEdit

Major style blocksEdit

非表示Edit

パラメータや変数に依存するスタイルEdit

クラスまたはidの変数Edit

可変HTML属性名Edit

スタイルのパラメータの可変値Edit

サンプルEdit

Mozillaで角を丸くするEdit

角やタブを丸くするためのリンクEdit

印刷用バージョンの変化　Edit

ユーザーツールバー（右上の行）をサイドボックスに入れるEdit

スクロール時にサイドボックスを固定Edit

本文領域で、MonobookのメニューをセリフフォントにEdit

カテゴリーへのリンクを動かすEdit

差分表示のスタイルEdit

CSSについての外部リンクEdit

JavaScriptEdit

システム動作条件Edit

編集リンクを本文エリアの下部にも表示するEdit

アクセスキーの変更Edit

カテゴリーを上に移すEdit

Wikitextで制御されるCSSEdit

変数Edit

JavaScriptに関する外部リンクEdit

関連項目Edit

Help:User style/ja

概要Edit

CssEdit

利用者サブページのCSSとローカルCSSEdit

CSSセレクタEdit

編集ページEdit

Major style blocksEdit

非表示Edit

パラメータや変数に依存するスタイルEdit

クラスまたはidの変数Edit

可変HTML属性名Edit

スタイルのパラメータの可変値Edit

サンプルEdit

Mozillaで角を丸くするEdit

角やタブを丸くするためのリンクEdit

印刷用バージョンの変化 Edit

ユーザーツールバー（右上の行）をサイドボックスに入れるEdit

スクロール時にサイドボックスを固定Edit

本文領域で、MonobookのメニューをセリフフォントにEdit

カテゴリーへのリンクを動かすEdit

差分表示のスタイルEdit

CSSについての外部リンクEdit

JavaScriptEdit

システム動作条件Edit

編集リンクを本文エリアの下部にも表示するEdit

アクセスキーの変更Edit

カテゴリーを上に移すEdit

Wikitextで制御されるCSSEdit

変数Edit

JavaScriptに関する外部リンクEdit

関連項目Edit

印刷用バージョンの変化　Edit