きなこの　愉快な　楽天日記枠＆miniﾀｸﾞ講座

■文字の表示　　

★文字の色々な表示の仕方

そのままコピーペーストして使ってください。
☆ラインはこちらからどうぞ☆

☆文字のサイズ

< font size="数字" > 　ここに文字　 < /font >

数字の部分には1～7までの数字を入れてね。
数字が大きくなれば文字も大きくなります。

ここに文字
ここに文字
ここに文字
ここに文字
ここに文字
ここに文字
ここに文字

文字の大きさで、＜px＞という表示があります。
これは、 < font size="1" > が＜5px＞ぐらいだと思ってください。

☆文字を太字にしてみましょう

< b > 　ここに文字　< /b >

ここに文字

☆文字を斜体にしてみましょう

< i > 　ここに文字　< /i >

ここに文字

☆文字にアンダーラインを引いてみましょう

< u > 　ここに文字　< /u >

ここに文字

☆文字に取り消し線を入れてみましょう

< s > 　ここに文字　< /s >

~~ここに文字~~

☆文字に色をつけてみましょう

< font color="色番号" > 　ここに文字　< /font >

(色の部分を　 red 　にするとこうなります。)
ここに文字

カラーサンプルサイト１

カラーサンプルサイト２

カラーコードを使う時は　#　からコピーして使ってくださいね。

☆文字を左に揃えてみましょう

< DIV align=left > 　ここに文字　 < /DIV >
< P align=left > 文字 < /P > でもよい。

ここに文字

☆文字を真ん中に揃えてみましょう

< DIV align=center > 　ここに文字　< /DIV >
< center > 文字 < /center > でもよい。

ここに文字

☆文字を右に揃えてみましょう

< DIV align=right > 　ここに文字　 < /DIV >

< P align=right > 文字 < /P > でもよい。

ここに文字

☆文字を上付きにしてみましょう

< sup > 上に上げたい文字 < /sup >
このタグは ^{上に上げたい文字} を表示しています。

☆文字を下付きにしてみましょう

< sub > 下に下げたい文字 < /sub >
このタグは _{下に下げたい文字} を表示しています。

★記号なんかを組み合わせると意外に可愛いラインができるかも。

↓は上にしたいタグと、下にしたいタグを組み合わせています。

☆☆：＊： ^{☆☆：＊：} ☆☆：＊： _{☆☆：＊：} ☆☆：＊： ^{☆☆：＊：} ☆☆：＊： _{☆☆：＊：} ☆☆：＊：

記号なんかは最高の使い道・・・？
でも、使うのかな・・？

H ² CO ² H ₂ CO ₂

★上に上げた文字（記号数字）と、
下に下げた文字（記号数字）等は
自動的に小さくなります。

☆文字を縦書きにしてみましょう

< span style="writing-mode:tb-rl;height: 表示する文字の高さ " > ここに文字 < /span >
ここに文字

★ 文字を表示する高さを書き込んでくださいね。
見本は、文字数を＜４＞・色を＜red＞・＜Ｂ＞太字にして
高さは１５０にしています。
文字のフォントも変えるといいですね。

●これも、使い道あるのかなぁ？

☆文字に振り仮名をつけてみましょう

< ruby > 薔薇 < rp > ( < /rp > < rt > ばら < /rt > < rp > ) < /rp > < /ruby >

薔薇 ( ばら )

見本は、文字の大きさを＜４＞・色を赤・太字＜Ｂ＞に設定しています。

< font style="color:red;size:4;" > < B > < ruby > 薔薇 < rp > ( < /rp > < rt > ばら < /rt > < rp > ) < /rp > < /ruby > < /font > < /B >

☆文字背景に色や画像・説明文を

●文字の背景に色をつけましょう

< span style="background-color:red; font-size:数字 px ;font-color:お好きな色;"" >
< font face="HGP創英角ﾎﾟｯﾌﾟ体" >
ここに文字 < /font > < /span >

Kinako

見本は、バックに＜red＞・サイズを３０px・文字色を白
字体を＜font face="HGP創英角ﾎﾟｯﾌﾟ体＞にしています。
サイズはpxで設定してくださいね。
文字の大きさ・１は５pxくらいです。

