トップページデザイン2
壁紙やメインコンテンツの背景色の変更[編集 | ソースを編集]
- 「サイトURL/ディレクトリ名/Mediawiki:Common.css」でCSSを書き込むとそのサイトに反映されます。
（内部スタッフのみ利用可能）
- 事前に背景画像をアップロードしておき、画像の実URLをコピーしておく。
- 例：「www.h1g.jp/madomonogatari/Mediawiki:Common.css」で、以下のCSSをコピペする。
- .main-content, .lower-menuのbackground-colorも変更可能。
/* 背景画像URLを設定 */
.container {
background: url(https://da9v1g7imu10q.cloudfront.net/images/madomonogatari/6/60/%E9%AD%94%E5%B0%8E%E7%89%A9%E8%AA%9Ebg.webp) center top repeat;
background-size: 100% auto;
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
/*メインコンテンツの背景色設定*/
.main-content, .lower-menu {
background-color: #ffffffe3!important;
}
TOPページのdivの構造解説[編集 | ソースを編集]
TOPページリンクボックス[編集 | ソースを編集]
ページの冒頭に以下の記述を行うことでCSSが設定されます。
<templatestyles src="テンプレート:テストページ/styles.css" />
また、以下のページがそのサイトに存在している必要があります。
ゲームの雰囲気に合わせてデザインを変更してください。
テスト
<h2 class="h2-base h2-mos-green">[[ファイル:tc-3-2.png|30px|link=|見出しアイコン]] テスト</h2>
<div class="menu-container">
{{画像無メニュー|スタイル=mos-green|リンク名=テスト|表示名=テスト|列=2}}
{{画像有メニュー|スタイル=mos-green|画像名=h2icon2.png|画像大きさ=30|リンク名=支援者：テスト|表示名=テスト|列=2}}
</div>
テスト
<h2 class="h2-base h2-neon-purple">[[ファイル:tc-3-2.png|30px|link=|見出しアイコン]] テスト</h2>
<div class="menu-container">
{{画像無メニュー|スタイル=neon-purple|リンク名=テスト|表示名=テスト|列=2}}
{{画像有メニュー|スタイル=neon-purple|画像名=h2icon2.png|画像大きさ=30|リンク名=支援者：テスト|表示名=テスト|列=2}}
</div>
テスト
<h2 class="h2-base h2-sky-blue">[[ファイル:tc-3-2.png|30px|link=|見出しアイコン]] テスト</h2>
<div class="menu-container">
{{画像無メニュー|スタイル=sky-blue|リンク名=テスト|表示名=テスト|列=2}}
{{画像有メニュー|スタイル=sky-blue|画像名=h2icon2.png|画像大きさ=30|リンク名=支援者：テスト|表示名=テスト|列=2}}
</div>
テスト
<h2 class="h2-base h2-red">[[ファイル:tc-3-2.png|30px|link=|見出しアイコン]] テスト</h2>
<div class="menu-container">
{{画像無メニュー|スタイル=red|リンク名=テスト|表示名=テスト|列=2}}
{{画像有メニュー|スタイル=red|画像名=h2icon2.png|画像大きさ=30|リンク名=支援者：テスト|表示名=テスト|列=2}}
</div>
テスト
<h2 class="h2-base h2-tropical-green">[[ファイル:tc-3-2.png|30px|link=|見出しアイコン]] テスト</h2>
<div class="menu-container">
{{画像無メニュー|スタイル=tropical-green|リンク名=テスト|表示名=テスト|列=2}}
{{画像有メニュー|スタイル=tropical-green|画像名=h2icon2.png|画像大きさ=30|リンク名=支援者：テスト|表示名=テスト|列=2}}
</div>
テスト
<h2 class="h2-base h2-pink">[[ファイル:tc-3-2.png|30px|link=|見出しアイコン]] テスト</h2>
<div class="menu-container">
{{画像無メニュー|スタイル=pink|リンク名=テスト|表示名=テスト|列=2}}
{{画像有メニュー|スタイル=pink|画像名=h2icon2.png|画像大きさ=30|リンク名=支援者：テスト|表示名=テスト|列=2}}
</div>
テスト
<h2 class="h2-base h2-orange">[[ファイル:tc-3-2.png|30px|link=|見出しアイコン]] テスト</h2>
<div class="menu-container">
{{画像無メニュー|スタイル=orange|リンク名=テスト|表示名=テスト|列=2}}
{{画像有メニュー|スタイル=orange|画像名=h2icon2.png|画像大きさ=30|リンク名=支援者：テスト|表示名=テスト|列=2}}
</div>
テスト
<h2 class="h2-base h2-old-paper">[[ファイル:tc-3-2.png|30px|link=|見出しアイコン]] テスト</h2>
<div class="menu-container">
{{画像無メニュー|スタイル=old-paper|リンク名=テスト|表示名=テスト|列=2}}
{{画像有メニュー|スタイル=old-paper|画像名=h2icon2.png|画像大きさ=30|リンク名=支援者：テスト|表示名=テスト|列=2}}
</div>
テスト
<h2 class="h2-base h2-blue">[[ファイル:tc-3-2.png|30px|link=|見出しアイコン]] テスト</h2>
<div class="menu-container">
{{画像無メニュー|スタイル=blue|リンク名=テスト|表示名=テスト|列=2}}
{{画像有メニュー|スタイル=blue|画像名=h2icon2.png|画像大きさ=30|リンク名=支援者：テスト|表示名=テスト|列=2}}
</div>
テスト
<h2 class="h2-base h2-black">[[ファイル:tc-3-2.png|30px|link=|見出しアイコン]] テスト</h2>
<div class="menu-container">
{{画像無メニュー|スタイル=black|リンク名=テスト|表示名=テスト|列=2}}
{{画像有メニュー|スタイル=black|画像名=h2icon2.png|画像大きさ=30|リンク名=支援者：テスト|表示名=テスト|列=2}}
</div>
テスト
<h2 class="h2-base h2-dark">[[ファイル:tc-3-2.png|30px|link=|見出しアイコン]] テスト</h2>
<div class="menu-container">
{{画像無メニュー|スタイル=dark|リンク名=テスト|表示名=テスト|列=2}}
{{画像有メニュー|スタイル=dark|画像名=h2icon2.png|画像大きさ=30|リンク名=支援者：テスト|表示名=テスト|列=2}}
</div>
テスト
<h2 class="h2-base h2-dark">[[ファイル:tc-3-2.png|30px|link=|見出しアイコン]] テスト</h2>
<div class="menu-container">
{{画像無メニュー|スタイル=light|リンク名=テスト|表示名=テスト|列=2}}
{{画像有メニュー|スタイル=light|画像名=h2icon2.png|画像大きさ=30|リンク名=支援者：テスト|表示名=テスト|列=2}}
</div>
