タグ(日記を枠で飾る)
日記を飾ってみると、楽しいです。日記を枠つきにする練習をしてみました。
日記とは書いていますが、日記に限らず、他のページでも使えます。
ちなみに、＜＞は半角に替えてください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＞
＜CENTER style="width:650;height:100;border-style:solid;border-color:#000000;border-width:2px;background-color:#ff9999;"＞ここに文字＜/CENTER＞
＜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.
