アーカイブ:ヘルプ:Monacoスキンのカスタマイズ

ここでは、Monacoスキンのカスタマイズ方法について記述します。

ロゴのアップロード[]

注意:ここにある記述は古くなっており、現在有効ではありません。

ロゴを追加することでウィキの特色を出しやすくなります。是非ともロゴを作ってアップロードしてみましょう。

ロゴは、横266ピクセル、縦75ピクセルにします。
.pngフォーマットで保存してください（透過を利用しても構いません）
Wiki_wide.pngというファイル名でアップロードします。

以下はロゴのサンプルです。

ファイル:Picture 36marveldblogo.png

ナビゲーションのカスタマイズ[]

ウィキアのMonacoスキンは、管理者が編集できる優れたナビゲーションシステムを持っており、複数レベルに展開できるメイン・ナビゲーションと二つの行からなるリンク・ツールボックスという二つのパーツからなります。

メイン・ナビゲーション[]

検索欄のすぐ下にあるメインのナビゲーションを変更するには、MediaWiki:Monaco-sidebarのページを編集します。各ウィキのMonaco-sidebarに何らかの編集が行われるまでは、Massging wikiaの http://messaging.wikia.com/wiki/MediaWiki:Monaco-sidebar/ja の値をデフォルトで使うことになります（このデフォルトページはウィキアのスタッフのみ変更できます）。この値を個々のウィキで編集するには管理者権限が必要になります。

利用者が個別に編集するには、利用者ページのサブページをご利用ください。例えば、利用者:Yukichi/Monaco-sidebarなどになります。

個々のアスタリスクは、メニューの階層のレベルを表します。この例では、サイドバーの三段階目に"Superheroes Wiki"、"Characters"、"Comics"という三つの項目があるということになります。

"Characters"の項目にマウスを載せると、二番目の"Heroes"と"Villains"という項目が現れ、Superman、Batman、Spider-Manの項目は"Heroes"のサブメニューの中に組み込まれます。

メニューの項目は自動的に個別の記事にリンクします。メニューの項目とは違うテキストを使いたい場合は、最初に項目名を置いて、「|」の後に続けて表示するテキストを書いてください。MediaWikiのメッセージ一覧からも利用できます（各ウィキのSpecial:Allmessagesをご覧ください）。

     * mainpage | Superheroes Wiki
     * #popular# | Editor's pick    （下記"マジックワード"の節を参照してください）
     * Category:Characters | Characters
     ** Category:Heroes | Heroes
     *** Superman
     *** Batman
     *** Spider-Man
     ** Category:Villians | Villians
     *** Lex Luthor
     *** Penguin
     *** Green Goblin
     * Category:Comics | Comics
     ** DC Comics
     ** Marvel Comics
     * #category-minorcharacters#   (see "magic words" section below)

メイン・ナビゲーションのマジックワード

その他に、メイン・ナビゲーションで使えるマジックワードも加えてあります。新しいマジックワードは以下の通りです。

category1# = 最も記事の多いカテゴリの記事を複数段階に渡って表示します。上位7つを表示し、"see more..."というリンクで当該のカテゴリへのリンクを作ります。

category2# = 上のものと一緒ですが、二番目に記事の多いカテゴリを表示します（例えば、"#category-ヘルプ"などです）。

category-<カテゴリ名># = 特定のカテゴリの表示を行います。

popular# = これは、各ウィキの管理者が選定した"editor's choice"のリストを指します。MediaWiki:Most_popular_articlesで、その記事を追加できます。そのページに何もない（または、エントリが7つ未満）場合、リストの残りはそのウィキで最もトラフィックの多い記事から自動で選択されます。

visited# = そのウィキで最もトラフィックのある記事のリストを表示します。

voted# = 投票による評価が最も高い記事のリストを表示します。

newlychanged# = 最近更新された記事を表示します。

topusers# = 編集の多い利用者のリストを表示します。

注:#category1#と#category2#マジックワードには、特定のキーワードを持つカテゴリはふくめられません。除外されるキーワードは、Image/images、Stub/stubs、Screenshot/screenshots、Screencap/screencaps、Article/articles、Copy edit、Fair use、File/files、Panel/panels、Redirect/redirects、Template/templates、Delete/deletion、TagSyncedで、可能な限り多言語でもフィルタがかかるようになっているはずです。もし、どうしてもこれらのキーワードを使いたい場合は#category-<カテゴリ名>#で置き換えてください。

