Help:Monacoスキンのカスタマイズ

出典: Wikia

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

目次 1 ロゴのアップロード 2 ナビゲーションのカスタマイズ 2.1 メイン・ナビゲーション 2.2 リンク・ツールボックス 3 色のカスタマイズ 3.1 既に定義されている色のカスタマイズ 3.2 カスタムスキンの作成 4 フルカスタマイズガイド 4.1 ヘッダのカスタマイズ 4.1.1 ヘッダの背景 4.1.2 ウィキアのロゴ 4.1.3 ヘッダのメニューボタン 4.1.4 ヘッダメニュー 4.1.5 ウィジェット呼出部分の背景 4.1.6 背景の帯 4.2 ウィジェットのカスタマイズ 4.2.1 ウィジェットのヘッダ 4.2.2 検索欄 4.2.3 検索ボタン 4.2.4 ナビゲーション 4.2.5 リンクボックス 4.3 記事の領域のカスタマイズ 4.3.1 ページ・バー 4.3.2 ページタブ 4.3.3 記事 5 参考リンク 5.1 カスタマイズ例

[編集] ロゴのアップロード

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

1. ロゴは、縦266ピクセル、横75ピクセルにします。
2. .pngのフォーマットで保存してください(透過を利用しても構いません)
3. Wiki_wide.pngの名前でアップロードします。

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

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

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

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

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

利用者が個別に編集するには、利用者ページのサブページをご利用ください。例えば、利用者: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を編集してください。各ウィキのMonaco-sidebarの値は、入力しない限りは、デフォルトでmessagingの http://messaging.wikia.com/wiki/MediaWiki:Monaco-toolbox を使うことになります(このデフォルトページは、ウィキアのスタッフのみ変更できます)。

これも同様に、個別の利用者ごとに操作するには、利用者: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のクラスを変更することです。この二つのクラスを変更するだけで、ウィキのさまざまな部分が変更されます。。

.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用のウィキアのロゴ向けに作られた上記のテンプレートをダウンロードする必要があり、それの色を調整して、ウィキにアップロードすると、変更できます。

.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');
}

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

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

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

[編集] 検索ボタン

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

#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(英語)

[編集] カスタマイズ例

• Monacoスキンのカスタマイズ例