タグ(日記を枠で飾る)


　日記を飾ってみると、楽しいです。日記を枠つきにする練習をしてみました。
日記とは書いていますが、日記に限らず、他のページでも使えます。
ちなみに、＜＞は半角に替えてくださいm(__)m

日記に枠をつけて書く基本は
＜center style="background-image:url(http://plaza.rakuten.co.jp/img/user/.jpg);"＞
だけです。　後のものは自由に追加してみて下さい(^_^)v
他に追加(修飾)できるものはいろいろなものがあります。
とりあえず思いつく限りで、つけられるものを全部つけてみました(笑)
ただし、画像は入れてありませんm(__)m
ここに日記内容

そのタグはこれです。
＜center style="background-image:url(http://plaza.rakuten.co.jp/img/user/.jpg);width:75%;border-style:solid;border-width:5px;border-color:blue;padding:10px;letter-spacing:1px;font-size:11pt;color:black;font-family:Trebuchet MS; text-align:right;"＞ここに日記内容＜/center＞

　それぞれの説明です。
○background-image:url(http://plaza.rakuten.co.jp/img/user/.gif又は.jpg)
　　ここで壁紙の指定をします。指定なしでも、出来ます。
○width:　　%;　外枠の横幅です。横の大きさを指定します。
○border-style:solid;　　外枠のスタイルです。枠の種類はいろいろあります。
○border-width:5px;　　外枠の太さです。変えると雰囲気もずいぶん変わります。
○border-color:blue;　　外枠の色です。もちろん＃で指定することも出来ます。
○padding:10px;　文字の上下左右と外枠との間隔をの定です。(余白と思うと分かりやすいかしら)大体10pxで３mmくらいの空きができるようです。
○letter-spacing:1px;　　一行ずつの文字の間の余白です。
○font-size:11pt;　　文字の大きさです。
○color:black;　　文字の色です。これも、＃でも指定出来ます。
○font-family:Trebuchet MS;　　文字のフォント、書体といった方がいいのかしら？（明朝体とか)です。
○text-align:right;　　属性として、文字の位置を指定します。

以上のスタイルを＜center＞に一気に指定できます。

【参考】
　文字の位置について　　align="left" 左揃え　　align="right" 右揃え
align="center" 中央揃え align="justy" 両端揃え

　枠のスタイルについて　double　　　groove　　dashed　　inset　　outset　　　solid　　　dotted　　　ridge
　　　　　　　　　　　　　(二重線)　（くぼみ枠）（破線枠） （IN枠)　（OUT枠）　(一重線)　　(点線)　　(盛り上がり)

「padding」について
　「padding」とは、文字と枠との間の上下左右の余白をあらわします。
　　padding指定ナシ　　　padding指定はしていません。余白なして枠のすぐ横から文字が出ます
paddingを8pxで指定 　paddingを8pxで指定しています。四方向に余白が出来ます
　見た目的に文字と枠との間に上下左右の余白ができたほうが、見やすくなります。
「padding」を指定することで見た目がゆったりとしますから、楽天に日記では指定した方がきれいに思えます。
　ちなみに、「padding」は上下左右全ての余白が指定されます。手軽ですが、一辺だけの余白の指定もできます。
　　　□上余白…　padding-top:4px;
　　　□下余白…　padding-bottom:4px;
　　　□左余白…　padding-left:4px;
　　　□右余白…　padding-right:4px;
状況においては使えると良いかも(テーブルとか、画像の指定などの時には応用が利くと思います）

　参考までに、こんな形も出来ます。（スクロール枠を入れます）

お願い
日記形

そのタグです。
ちなみにスクロール枠よりも画像とか文字数が少ないと、スクロールできるように枠があらわされませんので、念のため。
今回は背景画像を指定してありませんが、指定すると背景も入ります(^_^)v
＜center style="overflow-y:scroll;width:600px;height:600px;color:gainsboro;background-image:url(http://plaza.rakuten.co.jp/img/user/80/63/1458063/6.jpg背景画像);border-top:10px groove gainsboro;border-right:10px ridge gainsboro;border-bottom:10px ridge gainsboro;border-left:10px groove gainsboro;padding:10"＞
＜IMG SRC="http://plaza.rakuten.co.jp/img/user/80/63/1458063/31.jpg" width="326" height="376" alt="お願い"（中に入れる画像)＞
日記形
＜/center＞＜/font＞＜/b＞

