Home > スポンサー広告 > Column Layout 2.0

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Home > スポンサー広告 > Column Layout 2.0

Home > Customize > Column Layout 2.0

Column Layout 2.0

  • Posted by: Black vicuna
  • 2008-05-28 Wed 00:40:09
  • Customize

Vicuna2.0 Skinのレイアウトの変更方法を解説します。 Vicuna3.0 Skinとはクラスによる切り替えが若干異なりますので注意してください。 Vicuna3.0 Skinはこちらの情報mt.Vicuna - レイアウトの変更方法を参考にして下さい。 Vicuna skinは、各テンプレートソースのbody要素に付加されたクラスによってレイアウトが切り替わる仕組みになっています。

カラムレイアウト サンプル画像

*2007-2010頃に配布されていた旧Fc2 vicuna skinは、4+2(カラム左右入れ替え)のタイプのカラムレイアウトが使用できます。

Single Double Multi1 Multi2
Sample Single Sample Double Sample Multi1 Sample Multi2

Vicuna - CMS レイアウト変更に関する知識

カラム HTML 編集手順

  1. 管理画面 > HTML編集からカラム部分を変更します。
  2. 変更箇所は旧Vicunaテンプレートであれば6箇所です。新テンプレート、Black Vicunaのテンプレートであれば7箇所です。
  3. 管理画面 > HTML編集内を上から順に下記該当箇所を探して下さい。
  4. そしてカラムのクラス部分をsingle(1カラム)double(2カラム)multi(3カラム)のどれかに変更してください。
  • multi(3カラム)の場合は後述しますが、別途CSSの編集が必要です。
  • Bazookaスキン Futureスキン Warshipスキンの3つは、Hard Typeスキンであり3カラムにはできません

マルチカラム HTML 変更場所の画像

メモ帳にコピーして、 <body class= などのキーワードでCtrl+f検索すると見つけやすいです。

HTML該当箇所と反映されるページの説明

ブログトップページ

<!-- ★トップページはじまり -->
<body class="mainIndex double">
トップページ
Sample

本文記事ページ

<!-- ★個別ページはじまり -->
<body class="individual single" id="entry<%topentry_no>">
個別ページ
Sample

カテゴリーページ

<!-- ★カテゴリページはじまり -->
<body class="category double">
カテゴリページ
Sample

月間アーカイブページ

<!-- ★アーカイブページはじまり -->
<body class="dateBasedArchive double">
アーカイブページ
Sample

ブログ内検索ページ

<!-- ★検索ページはじまり -->
<body class="individual double" id="siteSearch">
検索ページ
Sample

全件タイトル表示ページ

<!-- ★Archives(全件タイトル表示)はじまり -->
<body class="individual single">
全件タイトル表示
Sample

Newer Entries Older Entriesをクリックすると表示されるページ

<!-- ★その他ページはじまり -->
<body class="individual double">
その他ページ
Sample

このHTML編集によりVicuna Skinのsingle(1カラム)double(2カラム)のレイアウトは変更されます。
multi(3カラム)にする場合はさらにCSSを編集します。

マルチカラムCSS編集手順

  1. 最初にBlack Vicuna Skin に移動し、マルチカラムを適用したいスキンを探して下さい。
  2. Css Downloadよりカラム Multi1,Multi2 の中から、使用したいCSSを開きソースをすべてコピーして下さい。
  3. Fc2 blog 管理画面 > スタイルシートの編集欄の最下部辺り(Title: Multi Column.CSS )へ貼り付ければマルチカラム編集の完了です。

マルチカラムCSS 貼り付け場所 画像

Before

After

このCSS編集によりFc2.Vicuna Skinのマルチカラムレイアウトは変更されます。

マルチカラム
Multi1 Sample

3カラム tips

サイドバーのカラムはそれぞれ<dl class="navi"><dl class="other">へ別れます。

Multi Column Type1は<dl class="other">の内容を<dl class="navi">カラムより多くすることはできません。

3カラムの時、ページの表示幅は900px(最優先)の固定幅になります。

Multi Column Type1とMulti Column Type2の併用はできませんので必ず一方だけ読み込ませてください。

このレイアウトを有効にするには、ページのbody要素のクラスを multi に変更してください。

[←★→]マークのついた指定を全て反転させることでカラム位置の左右入れ替えが可能です。

Eye Catch.cssとの併用は可能です。

Home > Customize > Column Layout 2.0

Tag Cloud
Vicuna

Vicuna CMS

Return to page top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。