ＢＯＸ(スクロールバー付き)
【のれん】の画像を使って
BOX にスクロールバーを付けました。
文字数が少なければスクロールバーは表示されません。
↓ ここから ↓
<CENTER><TABLE style="border:solid #FFB9D5 1px" cellspacing="0"><TBODY><TR><TD width="450" align="center" style="filter:progid:DXImageTransform.Microsoft.Gradient (gradientType='0',startColorstr='#FFCDE1',endColorstr='#FFF5F9')" height="100%" valign="bottom"><center style="FONT-SIZE: 10px; FONT-FAMILY: Comic Sans MS;"><CENTER><IMG SRC="http://image.space.rakuten.co.jp/lg01/57/0000350657/83/img6653f425zik6zj.gif" width="450" height="50"></CENTER><CENTER><div style="width:445px;height:30em;overflow:auto;" style="scrollbar-face-color:#FFE1ED; scrollbar-highlight-color:#ffe8f3; scrollbar-track-color:#ffccff; scrollbar-shadow-color:#ff99ff; scrollbar-3dlight-color:#ffffff; scrollbar-arrow-color:#ff99ff; scrollbar-base-color:#FFE1ED; scrollbar-darkshadow-color:#800000;"></CENTER>
ここにコメント
</TD></TR></TBODY></TABLE></CENTER>
↑ ここまで ↑ をコピペ
壁紙は【画像】では ありません 。
グラデーションのタグを入れてみました。
のれん の画像です。
こんな風に使います。
画像によって大きさが微妙に違います。
↓ここから↓
<CENTER><CENTER><TABLE style="border:solid #FFB9D5 1px" cellspacing="0"><TBODY><TR><TD width="440" align="center" style="filter:progid:DXImageTransform.Microsoft.Gradient (gradientType='0',startColorstr='#FFCDE1',endColorstr='#FFF5F9')" height="100%" valign="bottom"><center style="FONT-SIZE: 10px; FONT-FAMILY: Comic Sans MS;"><CENTER><IMG SRC="http://image.space.rakuten.co.jp/lg01/57/0000350657/30/imgbbb7e24bzikdzj.gif" width="441" height="33"></CENTER><CENTER><div style="width:440px;height:30em;overflow:auto;" style="scrollbar-face-color:#FFE1ED; scrollbar-highlight-color:#ffe8f3; scrollbar-track-color:#ffccff; scrollbar-shadow-color:#ff99ff; scrollbar-3dlight-color:#ffffff; scrollbar-arrow-color:#ff99ff; scrollbar-base-color:#FFE1ED; scrollbar-darkshadow-color:#800000;"></CENTER>
コメント
</TD></TR></TBODY></TABLE></CENTER>
↑ここまでコピペ↑
↓ここから↓
<CENTER><CENTER><TABLE style="border:solid #FFB9D5 1px" cellspacing="0"><TBODY><TR><TD width="440" align="center" style="filter:progid:DXImageTransform.Microsoft.Gradient (gradientType='0',startColorstr='#FFCDE1',endColorstr='#FFF5F9')" height="100%" valign="bottom"><center style="FONT-SIZE: 10px; FONT-FAMILY: Comic Sans MS;"><CENTER><IMG SRC="http://image.space.rakuten.co.jp/lg01/57/0000350657/31/img954cea6fzik9zj.gif" width="441" height="33"></CENTER><CENTER><div style="width:440px;height:33em;overflow:auto;" style="scrollbar-face-color:#FFE1ED; scrollbar-highlight-color:#ffe8f3; scrollbar-track-color:#ffccff; scrollbar-shadow-color:#ff99ff; scrollbar-3dlight-color:#ffffff; scrollbar-arrow-color:#ff99ff; scrollbar-base-color:#FFE1ED; scrollbar-darkshadow-color:#800000;"></CENTER>
ここにコメント
</TD></TR></TBODY></TABLE></CENTER>
↑ここまでコピペ↑
↓ここから↓
<CENTER><CENTER><TABLE style="border:solid #B9CEFF 1px" cellspacing="0"><TBODY><TR><TD width="443" align="center" style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#2929E5',endColorstr='#F5FAFF')" height="100%" valign="bottom"><center style="FONT-SIZE: 10px; FONT-FAMILY: Comic Sans MS;"><CENTER><IMG SRC="http://image.space.rakuten.co.jp/lg01/57/0000350657/84/imgbcd140a0zikezj.gif" width="447" height="50"></CENTER><CENTER><div style="width:443px;height:30em;overflow:auto;" style="scrollbar-face-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-track-color:#ffffff; scrollbar-shadow-color:#ffffff; scrollbar-3dlight-color:#ffffff; scrollbar-arrow-color:#B9CEFF; scrollbar-base-color:#ffffff; scrollbar-darkshadow-color:#ffffff;"></CENTER>
ここにコメント
</TD></TR></TBODY></TABLE></CENTER>
↑ここまでコピペ↑
GW中は あっちこっちに出かけ
天気に恵まれたこともあり
沢山 写真を撮りました。
そして久しぶりに素材を作りたくなったので
新しいモノを作りたいと思い
タグの組み合わせを変えて
こんな感じのモノを作ってみました。
壁紙に画像を入れることが出来て
枠で囲みBOX仕様に。
壁紙を固定したかったので
スクロールバーを中に入れてみました。
画像を持ち帰る時は
右クリックで画像を保存してください。
文字が指定数値内であれば
スクロールバーは表示されません。
文字が長くなれば長くなるほど
スクロールバーが活躍するという感じ♪
ちなみに このタグは この画像に合わせて作ったものなので
画像の大きさによりタグの指定数値を変えなければなりません。
画像を変えて、このタグを使用したい方は
ある程度のタグの知識を持っていれば可能です。
良く解らない。と言う方は･･･
色々とご自分で試してみてください。
どこの数字を変えたら どう変わるのか。
これは経験すれば自然に覚えていく知識です。
ここから
<CENTER><table cellpadding="0" style="border:2px solid #CCCCFF;background-image:url( 画像URL );background-repeat:no-repeat;background-position:"><tr>
<td bordercolor="#000000"><CENTER><div style="width:440px;height:35em;overflow:auto;border:0px solid #ffffff;" style="scrollbar-face-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-track-color:#ffffff; scrollbar-shadow-color:#ffffff; scrollbar-3dlight-color:#ffffff; scrollbar-arrow-color:#CCCCFF; scrollbar-base-color:#ffffff; scrollbar-darkshadow-color:#ffffff;"></CENTER>
ここにコメント。
</CENTER></td></tr></table>
ここまで をコピペ。
頑張ってください(人´∀｀)･:ﾟ+☆
枠付き･フィルター付き･スクロールバー付き
の
画像を鯉のぼりは先日UPしたので
別な画像を･･･
今回は観覧車にしてみました。
動物園に行って撮ったものです。
デジカメを持って行くのを忘れてしまい
携帯カメラで撮ったものを加工しました。
画像はちょっと荒いけど
これも味があって良いのでは？と
自己満足の世界ですが･･･。
気に入って頂けたら どうぞお使いください。
画像の大きさによっては
デザインが崩れてしまう可能性があります。
画像の大きさに注意して入れ替えてください。
しかし、こういう素材を作っていると
時間の過ぎるのが早い！
もう、かれこれ4時間もPCと格闘してる･･･
時間の流れにも注意が必要かな(笑)
この中にスクロールバーを付けちゃいましょ。
そうすれば画像の大きさは指定してあるから
画像が途切れて変なとこで くっつくコトもない。
色々とアレンジしてみると面白いネ。
枠を付けて フィルターを付けて
更にロールバーって･･･
ものすごいタグの量だけど(笑)
なんて 贅沢 なんでしょ★
スクロールバーにまでフィルターがかかっちゃって
なかなか良い感じでないかい？(≧◇≦)
5月という事で
新しい組み合わせで
鯉のぼりの画像で
UPしてみました。
<CENTER><table style="border:1px solid #5555FF;" bgcolor="D7E4FF"><tr><td bgcolor="white" style="border:1px solid #5555FF;"><TABLE><TR><TD align="CENTER"><TABLE cellspacing="80" background=" 画像URL " width="530"><TBODY><TR><TD bgcolor="#ffffff" style="border-width : 1px;border-style : solid;border-color : #ffffff;filter: Alpha(style=0,opacity=60,finishopacity=60);" align="center" colspan="5" width="500"><FONT style="font-size: 14px;color: #000000;line-height : 18px;font-weight: bold;"><CENTER><div style="width:350px;height:28em;overflow:auto;border:0px solid #ffccff;" style="scrollbar-face-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-track-color:#ffffff; scrollbar-shadow-color:#ffffff; scrollbar-3dlight-color:#ffffff; scrollbar-arrow-color:#B9CEFF; scrollbar-base-color:#ffffff; scrollbar-darkshadow-color:#ffffff;"></CENTER>
枠付きでフィルター付きでスクロールバー付きのタグ
</TD></TR></TBODY></TABLE></FONT></TD></TR></TBODY></TABLE></td></tr></table></CENTER>
ピンクの枠付きBOXの壁紙に画像を入れて
ピンクのスクロールバーを付けました。
今までの応用みたいなものです(*´ω｀*)ｂ
このテンプレに使う壁紙は薄めの色にしてください。
濃いと文字が見えにくくなります。
ここから
<CENTER><table style="border:1px solid #FFACE8;" bgcolor="FFE1ED"><tr><td bgcolor="white" style="border:1px solid #FFACE8;"><table cellpadding="0" style="border:2px;background-image:url( 画像URL );background-repeat:-repeat;width:445px;height:30em;"><tr><td bordercolor="#000000"><CENTER><div style="width:445px;height:30em;overflow:auto;border:1px solid #ffccff;" style="scrollbar-face-color:#FFE1ED; scrollbar-highlight-color:#ffe8f3; scrollbar-track-color:#ffccff; scrollbar-shadow-color:#ff99ff; scrollbar-3dlight-color:#ffffff; scrollbar-arrow-color:#ff99ff; scrollbar-base-color:#FFE1ED; scrollbar-darkshadow-color:#800000;"></CENTER>
コメント
</td></tr></table></td></tr></table></DIV></CENTER>
ここまで コピペ
シンプルなBOX(ｽｸﾛｰﾙﾊﾞｰ付き)のテンプレを作ってみました。
<DIV style="margin:0px;padding:0px;" align="center"><DIV style="margin:0px;padding:10px;line-height:1.3;overflow:auto;border: 2px dashed # 000000 ;font-family:' ＭＳ Ｐゴシック ',Osaka,sans-serif;color:#000000;background-color:#FFFFFF;text-align: left ;font-size: 90% ;width:500px;height:25em;">
コメント
</DIV></DIV>
文字の種類 を変えたい方は ＭＳ Ｐゴシック この部分を変更してください。
枠線の種類 を変えたい方は dashed この部分を変更してください。
枠線の色 を変えたい方は # 000000 この部分に6桁のカラーコードを入力してください。
文字の大きさ を変えたい方は 90% この部分を変更してください。
文字の位置 を変えたい方は left この部分を変更してください。
<線の種類>
solid ←普通線
dotted ←点線
double ←二重線(サイズは ３以上 で）
dashed ←破線
<文字の位置>
right =右
left =左
center =中央
このテンプレには画像を貼る事が出来ます。画像を貼り付ける場合は画像の大きさに注意してください。
画像が大きいとデザイン(ＢＯＸの形)が崩れてしまいます。
画像を貼り付けなくても使えます。画像を使わない場合は
<img src="画像ＵＲＬ" align="left"> ←このタグの部分を削除してください。
ＢＯＸの中にあるタグをコピペしてご使用ください。
色を変える事も出来ます。
<table cellpadding="2" cellspacing="0" bordercolor="#FFFFFF" bordercolordark="#ffffff" bordercolorlight="#000000" border="1"><tr><td bgcolor="#ffffff"><table cellpadding="2" cellspacing="0" bordercolor="#FFFFFF" bordercolordark="#FFFFFF" bordercolorlight="#000000" border="1">
<CENTER>
</CENTER>
<tr>
<td bgcolor="FFFAD7">
<div style="width:500px;height:200px;overflow:auto;border:3px dotted FFFAD7;">
<font style="color:#FFD26B;">
コメント
</font>
</div>
</td>
</tr>
</table>
<img src="画像ＵＲＬ" align="left"><CENTER>
Design by <a href="http://plaza.rakuten.co.jp/princesssora/">ＢＬＵＥ＠princess*sora</a>
画像
Design by BLUE@PRINCESS*SORA
このように黒いのもカッコイイかも☆彡
Design by
ココから
<CENTER><table cellpadding="3" width="460" height="350" style="border:3px double #000000;background-image:url( 画像URL
);background-repeat:no-repeat;background-position:"><tr><td bordercolor="#000000"><CENTER><div style="width:440px;height:20em;overflow:auto;border:1px solid #ffffff;" style="scrollbar-face-color:#000000;
scrollbar-highlight-color:#000000; scrollbar-track-color:#000000;
scrollbar-shadow-color:#000000; scrollbar-3dlight-color:#000000;
scrollbar-arrow-color:#000000; scrollbar-darkshadow-color:#000000;"><font style="color:#FFFFFF;">
コメント
</font></div></font></CENTER></td></tr></table></CENTER>
<DIV style="clear: both;" align="right">
<font face="Dotum"><font size=1>design <A HREF="http://plaza.rakuten.co.jp/princesssora/" TARGET="_BLANK">BLUE@princess*sora</A></font></font></DIV>
ココまでコピペ
ココから
<CENTER><table cellpadding="3" width="400" height="450" style="border:1px solid #ffffff;background-image:url( 画像URL );background-repeat:no-repeat;background-position:"><tr><td bordercolor="#ffffff"><CENTER><div style="width:400px;height:30em;overflow:auto;border:1px solid #ffffff;" style="scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#ffffff; scrollbar-track-color:#ffffff;
scrollbar-shadow-color:#ffffff; scrollbar-3dlight-color:#ffffff;
scrollbar-arrow-color:#ffffff; scrollbar-darkshadow-color:#ffffff;">
ココにコメント
</div></font></CENTER></td></tr></table></CENTER>
<DIV style="clear: both;" align="right"><font face="Dotum"><font size=1>design <A HREF="http://plaza.rakuten.co.jp/princesssora/" TARGET="_BLANK">BLUE@princess*sora</A></font></font></DIV>
ココまでをコピペ
【保存方法】
１．欲しい画像の上にマウスカーソルを移動させ、右クリックします。
２．名前を付けて画像を保存をクリックします。
３．お好きな名前を付けて保存して下さい。
design BLUE@princess*sora
ジャンル別一覧
人気のクチコミテーマ
-
-
- ブロックチェーン
- 先端技術情報20260819
- (2026-08-20 17:08:36)
-
-
-
- ブログ更新しました♪
- １０月１０日 記事更新致しました。
- (2026-10-10 19:50:04)
-
-
-
- アイフォン・アイポッドの必需品
- スティーブ・ジョブズの死に際に発し…
- (2025-07-14 03:41:24)
-
© Rakuten Group, Inc.
