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

余談ですが、この [samurai_bamboo] で採用している某若干重量 XHTML は XHTML 自体を編集することなく CSS の記述だけで 3 カラムにすることも可能な XHTML だという例でもありました。

スポンサーサイト

トラックバックURL

http://rstyle.blog1.fc2.com/tb.php/230-4c38036a

この記事へのトラックバック

-
管理人の承認後に表示されます
  • 20130416
  • From :
-
管理人の承認後に表示されます
  • 20130903
  • From :
-
管理人の承認後に表示されます
  • 20131024
  • From :

この記事へのコメント

Re: [samurai_bamboo] 3 カラム化の例

何度も済みません。
色々考えた結果、2カラムの方にさせて頂きました。
(折角3カラムを作って頂いたのに、申し訳ございません)
で、、2つほど教えて頂きたいことがあるのですが、
一つ目は、記事内の字をもう少し大きくしたいのですが、どうすればよろしいでしょうか?という質問です。
2つ目は、記事下の「パーマリンク、コメント、トラックバック」の文字色を今こちらのLinksに書かれているような青色に変えたいのですが、どうすればいいのでしょうか?
以上二つ、教えて頂けますでしょうか?

Re: [samurai_bamboo] 3 カラム化の例

一つ目:記事内の文字サイズの変更
これは、

.articleText { font-size: 大きさ; }

というのを「スタイルシートの編集」の一番下にでも追加していただければ、OK です。
「大きさ」の部分はお好きな値と置き換えてください。
「大きさ」については以下のページ等を参照してください。
http://www.kanzaki.com/docs/html/htminfo17-2.html#fsize
http://www.kanzaki.com/docs/html/htminfo17-2.html#unit
ちなみに、初期設定は 12px にしてあります。


2つ目:記事下部の文字色
リンクは全箇所統一しているので同じはずです。
しかし、一度見たページはグレー系の色になります。
コレをやめて、常に青系の色にしたいと言う事でしたら、

.articleInfo a { color: #36c; }

をまたまた「スタイルシートの編集」の一番下に追加してください。

それでは、カスタマイズ頑張ってくださいね^^

  • 20061217
  • R'style ♦skJgSh2U
  • URL
  • 編集 ]
Re: [samurai_bamboo] 3 カラム化の例

やってみます!
詳しく教えて下さり、有難うございました。

Re: [samurai_bamboo] 3 カラム化の例

何度も済みません。
字の大きさは、変更出来たのですが、色が変わりません。
私のPCは古くて、Win Meなのです。
だから、でしょうか?

Re: [samurai_bamboo] 3 カラム化の例

あら、出来ませんでしたか…^^;

では、.articleInfo a { color: #36c; } を

.articleInfo a:visited { color: #36c; }

に書き換えるとうまく行くと思いますので試してみてください。

  • 20061219
  • R'style ♦skJgSh2U
  • URL
  • 編集 ]
Re: [samurai_bamboo] 3 カラム化の例

書き換えてみたら、色が変わりました!
お手数お掛け致しました。
有難うございました。

Re: [samurai_bamboo] 3 カラム化の例

又もや問題発生です。
過去の自分のモブログ記事を見てみたのですが、「サムネイル化」せずに送った写真が、全く表示されなくなってしまいました。(記事のみが出てきます)
以前のテンプレでは、「サムネイル化」したものも、そうでない物も、出てきていたんですが、、、
あの、、全く何も分からない私ですので、変な事を聞くとお思いかも知れませんが、もしかしたらこのテンプレは、Win Meには合わないとか?
実は、ウチのモブログを見て下さった方が居られまして、XPでは、どの写真も見れているとの事でした。
お忙しい時に、このように煩わしい事をお聞きまして、本当に申し訳ございません。
お暇な時にでもお答え頂ければ、と思っております。

Re: [samurai_bamboo] 3 カラム化の例

本当に何度も申し訳ありません。
モブログの件ですが、実はFC2のサポート掲示板にて解決致しましたので、上の質問は、キャンセルという事で、宜しくお願い致します。

コメント投稿フォーム

管理者にだけ表示を許可する

Paging Navigation

Navigations, etc.

About This Website

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