LABORATORY.R-STYLES in FC2

http://www.r-styles.net/weblog/ にログをイッパイ移動

Articles

スポンサーサイト

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

[samurai_bamboo] 3 カラム化の例

ちよつと最近忙しいので遅くなりましたが、 [samurai_bamboo] の 3 カラム化の1例を紹介します。

実は、私は 3 カラムが色んな意味で嫌いで、[samurai_bamboo] の 3 カラム版はイメージに合わないので共有登録はしません。

まぁ、それは置いておくとして、取り敢えず、カスタマイズ結果のサンプルを

[samurai_bamboo_3col]

どうなるかを見てもらったところで、ココからカスタマイズ方法の説明に入ります。

まずは以下のソースを見てください。


/* extra setting for 3 column */

#wrapper {
  background-image: url(http://blog-imgs-31.fc2.com/r/s/t/rstyle/samurai_bamboo_content_bg_3col.gif);
  width: 900px;
}

#mainContent {float: right; width: 649px;}

#articles {padding-right: 251px;}

#navs {float: left; position: relative;}

#extra {background-image: url(http://blog-imgs-31.fc2.com/r/s/t/rstyle/samurai_bamboo_footer_3col.gif);}

#branding h1 {background-image: url(http://blog-imgs-31.fc2.com/r/s/t/rstyle/samurai_bamboo_title_bg_3col.jpg);}

#extraDiv1 {width: 900px;}

.articleText pre {width: 330px;}
.component textarea {width: 90%;}

.module {overflow: auto; width: 245px;}

#nav-calendar,
#nav-comments,
#nav-trackbacks {
  position: absolute;
  left: 655px;
}

#nav-calendar {height: 250px; top: 0px;}
#nav-comments {height: 340px; top: 250px;}
#nav-trackbacks {height: 340px; top: 590px;}

#plugin_third {
  position: absolute;
  top: 0;
  left: 655px;
  width: 245px;
}

#plugin_first .module,
#plugin_second .module,
#plugin_third .module{
  overflow: visible;
}

#plugin_first #nav-calendar,
#plugin_second #nav-calendar,
#plugin_third #nav-calendar,
#plugin_first #nav-comments,
#plugin_second #nav-comments,
#plugin_third #nav-comments,
#plugin_first #nav-trackbacks,
#plugin_second #nav-trackbacks,
#plugin_third #nav-trackbacks {
  height: auto;
  position: static;
}

これを「テンプレートの設定」にある「[samurai_bamboo]」の行の「編集」をクリックして、「スタイルシートの編集」の項目(画面一番下の枠)の一番最後に追記してください。

はい、3 カラム化完了です。簡単ですね。

この例では、プラグインカテゴリー1,2を左サイド、プラグインカテゴリー3を右サイドに配置しました。

他にも方法はあるので、自分用にカスタマイズされるのが良いと思います。

3 カラム化のようにデフォルトの画像だとダメって時はそれ用の画像をこちらで用意するので、遠慮なくどうぞ。

...続きを読む

スポンサーサイト

Paging Navigation

Navigations, etc.

About This Website

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