きまぐれAWA's Life

アクセスカウンタ

zoom RSS CSS(スタイル編)第14回 テーマタグに画像を使ってをボタン風に♪

<<   作成日時 : 2009/01/03 11:58   >>

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

前回はテーマタグの色をを変えてみました。
今度はテーマタグに画像を使ってボタン風なデザインにしてみたいと思います(ん)



※ テーマタブのリンク文字の設定方法について追記しました。 09/01/03 19:00





テーマタブのデザインをボタン風に♪ 〜 その壱


まずはWindowsライクなボタンのデザインから♪
こんなボタンを用意して、それぞれこんな感じで用途分けをしてみましたρ(・ω・`*)コレネ


画像画像 1 : リンクつきのタブ

画像画像 2 : ポインタを置いた時のタブ

画像画像 3 : 現在表示されているページのタブ


画像の大きさは表示されているページに合わせて作成してあります(にや)
※ ブログの幅 720px 、2カラム表示、テーマタブのテーブルは500px程度

テーマタグは次のように割り当てられています。
標準で書き込まれているものを全て載せておきます。
該当箇所にそれぞれ文字列を入力して画像の追加やデザインを指定します。




/*----------------------------------------------*/
/* テーマタブ */
/*----------------------------------------------*/

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


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

/* 記事ページのテーマタブ */
#blog .themetabs{
}

/* テーマタブ テーブル */
.themetabs table{
}

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

/* テーマタブ リンクつきのタブ */
.themetabs a{
background-image: url(画像 1のURL);
background-repeat: no-repeat;
background-position: center center;
border: 0px;
}


/* ポインタを置いた時のタブ */
.themetabs a:hover{
filter:Alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
background-image: url(画像 2のURL);
background-repeat: no-repeat;
background-position: center center;
border: 0px;

}

/* テーマタブ リンク 『未訪問、訪問済』 */
.themetabs a:link,
.themetabs a:visited{
}

/* ポインタを置いた時の文字色 */
.themetabs td a:hover{
}

/* 現在表示中ページのタブ */
.themetabs a.cur:visited,
.themetabs a.cur{
background-image: url(画像 3のURL);
background-repeat: no-repeat;
background-position: center center;
border: 0px;
color: #0000FF;
font-weight:bold;
}




こんな風になりました(ん)

画像



◆ デザイン指定の文字列の説明

それぞれがこのようなデザイン指定をしています。

background:none;
→ デフォルトで指定されているタブの背景色のデザイン指定を無効にします。

font-size:9pt;
→ テーマタブのフォントを 9ptで固定表示します。 ※注

width:20%;
→ タブの幅を均等にします。

background-image: url(画像のURL);
→ 背景画像を挿入します。

background-repeat: no-repeat;
→ 背景画像を繰り返し表示しないようにします。

background-position: center center;
→ 背景画像の位置を指定します。(今回はセル内で縦横方向共に中央寄せです。)

border: 0px;
→ 画像の枠線を表示しません。

color: #0000FF;
→ 現在表示中ページのタブの文字の色を指定をしました。(青色)

font-weight:bold;
→ 現在表示中ページのタブの文字の太さを指定にしました。(太文字)



◆ 透明度を指定する文字列

filter:Alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;


これらは透明度を指定する文字列です。
ブラウザによって指定方法が違うので複数されています。

標準では80%くらい透明になる設定になっていますので、
こちらを不透明(透明にしない)ように指定し直しました。

ちなみに透明度を上げてみると…

画像


指定は不透明度30%です。
画像、文字共にうっすら透明になりますね(ひょえ)アララ




※注 フォントを固定表示する

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


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

画像


あまり推奨は出来ませんが、ここではデザインを優先してフォントを固定しました。
このようなデザイン指定をする時には、効果等をよく考えてご利用ください。






テーマタブのデザインをボタン風に♪ 〜 その弐


次は違うバージョンです♪
このようなイメージで画像を用意して、それぞれこんな感じで用途分けをしてみましたρ(・ω・`*)コレネ


画像画像 4 : リンクつきのタブ

画像画像 5 : ポインタを置いた時のタブ

画像画像 6 : 現在表示されているページのタブ



こちらの画像を使ってデザイン指定をしてみます。
該当箇所にそれぞれ文字列を入力して画像の追加やデザインを指定します。




/*----------------------------------------------*/
/* テーマタブ */
/*----------------------------------------------*/

/* テーマタブ (共通) */
.themetabs{
background:#0066FF; /* 画像を囲む枠線の役割をします */
font-size:10pt;
}


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

/* 記事ページのテーマタブ */
#blog .themetabs{
}

/* テーマタブ テーブル */
.themetabs table{
}

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

/* テーマタブ リンクつきのタブ */
.themetabs a{
background-image: url(画像 4のURL);
background-repeat: repeat-x; /* 画像を横方向に並べて表示します */
border: 0px;
}


