Fandom


左サイドバー編集

ご紹介するのは「左サイドバー」です。日本の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;">ヘッダー1</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
  • 項目1
  • 項目2
  • 項目3
ヘッダー2
  • サブヘッダー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;">ヘッダー1</div>

このコードによってヘッダーのスタイルを設定します。

  • background-color:#000000 - 背景の色を設定します。色の設定はHEXや文字で設定できます。
  • color:white - 文字の色を設定します。色の設定はHEXや文字で設定できます。
  • width:169px - ヘッダーの横幅を設定できます。
  • font-size:16px - フォントサイズを設定できます。
  • font-weight:bold - フォントのウェイトを設定できます。太文字は「bold」、細文字は「thin」、普通は空白で設定できます。
  • ヘッダー1 - この文字を変えることで表示されるヘッダーを変更できます。リンクを設定することも可能です。

項目の文字・色・フォントサイズなど編集

<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 - フォントサイズを設定できます。

関連情報 編集

特に記載のない限り、コミュニティのコンテンツはCC-BY-SA ライセンスの下で利用可能です。