きまぐれAWA's Life

アクセスカウンタ

zoom RSS CSS(スタイル編)第13回 テーマタグのデザインを変えてみる♪

<<   作成日時 : 2008/12/27 07:39   >>

なるほど(納得、参考になった、ヘー) ブログ気持玉 3 / トラックバック 1 / コメント 0

12月18日のウェブリの機能強化としてテーマタブが追加されました(ん)
今回はコチラのデザイン指定をしてみます♪



テーマタブのデザインを変えてみよう♪


テーマタブは各テンプレートによって色の指定されていますが、
色を変えたいなって思った時のためのCSS編集方法です。


こちらがテーマタブですね ρ(@まじ)

画像



この画像はデザインを『CSS編集のみ』で表示した時のテーマタブです。


あ、そうそう(まじ)
色の他にもテーマタグで気になった部分がひとつあります。
テーマタブの幅は設定したテーマの文字数で大きさが決まるようになっています。
なので文字数によってはバラバラになってしまいます。

これではちょっと見た目がよろしくありません(しょぼ)
こちらを見映えが良いように各セルの幅を均等にしてみます(*^-^)bネッ






セルの色指定 (トップページ・記事ページ一括指定)

トップページと記事ページでは少し表示が異なる部分がありますが、
まずは一括でデザイン指定するケースです。

テーマタブのデザイン指定の為の文字列は全て新規での追加になります。
あと、スタイルシートへの書き込み位置は一番下に追加で良いと思います。



追加する文字列はこちらです。

.themetabs{
background:#ED7180;

font-size:9pt;
}


※ブログのイメージに合わせて ピンクっぽい色をチョイスしています。
お好みで【#ED7180】部分のカラーコードを変更して下さい。


【参考記事】
→ セーフティーカラーコード



【 追記 】 フォントサイズの固定

ブラウザで表示されるフォントのサイズは、IE系では標準的に『中』でしょうか。
中には『大』や『最大』で表示されている方もいると思います。

長いテーマを設定している状態で『大』や『最大』を選択した場合、
セル内で文字が折り返してしまいデザインが崩れます。

推奨は出来ませんが、フォントサイズを固定する事でこの問題は回避できます。
ただ、フォント固定のデザイン指定をする際には効果等をよく考えてご利用ください。

font-size:9pt;

9pt 〜10pt くらいが標準的な大きさでしょうか?(こなた)






セルの大きさを均等にする

セルの大きさを均等に表示するには下の文字列を新規で書き込みます。
セルの数は5個なので5等分にして『20%』にします。

.themetabs td{
width:20%;
}





/* テーマタブ (共通) */
.themetabs{
background:#ED7180;

font-size:9pt;
}

/* テーマタブ セル */
.themetabs td{
width:20%;
}



画像







※ 設定テーマの文字数が多いとレイアウトが崩れるので注意してください。ρ(・ω・`*)コレネ


画像



標準で2カラム表示の場合
・ブログ全体の幅 → 700px 程度
・本体部分の幅 → 500px 程度

この時、8文字以上でレイアウトの崩れがでました。

7文字程度で抑えるか、長い場合はブログの幅の調整をするといいかもです。

【参考記事】
CSS(スタイル編) 第7回 ブログの幅を広げてみよう♪








セルの色指定 (トップページ・記事ページ別指定)

トップページと記事ページを個別に色指定したい場合には、
先に使った文字列【 .themetabs{ 】の代わりに下記の文字列で個々にデザイン指定をします。

トップページ(テーマ別ページ)は【 #contents .themetabs 】(赤)
記事ページ は【 #blog .themetabs 】(青)です。


/* テーマタブ (共通) */
.themetabs{
font-size:9pt;
}

/* トップ・テーマ別ページのテーマタブ */
#contents .themetabs{
background:#FF0000;
}


/* 記事ページのテーマタブ */
#blog .themetabs{
background:#0099FF;
}


/* テーマタブ セル */
.themetabs td{
width:20%;
}



画像



あえてトップページと記事ページで違う色にすることもないと思いますが、
こんな風にも出来るよって程度のものです(;^_^A アセアセ…
この辺りはお好みで(にこ)ノ





以上、久しぶりのCSS編集の記事でした(気まずい))




それでは、今回はこのくらいで(にこ)

|ω・)ノシ See you♪

|彡 サッ





【 関連記事 】
テーマタブに画像を使用してボタンライクなデザインに♪
第14回 テーマタグに画像を使ってをボタン風に♪



■ ブログをいじっちゃおぅ♪ 〜 ブログのレシピ 〜 ■



テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 3
なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)

トラックバック(1件)

タイトル (本文) ブログ名/日時
テーマタブの色とセル幅を均等に
今回のCSS編集はテーマタブの色・横幅を均等に変更{%虹webry%} ...続きを見る
Mixture 
2009/04/13 16:03

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
URL(任意)
本 文
  現在の閲覧者数:

* ぱにゃステ *

『ぱにゃステ』 customized by mairis
 
 
ふぉろーみー

CSS(スタイル編)第13回 テーマタグのデザインを変えてみる♪ きまぐれAWA's Life/BIGLOBEウェブリブログ
文字サイズ:       閉じる