/* ポインタを置いた時のタブ */
.themetabs a:hover{
filter:Alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
background-image: url(画像 5のURL);
background-repeat: repeat-x;
text-decoration: none;
border: 0px;
}


/* テーマタブ リンク 『未訪問、訪問済』 */
.themetabs a:link,
.themetabs a:visited{
}

/* ポインタを置いた時の文字色 */
.themetabs td a:hover{
}

/* 現在表示中ページのタブ */
.themetabs a.cur:visited,
.themetabs a.cur{
background-image: url(画像 6のURL);
background-repeat: repeat-x;
color: #FFFFFF;
font-weight:bold;
}




こんな風になりました(ん)

画像








【補足】 テーマタブの文字色について

テーマタブの文字色を変更します。

個々に設定をしない場合にはブログ全体のリンク色の設定が反映されています。
リンクのついた文字色についてはこちらの記事を参考にん

→ CSS(フォント編) 第3回 リンクの付いているフォント♪




ではデザイン指定に移ります。

該当箇所に文字列を追加します。 ※ ()内は仮のデザイン指定。

1) リンクつきのタブ ( 黒色を指定 )

/* テーマタブ リンク 『未訪問、訪問済』 */
.themetabs a:link,
.themetabs a:visited{
color: #000000;
}


2) ポインタを置いた時のタブ ( 文字色を赤色、下線無しと指定 )

/* ポインタを置いた時の文字色 */
.themetabs td a:hover{
color: #FF0000;
text-decoration: none;
}


3) 現在表示されているページのタブ ( 文字色を青色、太文字と指定 )

/* 現在表示中ページのタブ */
.themetabs a.cur:visited,
.themetabs a.cur{
color: #0000FF;
font-weight:bold;
}





以上です(ん)





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

|ω・)ノシ See you♪

|彡 サッ





【 関連記事 】
テーマタブの背景色を変更してちょっと違った雰囲気に♪
第13回 テーマタグのデザインを変えてみる♪



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



テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

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

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


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

タイトル
本 文

コメント(16件)

内 容 ニックネーム/日時
おお〜(びっくり)
おもしろいですね〜(拍手)
σ(@まじ)の日記の場合、ほとんどがパニャ日記ですから、テーマタブの設定を使うか迷うところなんですよね(気まずい)
こ〜いう方法があると、色々と見せ方とか工夫できるかな〜と思えたり(ん)
ちょこっと考えてみようかな(にや)
あやせちゃん
2009/01/03 12:14
 こんにちは〜
 フムフムφ(゜0゜*)ホォホォφ(。_。*)メモメモφ(゜o゜*)フムフムφ(。_。*)カキカキ
 記事作成お疲れ様〜(拍手)
 ブログを格好良く見せたい人にとってとても参考になりますね(ん)。
 もちろんσ(・・*)アタシも参考にさせていただきました。
 ありがとうございます(@ぺこ)
 >透明度を指定
 火狐では解釈されない〜〜(わーん)ノヾ(@うる)ヨシヨシ
 
松下禅尼
URL
2009/01/03 18:31
あやせさん、いらっしゃいませ(にこ)ノ

テーマタブは幾つかカテゴリをわけているブログだと
ピックアップ的な使い方が出来る良い仕様ですね(*・ω・)b
画像挿入はお遊び感覚で楽しめるかな?
カテゴリに合った画像をチョイスするのも良いかもです♪

>ちょこっと考えてみようかな(にや)
何ができるか楽しみですね〜(ん)
mairis
2009/01/03 19:07
松下さん、いらっしゃいませ(ん)ノ

ひさびさ〜に続くCSS編集の記事です(ひょえ))
新しいものが出ないとなかなか記事が書けません(しょぼ)
遊べるものが出てちょっと嬉しかったりします(*´艸`)クスクス

画像が挿入できるとデザインの幅が広がりますね♪
またいろいろ変えてみたいと思います(にや)

>火狐では解釈されない
opacity でFireFoxにも対応しているようです(ん)
期間限定で火狐のみ不透明度30%な設定にしてみました。
ちょっと確認してみてください(ぶーん)
mairis
2009/01/03 19:16
はじめまして、CSS編集を参考にさせていただいてます。
ウェブリブログにおいて、自分的に一番気になるのが
このコメント表示なんですよね。
横→にハンドルと日時がくるために狭いと思うのです。
コメントの最初の部分に表示するとか、そういうのは
さすがにいじれる領域ではないのでしょうか。
また、トラックバック欄も紛らわしくて邪魔みたいな。
コメントが多いブログを作る自信は当然ないですが(笑)、
ちょっと気になります。
ハネモン
2009/01/04 00:27
ハネモンさん、いらっしゃいませ(ぺこ)
はじめまして、こんにちは♪

ウェブリではHTMLまでは手を加える事は出来ませんね(しょぼ)
初心者の方でも簡単に〜な感じな仕様なようです。

レイアウトはいじれませんので、
ブログ全体やコメント部分の幅の調整、
記事ページはサイドバーを上下に設置する、
もしくは表示しないなど工夫するしかないでしょうか。

トラックバック欄についてですが、
CSS編集で見えなくする事も可能です(ん)
mairis
2009/01/04 11:25
 おお〜半透明になってました(ん)
opacity・・・φ(◎。◎‐)フムフムフム
σ(・・*)アタシも勉強不足ですね...... ( 〃..)ノ ハンセイ(うる)
 
松下禅尼
URL
2009/01/04 12:49
>松下さん

うちも試したらできただけなんですけどね(〃▽〃;A アセアセ・・
Google Chrome もopacityで半透明になるようです。
でも他のブラウザは確認してません(気まずい))
mairis
2009/01/04 21:44
使わせて頂きましたヽ(・ω・)ノ

とっても面白くなりました(●´∀`)
ホント、ありがとうございます(ぺこ)