カテゴリ名に空白を使う場合は、アンダースコア"_"を使って置き換えてください。

リンク・ツールボックス[]

メイン・ナビゲーションの下にあるリンク・ツールボックスをカスタマイズするには、各ウィキのMediaWiki:Monaco-toolboxを編集してください。デフォルトではmessagingの http://messaging.wikia.com/wiki/MediaWiki:Monaco-toolbox/ja を使うことになります（このデフォルトページはウィキアのスタッフのみ変更できます）。

これも同様に、個別の利用者ごとに変更するには利用者:Yukichi/Monaco-toolboxを編集してください。

リンクのリストは、自動的に二つの行に分かれます。リンクのフォーマットは複数段メニューと同じです。

 * Special:Random|randompage
 * Special:Upload|upload
 * Special:Whatlinkshere/{{FULLPAGENAME}}|whatlinkshere
 * Special:Recentchanges|recentchanges
 * Special:Specialpages|specialpages
 * helppage|help

また、利用者ページ、会話ページ、プロファイルページ向けに三つのリンクを自動で追加します（プロファイルページはSNS機能が追加された場合のみ）。利用者の投稿履歴、この利用者にメールを送信、投稿ブロックの三つです。投稿ブロックは管理者のみ表示されます。

色のカスタマイズ[]

既に定義されている色のカスタマイズ[]

Monacoスキンでは、いくつかのテーマがバリエーションとしてあらかじめ定義されています。個別に設定するには、オプションの「外装」のタブをクリックしてMonaco向けのテーマを選択するだけです。また、管理者は「オプション」→「外装」→「管理者向け設定」で利用者全体に対するデフォルトテーマを設定できます（この設定は個々のウィキの管理者にのみ表示されます）。

カスタムスキンの作成[]

利用者にデフォルトで表示されるカスタムスキンを作るには、管理者の設定で"Monaco Custom"を選択し、カスタムのCSSを定義するMediaWiki:Monaco-custom.cssを編集します。一番簡単なカスタマイズとして、color1とcolor2のクラスを変更するというのがります。この二つのクラスを変更するだけで、ウィキのさまざまな部分が変更されます。。

ファイル:Easy color customization.png

.color1, .color1 a {
   background-color: Green;
   color:            White !important;
}

.color2 {
   background-color: PapayaWhip;
}

CSSのフルカスタマイズを以下に掲載します。

フルカスタマイズガイド[]

上述どおり、"color1"と"color2"を編集することがカスタマイズの近道ですが、このガイドではさらに細かい発展的なカスタマイズについて解説します。こちらも同じくMediaWiki:Monaco-custom.cssを編集することでカスタマイズを行えます。

ヘッダのカスタマイズ[]

Monacoの一番上のヘッダは、個別の要素を使っています。この節では、ヘッダ自身のカスタマイズやウィキアのロゴ、メニューボタン、メニュー、ウィジェットの出現部分のカスタマイズについて解説します。

ヘッダの背景[]

ヘッダのスタイルは、初期状態では"color2"で定義されています。

#wikia_header {
   background-color: Red;
   border-color:     Black;
}

ウィキアのロゴ[]

ファイル:Monaco wikia logo template.png

ファイル: w:c:inside:Image:Monaco_wikia_logo_template.psd
サイズ: 64Kb

左上最上部のウィキアのロゴの色をカスタマイズするには、Monaco用のウィキアのロゴ向けに作られた上記のテンプレートをダウンロードする必要があり、それの色を調整してウィキにアップロードすることで変更できます。

.psdの拡張子で変更できる画像編集ソフト（Adobe PhotoshopやGIMPなど）を使ってください。

#wikia_logo {
   background-image: url(URL_TO_YOUR_IMAGE);
}
* html #wikia_logo {
   background-image: none;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='URL_TO_YOUR_IMAGE', sizingMethod='crop');
}

ヘッダのメニューボタン[]

ファイル:Monaco header button template.png

ファイル: w:c:inside:Image:Monaco_header_button_template.psd
サイズ: 52Kb

