ThickBoxを ”もっと” 可愛らしく・・・
ThickBoxを ”もっと” 可愛らしく・・・って
半透明の背景色を変えちゃいましょう・・・・・・
もちろん前の記事「ThickBoxを可愛らしく・・ 」と組み合わせて使えます
CSSが使えないスキンの場合は
フリープラグインに 注1
<style type="text/css"><!--
#TB_overlay,
* html #TB_overlay{
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(Enabled :true;);
filter:alpha(opacity=60);-moz-opacity: 0.6;opacity: 0.6;
background-color:#f0f;
}
--></style>
CSSが使える方はCSSの最後にコピペしてください
/* Thickbox背景色 */
#TB_overlay,
* html #TB_overlay{
background-image: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(Enabled :true;) !important;
filter:alpha(opacity=60) !important;
-moz-opacity: 0.6 !important;
opacity: 0.6 !important;
background-color:#ff00ff !important;/*背景色*/
}
background-color:#f0f; または
background-color:#ff00ff !important;/*背景色*/
を変更すると・・・
※フリープラグインの方は文字数節約のため3桁を使っていますが6桁の色でもOKです
もちろん・・・背景画像でもＯＫ！
CSSが使えないスキンの場合は
フリープラグインに 注1
<style type="text/css"><!--
#TB_overlay,
* html #TB_overlay{
background-image:url(画像のURL);
filter:alpha(opacity=60);-moz-opacity: 0.6;opacity: 0.6;
}
--></style>
CSSが使える方はCSSの最後にコピペしてください
/* Thickbox背景色 */
#TB_overlay,
* html #TB_overlay{
background-image:url(画像のURL) !important;
filter:alpha(opacity=60) !important;
-moz-opacity: 0.6 !important;
opacity: 0.6 !important;
}
filter:alpha(opacity=60);-moz-opacity: 0.6;opacity: 0.6;
数字を変えると透過率が変わります・・・・設定は60%（60 0.6）
100%は不透明、0%で透明になります 数字を小さくすれば透明に近づきます
注1 ： フリープラグインに貼り付ける場合は
必ずすっぴんバージョン より後ろに書いてください
後ろであればどこでもかまいません
※ページを読み終わってから動作します
画像が多かったりJavaScript等で重くなっている場合は動作するまでに時間がかかります
その場合は今まで通りに新しい画面が立ち上がって表示されますが、すぐに動作し始めます
読み終わっても動作しない場合はどこかが間違っています・・・・
※大きな画像はウィンドウのサイズに自動的にリサイズされます
もちろん もっとかっこよく！！ だってできますよ
+アリス症候群+ さまです
2008.8.6
アメブロの画像表示方法の変更によりThickboxは自動では使えなくなりました
ど～しても使いたい方は・・・面倒でもいいよって方は・・・
ThickBoxを可愛らしく・・・
ThickBox 可愛らしくしてみませんか？
・・・・もちのロン 格好良くもなりますよ～
「ThickBoxを ”もっと” 可愛らしく・・・ 」とも組み合わせて使ってください
カンタンなカスタマイズです
例としてはピンク系にしてみました
枠をピンクにしちゃいましょ～ （別に何色でも良いんですけど・・・）
フリープラグインに貼り付けてください 注1
<STYLE TYPE="text/css">
<!--
#TB_window {
background-color: #ffc0cb;
color:#f0f;
}
#TB_Counter{
color:#f0f;
}
--></STYLE>
ＣＳＳが使える方はこちらをＣＳＳの最後にコピペください
/* ThickBoxを可愛らしく・・・ */
#TB_window {
background-color: #ffc0cb !important;/*枠の背景色*/
color:#ff00ff !important;/*タイトルの色*/
}
#TB_Counter{
color:#ff00ff !important;/*ページカウンターの色*/
}
Firefoxで閲覧する場合だけですが・・・・
角が丸くなっちゃうんです・・・
ブログにこられた方がFirefoxを使っている場合だけ角丸になります
背景画像を使っている場合は角丸にならず画像上にヘンな枠が出来ます
背景色のときだけ設定してください ・・・ あくまでもFirefoxで見たときだけです
フリープラグインに貼り付けてください 注1
<STYLE TYPE="text/css">
<!--
#TB_window {
background-image:url(画像のURL);
-moz-border-radius:15px;
color:#f0f;
}
#TB_Counter{
color:#f0f;
}
--></STYLE>
ＣＳＳが使える方はこちらをＣＳＳの最後にコピペください
/* ThickBoxを可愛らしく・・・ */
#TB_window {
background-image:url(画像のURL) !important;/*枠の背景画像*/
-moz-border-radius:15px;/*コーナー角丸*/
color:#ff00ff !important;/*タイトルの色*/
}
#TB_Counter{
color:#ff00ff !important;/*ページカウンターの色*/
}
背景画像を使っても・・・・・
フリープラグインに貼り付けてください 注1
<STYLE TYPE="text/css">
<!--
#TB_window {
background-image:url(画像のURL);
color:#f0f;
}
#TB_Counter{
color:#f0f;
}
--></STYLE>
ＣＳＳが使える方はこちらをＣＳＳの最後にコピペください
/* ThickBoxを可愛らしく・・・ */
#TB_window {
background-image:url(画像のURL) !important; /*枠の背景画像*/
color:#ff00ff !important;/*タイトルの色*/
}
#TB_Counter{
color:#ff00ff !important;/*ページカウンターの色*/
}
こんな感じになりますよ～ ←背景画像＆文字色を変更している見本サイトです
注1 ： フリープラグインに貼り付ける場合は
必ずすっぴんバージョン より後ろに書いてください
後ろであればどこでもかまいません
※ページを読み終わってから動作します
画像が多かったりJavaScript等で重くなっている場合は動作するまでに時間がかかります
その場合は今まで通りに新しい画面が立ち上がって表示されますが、すぐに動作し始めます
読み終わっても動作しない場合はどこかが間違っています・・・・
エラーは表示されますが気にしなくてもOKです
ソースを開いて記事中のミスを探して訂正下さい
ここの常連さんラビリンスさまはこのようにされました
さまはこうなりました
男は黒！でしょ・・・もう少しお待ち下さい
とりあえずは背景色を黒系統に文字を白にすればらしくはなりますm(_ _)m
2008.8.6
アメブロの画像表示方法の変更によりThickboxは自動では使えなくなりました
ど～しても使いたい方は・・・面倒でもいいよって方は・・・