ヘルプ:外装の詳細設定

From Meta, a Wikimedia project coordination wiki

Jump to: navigation, search
メディアウィキ・ハンドブック: 目次 | 読者 | 編集者 | 中間管理者 | 管理者 | ハッカー+/-
ハンドブック・プロジェクト | ヘルプの編集方針 | 他のヘルプ
最初のセクション・ヘッダ以前の部分を編集
閲覧する
検索, [ 表示ボタン ]
リンク元
特別ページ
印刷バージョン

変更を追う
最近更新したページ {拡張版}
リンク先の更新状況
ウォッチリスト
履歴
差分
画像ページ
ユーザの投稿記録

アカウント
ログイン
オプション
外装の詳細設定
独立ページで見る



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

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

Contents

[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ページはスキン毎に設定されています。例をあげると、日本語版ウィキペディアではデフォルト設定は次のページにあります。

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

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

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

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

[edit] Css

[edit] 利用者サブページのCSSとローカルCSS

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

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

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

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

[edit] CSSセレクタ

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

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

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

  • #p-lang a

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

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

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

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

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

履歴では、autocommentと、

  • user
  • minor

のclassを使っています。

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

[edit] 編集ページ

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

[edit] Major style blocks

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] パラメータや変数に依存するスタイル

[edit] クラスまたはidの変数

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

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

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

/*

*/
 
/*******************
** Minor tweaks
*******************/
/* redirects in categories, on [[Special:Allpages]], and [[Special:Prefixindex]] */
.redirect-in-category, .allpagesredirect {
	font-style:italic;
	color:gray;
}
 
/* hide unneeded content when printing */
@media print {
#privacy, #about, #disclaimer { display:none; }
}
 
/* hide arrows on selected external links */
.plainlinksneverexpand a {
	background:none !important;
	padding:0 !important;
}
 
/* highlight page protection */
.mw-textarea-protected {
	border:2px solid #F00;
	color:gray;
}
 
/*******************
** Hide selected content (should rarely be used, accessibility issues)
*******************/
.hiddenStructure { display:none; }
.if { display:none; }
 
/*******************
** Table formatting
*******************/
table.wikitable,
table.prettytable {
	margin:1em 1em 1em 0;
	border:1px solid #AAA;
	border-collapse:collapse;
	background:#F9F9F9;
}
 
table.wikitable th, table.wikitable td,
table.prettytable th, table.prettytable td {
	padding:0.2em;
	border:1px solid #AAA;
}
 
table.wikitable th,
table.prettytable th {
	background:#F2F2F2;
	text-align:center;
}
 
table.wikitable caption,
table.prettytable caption {
	margin-left:inherit;
	margin-right:inherit;
}
 
/*******************
** Infoboxes
*******************/
.infobox {
	float:right;
	clear:right;
	margin-bottom:0.5em;
	margin-left:1em;
	padding:0.2em;
	border:1px solid #AAA;
	background:#F9F9F9;
	color:black;
}
 
.infobox td,
.infobox th {
	vertical-align:top;
}
 
.infobox caption {
	margin-left:inherit;
	font-size:larger;
}
 
.infobox.bordered {
	border-collapse:collapse;
}
 
.infobox.bordered td,
.infobox.bordered th {
	border:1px solid #AAA;
}
 
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
	border:0;
}
 
/*******************
** Sister project templates
*******************/
.infobox.sisterproject {
	width:20em;
	font-size:90%;
}
 
.sister-project {
	clear:right;
	float:right;
	width:250px;
	margin:0 0 1em 3em;
	padding:4px;
	border:1px solid #AAA;
	background:#F9F9F9;
	font-size:0.8em;
	text-align:left;
}
 
/*******************
** {{other languages}}
*******************/
#otherlangs {
	margin:0.5em;
	padding:2px;
	border:1px solid #CCC;
	background:#FAFAFA;
	font-size:0.9em;
}
#otherlangs span {
	margin:0 2px;
	padding-left:2px;
	border-left:1px solid gray;
}
#otherlangs span.firstlang {
	border:none;
}
 
