バトンをスタイルシートで整える
- 2008.11.23 日曜日
スタイルシートの記述は以下のようになります。
/* バトンタイトル */
.baton_title{}
.blog_baton{}
/* 質問 */
.baton_q{}
.q_number{}
/* 回答 */
.baton_a{}
.a_number{}
FC2ブログのテンプレートを作成・配布。
見やすく使いやすいデザインを心掛けております。
スタイルシートの記述は以下のようになります。
/* バトンタイトル */
.baton_title{}
/* 質問 */
.baton_q{}
/* 回答 */
.baton_a{}
以前カテゴリを選んだときにタイトル一覧がでるといいという御意見がありましたが、人それぞれ求める機能が違うのでテンプレートに組み込むことはしないと返答しました。今もその考えなのですが、Htmlや変数がよく解らない人にとっては大変なのかもしれないので、こちらにソースコードを載せておきます。
2カラムのサイドカラムの左右変更方法です。やり方はとても簡単です。
スタイルシートの #content と #side の float部分を変更します。
#side{float:right;
#side{float:left;
それと親カテゴリは子カテゴリを含むというよりは、関連付けという感じで、親カテゴリも1つの独立したカテゴリのようです。何かちょっとややこしい気がしますね。
親カテゴリにリンクはいらない、リスト形式で表示したい方は、FC2ブログ ユーザーフォーラムに書かれたdanielさんのHTMLタグ を使用すると一気にお悩み解決できます。
それからBeigeHeart_べーじゅのこころのChakoさんや、ヒヨコ君増殖中のひよこくん(さん)のところも参考にされると、バッチリ綺麗に表示されます。
左図が2カラムの構成、右図が3カラムの構成です。2カラムの左サイドバーはsideが左側になるだけなので省略しています。
全体を囲むのが container で、メインカラムが content 、サイドカラムは2カラムの場合 side で、 3カラムは side-left と side-right 。 3カラムでは左カラムとメインカラムを囲む wrapper があります。
幅を拡げるにはスタイルシートでそれぞれのwidthの値を変更します。