ウィキアのロゴと同様、ヘッダメニューのボタンは、画像編集ソフトで上記テンプレートを編集してください。

.headerMenuButton dt, .headerMenuButton dd {
   background-image: url(URL_TO_YOUR_IMAGE);
}
* html .headerMenuButton dt, * html .headerMenuButton dd  {
   background-image: none;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='URL_TO_YOUR_IMAGE', sizingMethod='crop');
}

ヘッダメニュー[]

ヘッダメニューはほんの少しだけ透過を施しています。透過のプロパティは下記のサンプルコードの中に含まれています。ヘッダメニューのスタイルは、初期状態では"color1"で定義されています。

.headerMenu, .headerMenu a {
   background-color: Red;
   color:            White;
   -moz-opacity:     .95;
   opacity:          .95;
}

ウィジェット呼出部分の背景[]

#widget_cockpit {
   background-color: Red;
}

背景の帯[]

背景の帯は、ウィキアのロゴを含めたヘッダの下にある横に広がる領域のことです。

#background_strip {
   background-color: red;
}

背景の帯には、グラフィックにアクセントを付ける二つのdivタグが含まれています。このdivタグは、背景の帯の内側に絶対配置で位置が指定されていまので、適宜、背景画像、高さ、幅、位置などを指定してください。

#accent_graphic1 {
   background-image: url(URL_TO_YOUR_IMAGE);
   height: 155px;
   width: 300px;
}

#accent_graphic2 {
   background-image: url(URL_TO_YOUR_IMAGE);
   height: 155px;
   width: 1000px;
   top: 20px;
   right: 20px;
}

ウィジェットのカスタマイズ[]

ウィジェットのクラスは全て"widget"です。このクラスのスタイルを定義することで、全てのウィジェットのカスタマイズができます。

.widget {
   background-color: Red;
}

ウィジェットのヘッダ[]

ウィジェットのヘッダのスタイルは、初期状態では"color1"で定義されています。

.widget dt {
   background-color: Red;
}

検索欄[]

背景の色を明確にするため、少しだけ影を付けています。影を消すには、「background-image: none.」をセットしてください。検索欄のスタイルは、初期状態では"color1"で定義されています。

#search_box {
   background-color: Red;
}

検索ボタン[]

ファイル:Monaco search button template.png

ファイル: w:c:inside:Image:Monaco_search_button_template.psd
サイズ: 60Kb

ウィキアのロゴやヘッダのボタンと同様、検索ボタンは上記テンプレートを画像編集ソフトで編集してください。

#search_button {
   background-image: url(URL_TO_YOUR_IMAGE);
}
* html #search_button {
   background-image: none;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='URL_TO_YOUR_IMAGE', sizingMethod='crop');
}

ナビゲーション[]

ナビゲーションメニュー色を、ウィジェットの背景の色と別に変更したい場合は、下記のセレクタを使ってください。

#navigation a {
   background-color: Red;
}

セレクタを使うことで、ナビゲーションにマウスが乗ったときの色を変更できます。長い名前なのが珠に傷ですが。

#navigation a:hover, .yuimenuitemlabel-hassubmenu-selected {
   background-color: Red;
}

リンクボックス[]

リンクボックスは、最初のウィジェットのナビゲーションメニューのすぐ下にあります。

#link_box {
   background-color: Red;
}

記事の領域のカスタマイズ[]

ページ・バー[]

ページ・バーとは、「編集」「履歴」や「本文」「ノート」といったタブの部分の事です。背景の色を明確にするため少しだけ影を付けています。影を消すには「background-image: none.」をセットしてください。ページ・バーは、初期状態では"color1"で定義されています。

#page_bar {
   background-color: Red;
}

#page_controls a {
   color:            White !important;
}

ページタブ[]

ページタブというのは、ページバーにある「本文」「ノート」の部分の事です。二番目のセレクタで今選んでいるタブの色が定義されています。

#page_tabs li {
   background-color: Red;
}

#page_tabs li.selected {
   background-color: White;
}

選択しているタブの背景を記事の背景と一緒にすると見やすいでしょう。

記事[]

記事の部分は以下の通りです。

#wikia_page {
   background-color: Red;
}

参考リンク[]

この文書の原文となったMonaco_Skin_Customization（英語）