/*******************
** Specific pages (keep to a minimum)
*******************/
/* Spam blacklist */
body.page-Talk_Spam_blacklist #ca-addsection { display:none; }
 
/* Spam blacklist/log */
.logtable pre {
	margin:0;
	padding:0;
	border:0;
}
 
/*******************
** Bytecounter colours
*******************/
strong.mw-plusminus-neg { color:#C00; }
span.mw-plusminus-neg { color:#900; }
span.mw-plusminus-pos { color:#060; }
 
/*******************
** Change external link icon to Adobe icon for PDF files
*******************/
/* for browsers that support these CSS selectors, like Mozilla and Opera */
#bodyContent a[href$=".pdf"].external,
#bodyContent a[href*=".pdf?"].external,
#bodyContent a[href*=".pdf#"].external,
#bodyContent a[href$=".PDF"].external,
#bodyContent a[href*=".PDF?"].external,
#bodyContent a[href*=".PDF#"].external {
	padding-right:16px;
	background:url('http://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Icons-mini-file_acrobat.gif/15px-Icons-mini-file_acrobat.gif') center right no-repeat;
}
 
/* in {{PDFlink}}, for browsers that don't support the above (IE) */
span.PDFlink a {
	padding-right:17px !important;
	background:url('http://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Icons-mini-file_acrobat.gif/15px-Icons-mini-file_acrobat.gif') center right no-repeat !important;
}
 
/*******************
** Collapsible navigation boxes (see [[en:Wikipedia:NavFrame]])
*******************/
div.Boxmerge,
div.NavFrame {
	margin:0px;
	padding:4px;
	border:1px solid #AAA;
	border-collapse:collapse;
	text-align:center;
	font-size:95%;
}
div.Boxmerge div.NavFrame {
	border-style:none;
	border-style:hidden;
}
div.NavFrame + div.NavFrame {
	border-top-style:none;
	border-top-style:hidden;
}
div.NavPic {
	float:left;
	margin:0px;
	padding:2px;
	background:#FFF;
}
div.NavFrame div.NavHead {
	position:relative;
	height:1.6em;
	background:#CCF;
	font-weight:bold;
}
div.NavFrame p {
	font-size:100%;
}
div.NavFrame div.NavContent {
	font-size:100%;
}
div.NavFrame div.NavContent p {
	font-size:100%;
}
div.NavEnd {
	clear:both;
	margin:0px;
	padding:0px;
	line-height:1px;
}
a.NavToggle {
	position:absolute;
	top:0px;
	right:3px;
	font-size:smaller;
	font-weight:normal;
}
 
/*******************
** Messagebox templates
** Imported from [[en:MediaWiki:Common.css]] on 2007-07-13
*******************/
.messagebox {
	width:80%;
	margin:0 auto 1em auto;
	padding:0.2em;
	border:1px solid #AAA;
	background:#F9F9F9;
}
.messagebox.merge {
	border:1px solid #C0B8CC;
	background:#F0E5FF;
	text-align:center;
}
.messagebox.cleanup {
	border:1px solid #9F9FFF;
	background:#EFEFFF;
	text-align:center;
}
.messagebox .standard-talk {
	border:1px solid #C0C090;
	background:#F8EABA;
}
.messagebox.nested-talk {
	width:100%;
	margin:2px 4px 2px 4px;
	border:1px solid #C0C090;
	background:#F8EABA;
}
.messagebox.small {
	float:right;
	clear:both;
	width:238px;
	margin:0 0 1em 1em;
	font-size:85%;
	line-height:1.25em;
}
 
/*******************
** Template documentation
*******************/
.template-documentation {
	clear:both;
	margin:1em 0 0 0;
	padding:5px;
	border:1px solid #AAA;
	background:#ECFCF4;
}
 
.hidden-redlink a.new { display:none; }
 
/*******************
**  Allow limiting which header levels are shown in a TOC
** ie, <div class="toclimit-3">__TOC__</div> will only show top 3 header levels.
*******************/
.toclimit-2 .toclevel-2 { display:none; }
.toclimit-3 .toclevel-3 { display:none; }
.toclimit-4 .toclevel-4 { display:none; }
.toclimit-5 .toclevel-5 { display:none; }
.toclimit-6 .toclevel-6 { display:none; }
.toclimit-7 .toclevel-7 { display:none; }
 
/*******************
** Faciliate RTL translation
*******************/
.persian {
	direction:rtl;
	font-family:Tahoma;
}
 
#bodyContent .persian a, #bodyContent .persian a.external {
	padding-right:0;
	background:none;
}
 
.persian #toctitle {
	direction:ltr;
}
 
