ThickBoxを ”もっと2”可愛らしく・・・
ThickBoxを可愛らしく・・・ を使われている方・・・・
もう１行追加するだけで・・・・・・
border: dotted 10px #FF1493;
border: dashed 10px #FF1493;
border: double 10px #FF1493;
border: solid 10px #FF1493;
border: groove 10px #FF1493;
border: ridge 10px #FF1493;
border: inset 10px #FF1493;
border: outset 10px #FF1493;
わかりやすくするため枠の背景と、周りの背景を同じ画像にしてあります
太さ（わかりやすく太目の10px）と色(#ff1493)はどれも同じで比べてあります
自分で好みの線種・太さ・色を探してください
コチラはborder: dotted 5px #ff1493; ピンクの5pxの点線を使っています
青字部分を#TB_windowの中に付け足します
フリープラグインを使っている方は
<STYLE TYPE="text/css"><!--
#TB_window {
border: dotted 5px #FF1493;
background-color: #ffc0cb;
color:#f0f;
}
#TB_Counter{
color:#f0f;
}
--></STYLE>
ＣＳＳを使っている方は
/* ThickBoxを可愛らしく・・・ */
#TB_window {
border: dotted 5px #FF1493 !important;/*ボーダー線種、太さ、色*/
background-color: #ffc0cb !important;/*枠の背景色*/
color:#ff00ff !important;/*タイトルの色*/
}
#TB_Counter{
color:#ff00ff !important;/*ページカウンターの色*/
}
こちらの見本サイト では・・・・
さらに写真の周りにもボーダーを設定しています（白い線）
この場合も線種、太さ、色は自由に決めてください
枠に派手な背景画像を使用した場合
画像（写真を）を区切り引き立たせるのに白い線はお勧めです
フリープラグインに加える場合は
<style type="text/css"><!--
↑これと↓これの間に加えてください
--></style>
#TB_window img {
margin-left: auto;
margin-right: auto;
border: solid 5px #fff;
}
ＣＳＳに加える場合は他の前後でかまいません
/*ThickBox画像の枠*/
#TB_window img {
margin-left: auto !important;
margin-right: auto !important;
border: solid 5px #ffffff !important;
}
#TB_window { } と #TB_window img { } 違いますよ・・・間違えないで下さい
border-top (上の枠線)
border-bottom (下の枠線)
border-left (左の枠線)
border-right (右の枠線)
を、使えば上下左右の線をバラバラに設定も出来ますが・・・
やりすぎには注意してください・・・
※携帯から写真をアップしている場合
タイトルが長すぎて表示が崩れる場合があります
写真の幅に比べてタイトルが長すぎるので表示位置が崩れます
PCでタイトルを付けなおすか、タイトルを表示しないようにしてください
2008.8.6
アメブロの画像表示方法の変更によりThickboxは自動では使えなくなりました
ど～しても使いたい方は・・・面倒でもいいよって方は・・・