- このブログはFandomスタッフのKuro0222により投稿されました。
夏も終り、涼しくなりましたね。
冬の新作ゲームラッシュが楽しみでならない、FANDOMスタッフのKuro0222です。
いつもFANDOMをご利用頂きまして、誠にありがとうございます!
さて、今回はWikiのアドミン（管理者）を行っている方々にWikiデザインとそのソースコードの紹介を行いたいと思います。
できるだけ詳しく記載するつもりですが、不明な点や分からない点がある場合はコメント欄から質問を受け付けていますので、よろしくお願いします！
左サイドバー[]
ご紹介するのは「左サイドバー」です。日本のWikiで多く使用されている縦長のサイドバーを再現したものになります。
やり方は何通りもあるのですが、今回はフォーオナーWikiで使われているソースコードをもとに紹介したいと思います。
コード[]
フォーオナーで使用されている左サイドバーを簡易化したものが、以下となります。 コピペして使用する際はソースエディターを使用してくださいね！ビジュアルエディターでは残念ながら使用できません。（ソースエディタに関するヘルプページはこちら）
簡易化したコード[]
<div style="float:left;">
<div style="background-color:#000000; color:white; width:169px; font-size:16px; font-weight:bold; padding:5px 0 5px 10px;">ヘッダー１</div>
<ul style="width:170px; background-color:#f5f5f5; list-style:none !important; margin-top:-2px; margin-left:0px; font-size:12px; padding:3px 0 10px 10px;">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
<div style="background-color:#000000; color:white; width:169px; font-size:16px; font-weight:bold; padding:5px 0 5px 10px; margin-top:-11px;">ヘッダー2</div>
<ul style="width:170px; background-color:#f5f5f5; list-style:none !important; margin-top:-2px; margin-left:0px; font-size:12px; padding:3px 0 10px 10px;">
<li style="font-size:14px; font-weight:bold;">サブヘッダー1</li>
<li>項目4</li>
<li>項目5</li>
<li style="font-size:14px; font-weight:bold;">サブヘッダー2</li>
<li>項目6</li>
<li>項目7</li>
</ul>
</div>
左サイドバーの右に来るコンテンツのコードはここに入れる。
{{clr}}
サンプル[]
上記のコードを直接このページのソースコードに記入したものが以下となります。
- 項目1
- 項目2
- 項目3
- サブヘッダー1
- 項目4
- 項目5
- サブヘッダー2
- 項目6
- 項目7
左サイドバーの右に来るコンテンツのコードはここに入れる。
かんたんな解説[]
基本的には上記のソースコードをコピペして、ヘッダー1や項目1を任意の文字に入れ替え、リンクを設定するだけで再現は可能です。
ただし、背景色やフォントの大きさなど、細かい編集を行う方は以下の細かい解説の項目を読んで下さい。
細かい解説[]
使用する際に必要となる要点を簡単に解説します。
位置に関して[]
<div style="float:left;">
このコード「float:left」によって左側に位置を設定すると共に、右側に他のコンテンツを配置できるようになっています。「float:right」にするとサイドバーは右には配置されます。
ヘッダーの文字・色・フォントサイズなど[]
<div style="background-color:#000000; color:white; width:169px; font-size:16px; font-weight:bold; padding:5px 0 5px 10px;">ヘッダー１</div>
このコードによってヘッダーのスタイルを設定します。
- background-color:#000000 - 背景の色を設定します。色の設定はHEXや文字で設定できます。
- color:white - 文字の色を設定します。色の設定はHEXや文字で設定できます。
- width:169px - ヘッダーの横幅を設定できます。
- font-size:16px - フォントサイズを設定できます。
- font-weight:bold - フォントのウェイトを設定できます。太文字は「bold」、細文字は「thin」、普通は空白で設定できます。
- ヘッダー１ - この文字を変えることで表示されるヘッダーを変更できます。リンクを設定することも可能です。
項目の文字・色・フォントサイズなど[]
<ul style="width:170px; background-color:#f5f5f5; list-style:none !important; margin-top:-2px; margin-left:0px; font-size:12px; padding:3px 0 10px 10px;"> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ul>
このコードによってメニューのスタイルを設定します。
- width:170px - メニューの横幅を設定できます。
- background-color:f5f5f5 - 背景の色を設定します。色の設定はHEXや文字で設定できます。
- font-size:12px - フォントサイズを設定できます。
- 項目1 - この文字を変えることで表示される項目を変更できます。自動でリンク付けはされないのでリンクの設定を忘れずに！（項目を増やす場合は新しい列にそのままコピペしてください。）
サブヘッダーの文字・色・フォントサイズなど[]
<li style="font-size:14px; font-weight:bold;">サブヘッダー1</li>
このコードを項目の中に入れ込むことでサブヘッダーを設定できます。（やっていることは太文字に設定し、フォントのサイズを上げているだけですが）
- font-size:14px - フォントサイズを設定できます。
質問・紹介・希望などお待ちしております[]
今後もアドミン（管理者）の皆様にWikiがより楽しく、便利になる情報をお届けしていきます。
自分のWikiのコードを紹介したい！もしくはこんなコードが知りたい！などのコメントがあればページ下のコメント欄に記載してください。
また、質問等もコメント欄、もしくはサポートメールにて受け付けています。