.persian .toclevel-1, .persian .toclevel-2, .persian .toclevel-3, .persian .toclevel-4 {
	text-align:right;
}
 
.persian .toclevel-2 {
	margin-right:10px;
}
 
.persian .toclevel-3 {
	margin-right:20px;
}
 
.persian .toclevel-4 {
	margin-right:30px;
}
 
.persian .editsection {
	float:left;
}
 
.persian UL {
	margin-right:16px;
	display:table;
}
 
.persian OL {
	margin-right:16px;
	display:table;
}
 
#bodyContent .arabic a {
	padding-right:0;
	background:none;
}
 
/*******************
** Default style for PrettyTextBox and InformationBox class of templates
** ie, {{warning}}, {{info}}, etc
*******************/
.InformationBox {
	width:80%;
	clear:both;
	margin:0.5em auto;
	padding:3px;
	border:1px solid #999;
	background:#F8F8F8;
	color:#000;
}
 
.PrettyTextBox {
	padding:.2em;
	border:1px solid #AAA;
	background:#F9F9F9;
	color:#000;
}
 
/*******************
** Highlight clicked reference in blue to help navigation
*******************/
ol.references > li:target {
	background:#DEF;
}
 
sup.reference:target {
	background:#DEF;
}
 
/*
  • /

変数を用いたスタイルはtemplate:m to ft css ( talk edit history links )中で適用されています。

[edit] 可変HTML属性名

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

[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; }

[edit] Mozillaで角を丸くする

/* さしあたり、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] 角やタブを丸くするためのリンク

[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を参照してください。

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

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

追加情報 (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; }

[edit] CSSについての外部リンク

[edit] JavaScript

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"属性を情報ボックスに付け加えてください。

[edit] Wikitextで制御されるCSS

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' を指定しているので、この機能は働きません）。これについてはen:template:Link FA ( talk edit history links )も参照してください。

[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";

[edit] JavaScriptに関する外部リンク

[edit] 関連項目


メディアウィキ・ユーザーズガイド - ヘルプ・ページ全部

一般的な利用法: 表示 | 検索 | 検索に使用できない単語 | URL | 名前空間 | ページ名 | セクション | リンク | リンク元 | パイプ付きリンク | 言語間リンク | リダイレクト | 変数 | カテゴリ | 画像ページ | 特別ページ
ログイン及びユーザー設定: ログイン | オプション | 外装の詳細設定
起稿・編集: ページの編集 | 新規ページの作成 | 画像/ファイル | 特殊文字 | 数式の書き方 | 表の作り方 | EasyTimeline | テンプレート | リダイレクト | ページの移動 | Editing shortcuts | Talk page | Testing || rlc
改定追跡: 最近更新したページ | 拡張された最近更新したページ | リンク先の更新状況 | ウォッチリスト | 差分 | 履歴 | 要約欄 | ユーザの投稿記録 | 細部の編集 | 編集のパトロール

他プロジェクト: Wikibooks | Wikicommons | Wikinews | Wikipedia | Wikiquote | Wikisource | Wiktionary - Edit this template
Retrieved from "http://meta.wikimedia.org/wiki/%E3%83%98%E3%83%AB%E3%83%97:%E5%A4%96%E8%A3%85%E3%81%AE%E8%A9%B3%E7%B4%B0%E8%A8%AD%E5%AE%9A"