面白く編集できましたヽ(・ω・)ノ

あ、それとリンク希望しても良いですかぁ?
よろしくです(●´∀`)
ぷー(ほし)ちん
2009/08/30 16:57
ぷー(ほし)ちんさん、いらっしゃいませ(にこ)
この設定はちょっとしたアクセントになるからお勧めだったり(ん)b
面白設定が出来たようで何よりです(。・ω・)ノ

リンクの件、了解です(にや)
うちの方からもリンク貼らせて頂きますね〜♪

あと、スタイルシートを見せてもらいました。
いつくか記述ミスがありましたのでメッセージの方で遅らせてもらいますね。
mairis
2009/08/31 16:55
初めまして、お初コメント入れさせて頂きます!

私もCSS編集をちょっとづつしているので、このブログを良く参考にさせて頂いてます。(にこ)
変えたい所もいっぱい出て来ると思うのですが、なかなか上手く考えがまとまりません。(あれ)
取り合えず変えたい所からいじっていってる状態です。
CSS編集の時にコピペさせて頂いてよろしいでしょうかぁ?

これからもヨロシクお願いします!m( _ _ )m

ちなみに下の絵文字も面白いですね!
朱柄の槍にてござそうろう
2009/11/09 09:56
朱柄の槍さん、はじめまして(ん)
いらっしゃいませ、こんにちは(ぺこ)

すこしでもお役にたててるようで何よりです(にこ)
CSS編集も一度にやると「わけわからんヽ(`Д´)ノ」になっちゃうので、少しずつやっていくのが良いと思います。
やってるうちにだんだん全体のイメージが決まってきますよ♪

>コピペ
一応お好み部分の修正して、コピペでそのまま使えるようにしてるつもりです。
コピペはぜんぜんOKですよ(ん)

>下の絵文字
うちのやってるゲームで使用してる絵文字になります。
もし使いたい〜って場合には、絵文字下のリンクから「ぞんさん」のサイトに行くとスクリプトが配布されてます。
気になるようでしたら、ちょっと覗いてみてはいかがでしょうか(にや)
mairis
2009/11/09 11:30
こんばんは(@ぺこ)
画像の枠線の時は、お世話になりました。
そして、また、お願いしたいのですが・・・・
テーマタグを変更してみたのですが、黒い線が出ているのです。
どうしたらなくるのでしょうか?(@あれ)
私の作った画像サイズが大きかったのでしょうか?
どうぞ、お力添えをお願い致します(@ぺこ)
たむたむ
2010/05/20 01:06
たむたむさん、いらっしゃいませ(ん)
その節はお疲れ様でした(にこ)

黒線の消すには、スタイルシートの352行目あたりのトコロをちょこっと変更してもらいます。
たむたむさんのブログでテーマタグ周辺の背景色が白ですので、
テーマタグの背景色を同色の白に指定すれば黒線が消えます。
以下のように「background:#666600;」となっているのを、
「background-color:#FFFFFF;」に変更してください。

/* テーマタブ (共通) */
.themetabs{
background-color:#FFFFFF;
font-size:10pt;
}

これでOKです(ん)
挙動を見てみましたけど、画像については問題は無いと思います(*・ω・)b
mairis
2010/05/20 01:34
さっそくの、お返事ありがとうございました(@ぺこ)
本当に感謝感謝です(@すき)
mairisさんの、おかげで自分のブログを見るのが楽しみになってきました(@わら)
また、お世話になる時がくるかもしれませんが
どうぞヨロシクお願い致します(@ぺこ)

本当に、ありがとうございました。
たむたむ
2010/05/20 02:19
≫ たむたむさん
おつかれさまでした〜(@にこ)
ブログいじりもハマると楽しいですよね〜(わら)
これからも頑張っちゃって下さい(ん)
また何かありましたらいつでもおより下さいませ〜♪
mairis
2010/05/20 13:50

コメントする help

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

* ぱにゃステ *

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

CSS(スタイル編)第14回 テーマタグに画像を使ってをボタン風に♪ きまぐれAWA's Life/BIGLOBEウェブリブログ
文字サイズ:       閉じる