　枠のための色見本です。#で指定しても良いですし、色の名前をいれても良いです。【順に、色の名前をその色で、#での指定、色の名前　です。】
black #000000 black 　　　　　　　　 mediumorchid #BA55D3 mediumorchid
navy #000080 navy 　　　　　　　　　 rosybrown #BC8F8F rosybrown
darkblue #00008B darkblue 　　　　　 darkkhaki #BDB76B darkkhaki
mediumblue #0000CD mediumblue 　　　 silver #C0C0C0 silver
blue #0000FF blue 　　　　　　　　　 mediumvioletred #C71585 mediumvioletred
darkgreen #006400 darkgreen 　　　　 indianred #CD5C5C indianred
green #008000 green 　　　　　　　　 peru #CD853F peru
teal #008080 teal 　　　　　　　　　 chocolate #D2691E chocolate
darkcyan #008B8B darkcyan 　　　　　 tan #D2B48C tan
deepskyblue #00BFFF deepskyblue 　　 lightgrey #D3D3D3 lightgrey
darkturquoise #00CED1 darkturquoise thistle #D8BFD8 thistle
mediumspringgreen #00FA9A mediumspringgreen 　　　　 orchid #DA70D6 orchid
lime #00FF00 lime 　　　　　　　　　 goldenrod #DAA520 goldenrod
springgreen #00FF7F springgreen 　　 palevioletred #DB7093 palevioletred
aqua #00FFFF aqua 　　　　　　　　　 crimson #DC143C crimson
cyan #00FFFF cyan 　　　　　　　　　 gainsboro #DCDCDC gainsboro
midnightblue #191970 midnightblue 　 plum #DDA0DD plum
dodgerblue #1E90FF dodgerblue 　　　 burlywood #DEB887 burlywood
lightseagreen #20B2AA lightseagreen lightcyan #E0FFFF lightcyan
forestgreen #228B22 forestgreen 　　　 lavender #E6E6FA lavender
seagreen #2E8B57 seagreen 　　　　　 darksalmon #E9967A darksalmon
darkslategray #2F4F4F darkslategray violet #EE82EE violet
limegreen #32CD32 limegreen 　　　　 palegoldenrod #EEE8AA palegoldenrod
mediumseagreen #3CB371 mediumseagreen 　 lightcoral #F08080 lightcoral
turquoise #40E0D0 turquoise 　　　　　 khaki #F0E68C khaki
royalblue #4169E1 royalblue 　　　　 aliceblue #F0F8FF aliceblue
steelblue #4682B4 steelblue 　　　　 honeydew #F0FFF0 honeydew
darkslateblue #483D8B darkslateblue azure #F0FFFF azure
mediumturquoise #48D1CC mediumturquoise sandybrown #F4A460 sandybrown
indigo #4B0082 indigo 　　　　　　　 wheat #F5DEB3 wheat
darkolivegreen #556B2F darkolivegreen 　 beige #F5F5DC beige
cadetblue #5F9EA0 cadetblue 　　　　 whitesmoke #F5F5F5 whitesmoke
cornflowerblue #6495ED cornflowerblue mintcream #F5FFFA mintcream
mediumaquamarine #66CDAA mediumaquamarine 　　　 ghostwhite #F8F8FF ghostwhite
dimgray #696969 dimgray 　　　　　　 salmon #FA8072 salmon
slateblue #6A5ACD slateblue 　　　　 antiquewhite #FAEBD7 antiquewhite
olivedrab #6B8E23 olivedrab 　　　　 linen #FAF0E6 linen
slategray #708090 slategray 　　　　 lightgoldenrodyellow #FAFAD2 lightgoldenrodyellow
lightslategray #778899 lightslategray oldlace #FDF5E6 oldlace
mediumslateblue #7B68EE mediumslateblue red #FF0000 red
lawngreen #7CFC00 lawngreen 　　　　 fuchsia #FF00FF fuchsia
chartreuse #7FFF00 chartreuse 　　　 magenta #FF00FF magenta
aquamarine #7FFFD4 aquamarine 　　　 deeppink #FF1493 deeppink
maroon #800000 maroon 　　　　　　　 orangered #FF4500 orangered
purple #800080 purple 　　　　　　　 tomato #FF6347 tomato
olive #808000 olive 　　　　　　　　 hotpink #FF69B4 hotpink
gray #808080 gray 　　　　　　　　　 coral #FF7F50 coral
skyblue #87CEEB skyblue 　　　　　　 darkorange #FF8C00 darkorange
lightskyblue #87CEFA lightskyblue 　　　 lightsalmon #FFA07A lightsalmon
blueviolet #8A2BE2 blueviolet 　　　 orange #FFB6C1 orange
darkred #8B0000 darkred 　　　　　　 lightpink #FFB6C1 lightpink
darkmagenta #8B008B darkmagenta 　　 pink #FFC0CB pink
saddlebrown #8B4513 saddlebrown 　　 gold #FFD700 gold
darkseagreen #8FBC8F darkseagreen 　 peachpuff #FFDAB9 peachpuff
lightgreen #90EE90 lightgreen 　　　 navajowhite #FFDEAD navajowhite
mediumpurple #9370DB mediumpurple 　　 moccasin #FFE4B5 moccasin
darkviolet #9400D3 darkviolet 　　　　 bisque #FFE4C4 bisque
palegreen #98FB98 palegreen 　　　　 mistyrose #FFE4E1 mistyrose
darkorchid #9932CC darkorchid 　　　 blanchedalmond #FFEBCD blanchedalmond 　
yellowgreen #9ACD32 yellowgreen 　　　 papayawhip #FFEFD5 papayawhip
sienna #A0522D sienna 　　　　　　　　 lavenderblush #FFF0F5 lavenderblush
brown #A52A2A brown 　　　　　　　　 seashell #FFF5EE seashell
darkgray #A9A9A9 darkgray 　　　　　　 cornsilk #FFF8DC cornsilk
lightblue #ADD8E6 lightblue 　　　　　 lemonchiffon #FFFACD lemonchiffon
greenyellow #ADFF2F greenyellow 　　　 floralwhite #FFFAF0 floralwhite
paleturquoise #AFEEEE paleturquoise snow #FFFAFA snow
lightsteelblue #B0C4DE lightsteelblue　 yellow #FFFF00 yellow
powderblue #B0E0E6 powderblue 　　　 lightyellow #FFFFE0 lightyellow
firebrick #B22222 firebrick 　　　　 ivory #FFFFF0 ivory
darkgoldenrod #B8860B darkgoldenrod white #FFFFFF white
日記に使いやすいように、背景をここまで白にしました。
いかがでしょうか。見えにくい色も背景次第では見えると思います。

