バトンをスタイルシートで整える

  • 2008.11.23  日曜日
バトンの表示をスタイルシートで整えてみました(参照)。すごくシンプルなものにしましたが、指定によっては凝ったデザインも出来ると思います。

スタイルシートの記述は以下のようになります。

/* バトンタイトル */
.baton_title{}

/* 全体(タイトル除く) */
.blog_baton{}

/* 質問 */
.baton_q{}

/* 質問の番号 Q1など */
.q_number{}

/* 回答 */
.baton_a{}

/* 回答の番号 A1など */
.a_number{}
スタイルシートの記述方法は以下のサイトが参考になります。ご自分のブログにあったデザインにしてみてください。

参考になるサイト

スポンサーサイト



FC2ランキング

カテゴリページにタイトル一覧を表示

  • 2008.11.05  水曜日

以前カテゴリを選んだときにタイトル一覧がでるといいという御意見がありましたが、人それぞれ求める機能が違うのでテンプレートに組み込むことはしないと返答しました。今もその考えなのですが、Htmlや変数がよく解らない人にとっては大変なのかもしれないので、こちらにソースコードを載せておきます。

<!--category_area--><ul>
<!--topentry-->
<li><a href="<%topentry_link>"><%topentry_title></a></li>
<!--/topentry-->
</ul><!--/category_area-->
上記のタグを表示させたい場所に貼ります。ただこのタグは必要最低限のものなので、このままでは見映えも悪いですから、スタイルシート等で整える必要があります。
FC2ランキング

2カラム サイドの左右変更

  • 2008.10.15  水曜日

2カラムのサイドカラムの左右変更方法です。やり方はとても簡単です。
スタイルシートの #content#side の float部分を変更します。

例として右カラムを左カラムにする場合は
#content{float:left;

#side{float:right;

上記のleftとrightの部分を逆にします。
#content{float:right;

#side{float:left;

左カラムを右カラムにする場合も同様に、#content と #side のfloat部分を逆にすれば変更できます。ただし「kokekko_blue」は固定の背景画像を使用しているため、変更すると表示がおかしくなりますので、サイドカラムの左右変更はせずに、そのままの状態でご使用くださいませ。
FC2ランキング

FC2ブログ 親子カテゴリ

  • 2008.06.26  木曜日
FC2ブログに【親子カテゴリ】という機能ができて、公式プラグインのカテゴリのHTMLが変わりました。2種類あり、片方はカスタマイズ向けとなっています。 カスタマイズ向けでない方はlistタグが使われていないので、他のプラグインと見た目が少し変わってしまいます。

それと親カテゴリは子カテゴリを含むというよりは、関連付けという感じで、親カテゴリも1つの独立したカテゴリのようです。何かちょっとややこしい気がしますね。

親カテゴリにリンクはいらない、リスト形式で表示したい方は、FC2ブログ ユーザーフォーラムに書かれたdanielさんのHTMLタグ を使用すると一気にお悩み解決できます。

それからBeigeHeart_べーじゅのこころのChakoさんや、ヒヨコ君増殖中のひよこくん(さん)のところも参考にされると、バッチリ綺麗に表示されます。


…他力本願ですいません。
FC2ランキング

幅の変更

  • 2008.06.24  火曜日
2カラム 3カラム

左図が2カラムの構成、右図が3カラムの構成です。2カラムの左サイドバーはsideが左側になるだけなので省略しています。

全体を囲むのが container で、メインカラムが content 、サイドカラムは2カラムの場合 side で、 3カラムは side-leftside-right 。 3カラムでは左カラムとメインカラムを囲む wrapper があります。

幅を拡げるにはスタイルシートでそれぞれのwidthの値を変更します。
#container{
width:●●px;

続きを読む

FC2ランキング

ブログランキング

カテゴリー

プロフィール

カレンダー(月別)

検索フォーム

コメント

リンク

RSSフィード

その他