書いた文字の大きさに合わせて、バックに色がつきますよ。

< span style="background-color:red;font-size:30 px ;color:#ffffff;" >
< font face="HGP創英角ﾎﾟｯﾌﾟ体" > グルメの館 < /font > < /span >

:--☆--:・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:--:・:☆

●文字の背景に画像をつけましょう

<table border=0><TR><TD background="http://画像ｱﾄﾞﾚｽ" style="font-size:30px;color:#ffffff;font-family:HGP創英角ﾎﾟｯﾌﾟ体;">Kinako倶楽部</TD></TR></table>

Kinako倶楽部

背景に画像を使う時は、文字が見にくくならないように
画像を選んでくださいね。
見本には壁紙画像をいれています。
ちなみにアイコン画像だと、↓のようになります。
文字を書き入れた分だけアイコンが繰り返し表示されます。

Kinako倶楽部

詳細は、●文字の背景に色をつけましょう。　と同じです。
☆ 赤字で書かれている＜px＞は必ずつけてくださいね～☆

:--☆--:・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:--:・

●文字に説明文をつけましょう

< span title="説明文を書く" >
ここに文字 < /span >

Kinako

カーソルを文字の上に当てると暫くすると説明が出てきます。
（爆）こんなもん、使わないよね。
説明書き書いたほうが早いかも。
文字の大きさや、文字色は、お好きなものを書き込んでくださいね。

☆文字の配置を自由に書こう

< pre > < font style="color:好きな文字色; font-size:数字px;" > 文字 < /font > < /pre >

  この文章は
改行タグ < 
BR > 
無しで書いています。

このように自分の書きたいように

＜Enter＞キーで下げるだけで

行間も思い通りになります。

これって、ホンマに便利！！

見本は色を＜#750000"＞・文字サイズ１５pxで、書いています。
書体は好きなものを設定してくださいね。

☆＜BR＞で指定した所の行間をあけてみよう

< span style="line-height:数字" >
ここに文字 < /span >

色々書いてきていますが皆さん理解して頂けていますか？自分がこれは!!と言うタグを見つけてくださいね。

上の文章は、＜BR＞改行タグも何も使わずにそのまま文字を書いています。
これを上記のタグと＜BR＞タグを使う事によって
行間を思い通りにあけることが出来ます。

例題

色々書いてきていますが
皆さん理解して頂けていますか？
自分がこれだ!!
というタグを見つけてくださいね。

< span style="line-height:2" >
色々書いてきていますが
皆さん理解して頂けていますか < BR >
自分がこれだ!! < BR >
というタグを見つけてくださいね。 < /span >

＜BR＞タグを打ち込んだ箇所の段落が、指定したサイズだけ開きます。
見本は＜line-height＞２です。
大きな文字で行間を沢山開けている日記を見かけますね。
このタグを使うと簡単に行間を開けることが、出来ますね（笑）

数値が大きいと行間は沢山あきます。
ちなみに、＜数値＞が１だと、＜BR＞を使ったのと同じ事で、行間は開きません。

ご自分で、一度試してくださいね。

☆文字の幅を開けてみましょう

< span style="letter-spacing: 数字pt" >
ここに文字 < /span >

ここに文字

小文字できっちり詰まってるペ－ジって見にくいですね。
文字間をあけて見やすくするタグです。

見本は、文字幅２０PX にしています。

☆文字を左右に反転させて見ましょう。

< div style="filter:fliph;width:200px;height:20px;" > Kinako < /div >

Kinako

詳細は下の＜上下反転＞で書いています。

☆文字をひっくり返してみましょう。
（上下反転）

< div style="filter:flipv;width:200px;height:20px;" >
グルメの館 < /div >

Kinako

*＜width:100px と height:20px;＞は文字の大きさではありません。
文字を書き込む横幅と、縦幅です。
長く文章を書きたい場合は　200pxじゃ少ないかも知れません。

　　height が大きすぎると、
上のほうにおかしな空間ができてしまいます。

使ってみて、自分で調整してくださいね。

でも、こんなもの、使うのかな？

見本は、文字サイズ＜５＞です。