　ここから先は実際に使っているものです。

１、私が今使っている日記の枠です。（枠のサイズは自分で指定できます)
　●二重線の枠で、画像を入れました。　
お願い
ここに、日記を書き込みます。

そのタグです。
＜CENTER style="WIDTH=60%; border-width : 3px;border-style : double; border-color : red; background-image: url"＞＜IMG SRC="http://plaza.rakuten.co.jp/img/user/80/63/1458063/31.jpg" width="326" height="376" alt="お願い"＞＜FONT color="black"＞
ここに、日記を書き込みます。

＜/FONT＞＜/CENTER＞

　●ドット（点々)で、背景を指定。画像の上に文字がかけます。

ここに、日記を書き込みます。

そのタグです。
＜CENTER style="WIDTH=70%; background-image: url(http://plaza.rakuten.co.jp/img/user/80/63/1458063/31.jpg); border-width : 5px;border-style : dotted; border-color : green;"＞＜FONT color="black"＞
ここに、日記を書き込みます。

＜/FONT＞＜/CENTER＞
　背景として画像を設定してあるので、サイズの設定が出来ず、文字の分しか高さが表示されません。ですから、これを使う時には、画像じゃなくって、絵柄とかでどこで切れてもいいものを指定した方が良いように思います。
文字が上に書けるから、画像でない方が良いということもありますけれど。(^_^)v

　●点線で、枠を作ります。上のドットと同じ形式のものですが、わざとアドレスを指定しないでおくと絵は出ずに背景はそのままになります。色の指定も変えてみました。

ここに、日記を書き込みます。

そのタグです。
＜CENTER style="WIDTH=80%; background: url(画像アドレス); border-width : 2px;border-style : dashed; border-color : #003399;"＞＜FONT color="#ff0066"＞
ここに、日記を書き込みます。

