| ウェブリ/ブログログイン | ] | トップ プロフ フレンド サークル |
|
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%; }
 ※ 設定テーマの文字数が多いとレイアウトが崩れるので注意してください。ρ(･ω･`*)ｺﾚﾈ  標準で2カラム表示の場合 ・ブログ全体の幅 → 700px 程度 ・本体部分の幅 → 500px 程度 この時、8文字以上でレイアウトの崩れがでました。 7文字程度で抑えるか、長い場合はブログの幅の調整をするといいかもです。 【参考記事】 CSS（スタイル編） 第７回 ブログの幅を広げてみよう♪ セルの色指定 （トップページ・記事ページ別指定）トップページと記事ページを個別に色指定したい場合には、 先に使った文字列【 .themetabs{ 】の代わりに下記の文字列で個々にデザイン指定をします。 トップページ（テーマ別ページ）は【 #contents .themetabs 】（赤）、 記事ページ は【 #blog .themetabs 】（青）です。
 あえてトップページと記事ページで違う色にすることもないと思いますが、 こんな風にも出来るよって程度のものです(;^_^A アセアセ… この辺りはお好みで（にこ）ﾉ 以上、久しぶりのCSS編集の記事でした（気まずい）） それでは、今回はこのくらいで（にこ） |ω・)ﾉｼ See you♪ |彡 ｻｯ 【 関連記事 】 テーマタブに画像を使用してボタンライクなデザインに♪ → 第１４回 テーマタグに画像を使ってをボタン風に♪  CSS編集 〜 スタイル編・ オリジナルデザインのブログを作ろう♪ ・ 第１回 タイトル画像を変更する♪ ・ 簡単♪ タイトル画像を簡単に変更する♪ 〜タイトルデザイン設定 ・ 第２回 背景の画像と背景色を変更する♪ ・ 第３回 アイコンを変更する♪ 〜 コンポーネント領域 ・ 第４回 アイコンを変更する♪ 〜 ページヘッダ部分 ・ 第５回 トラックバック、コメント領域も変えてみよう♪ ・ 第６回 一覧の画像と罫線のサイズと色♪ ・ 第７回 ブログの幅を広げてみよう♪ ・ 第８回 いろんな場所の線のデザインをいじってみよう♪ ・ 第９回 コメントの入力欄の高さを変える♪ ・ 第１０回 コメントを区切る罫線のデザイン♪ （要考察） ・ 第１１回 余白を指定する♪『マージンとパディング』 ・ 第１３回 テーマタグのデザインを変えてみる♪  ・ 第１４回 テーマタグに画像を使ってをボタン風に♪ CSS編集 〜 フォント編・ ブログのフォントのデザインを変えてみる♪ ・ 第１回 トップページのフォント♪ 『タイトル〜プロフィール』 ・ 第２回 トップページのフォント♪ 『新着記事一覧』 ・ 第３回 リンクの付いているフォント♪ ・ 第４回 コンポーネント領域ののフォント♪ ・ 第５回 記事ページのフォント♪ 『タイトル 〜 記事題名』 ・ 第６回 記事ページのフォント♪『 関連テーマ 』 ・ 第７回 記事ページのフォント♪『 トラックバック、コメント』 活用編・ CSS（活用編） スタイルシートで使用する文字列集 ・ CSS（活用編） スタイルシートのエラーチェックをしてみよう♪ ・ Webセーフカラーチャート 小技編・ CSS（小技編） プロフィール領域のブログ名を見えなくしてスッキリ♪ ・ CSS（小技編） 関連テーマを非表示にする ・ CSS（小技編） 広告を非表示にする（ Ads by Google ） ・ CSS（小技編） サイドバーのデザイン指定のためのID♪ ・ CSS（小技編） 画像の枠線を消しちゃおう♪ ・ ウェブリブログでパンヤの絵文字〜フリースペースの活用♪ ・ ブログ内検索フォームの設置の仕方 トラブル編・ CSS（トラブル編） 記事ページの日付が左によってしまった!?
|
| << 前記事（2008/12/26） | トップへ | 後記事（2008/12/27）>> |
| タイトル （本文） | ブログ名／日時 |
|---|---|
テーマタブの色とセル幅を均等に
今回のCSS編集はテーマタブの色・横幅を均等に変更{%虹webry%} ...続きを見る |
Mixture 2009/04/13 16:03 |
| 内 容 | ニックネーム／日時 |
|---|
| << 前記事（2008/12/26） | トップへ | 後記事（2008/12/27）>> |