＜/FONT＞＜/CENTER＞

２、ここから下はまだ使い切れていないものです。
　●枠なしで背景の上に日記を書く（枠無しで画像に字がのっかります。）

ここに、日記を書き込みます。

そのタグです。
＜CENTER style="WIDTH=90%; background: url(http://plaza.rakuten.co.jp/img/user/80/63/1458063/31.jpg);background-repeat : no-repeat; background-attachment : fixed;background-position : 50% 50%;"＞＜FONT color="#003399"＞
ここに、日記を書き込みます。

＜/FONT＞＜/CENTER＞

　●右側に画像が載る枠です。


日記の内容を書く


そのタグです。
＜p style="border-color:#99CCFF; border-style:double; padding:20px; background-image: url(http://plaza.rakuten.co.jp/img/user/80/63/1458063/31.jpg); background-repeat:no-repeat; background-position:right bottom;"＞
日記の内容を書く
＜/p＞

３、背景色、枠の大きさを指定。枠の形も変えます。文字の色も指定できます。
文字色を指定しなければ黒になります。枠の部分の幅、高さ、実線の色、背景色、文字は適当に変えて下さい。
ここに文字（これは枠線指定なし)

＜CENTER style="width:650;height:200;background-color:#00ffcc;"＞＜FONT color="red"＞ここに文字＜/FONT＞＜/CENTER＞

ここに文字(これは枠線指定はsolid)

＜CENTER style="width:650;height:100;border-style:solid;border-color:#000000;border-width:2px;background-color:#ff9999;"＞ここに文字＜/CENTER＞

ここに文字（枠線をdotted)

＜CENTER style="width:650;height:100;border-style:dotted;border-color:#ff0066;border-width:2px;background-color:#ff9999;"＞ここに文字
＜/CENTER＞
border-width:○px数字を大きくすると点が大きくなって、面白いです。

ここに文字(枠を盛り上げてみました)

＜CENTER style="width:650;height:100;border-style:ridge;border-color:#ff0066;border-width:20px;"＞ここに文字(枠を盛り上げてみました)＜/CENTER＞
style:ridge　リッヂと言うのは盛り上がりの事です。20pxにしてありますが、枠の太さpxは省いても良いし、大きくしても面白いです。

上のものに背景色をつけ文字の色や大きさも指定しました。こういうようにいろいろ加えることも出来ます。枠を４０pxにしたら、･･･すごいですね(笑)
ここに文字

FONT color="#0033ff" size="7"　の"は無くても大丈夫です。
＜CENTER style="width:650;height:100;border-style:ridge;border-color:#ff0066;border-width:40px;background-color:#ffcccc;"＞＜FONT color="#0033ff" size="7"＞ここに文字＜/FONT＞＜/CENTER＞
その他にも;border-style:の後に入れられる、表示は次のようなものがあります。
double　　　groove　　dashed　　inset　　outset　　　solid　　　dotted
(二重線)　くぼみ枠）（破線枠）　（IN枠)　（OUT枠）　(一重線)　　　(点線)
いろいろ替えてみるのも楽しいですね。

　後は、文字の位置ですね。

groove


このタグです。
＜P style="width: 600; height: 200; border-style: groove; border-color: #ffb9b9; background-color: #ffb9b9;" align="right" ＞groove＜/P＞
属性としての設定をすると文字の位置が変わります。何も書かなければ左揃えになっています。　
align="left" 左揃え
align="right" 右揃え
align="center" 中央揃え
align="justy" 両端揃え

４、四方をそれぞれ指定した枠（枠のサイズ指定なし）


やほ！


これは一つ一つの枠線を指定して作ってあります。各々の色を変えてみました。
四方に空きが入っています。文字が少なくて分かりにくいですが･･･下がそのタグです。
＜P style="background-repeat : repeat;background-attachment : scroll;border-top-width : 3px;border-right-width : 3px;border-bottom-width : 3px;border-left-width : 3px;border-style : ridge ridge ridge ridge;border-color : aqua red black orange;padding-top : 10px;padding-left : 10px;padding-right : 10px;padding-bottom : 10px;" align="left"＞
やほ！

＜/P style＞


© Rakuten Group, Inc.
Create a Mobile Website
スマートフォン版を閲覧 | PC版を閲覧
    Share by: