けいよい日記

うき文字・ぼかしぼかして幾星霜…

ここは、京都の西の端……

その昔、金さんだったりＨＯＴＥＬの支配人だったり、天才のたけし君と元気を出したりしていた……

とある芸能人のお宅……

話には聞いてたけれど。

本当に……。
本当に……。

ΣΣ(((ﾟ｀Д´ﾟﾉ)))ﾉ…庭にカジキのオブジェが…！

いた…！！(ﾉlll゜ロ゜)ﾉ ォォォォォ……！！

というわけで、うき文字・ぼかし編でございます。

||<#FFFFFF'style='text-align:center;font-size:20pt;font-weight:bold;width:560px;color:#ff0000;filter:progid:DXImageTransform.Microsoft.alpha(style=1,opacity=20,finishopacity=100);' ``ΣΣ(((ﾟ｀Д´ﾟﾉ)))ﾉ……庭にカジキのオブジェが……！||

||<#FFFFFF'style='text-align:center;font-size:20pt;font-weight:bold;width:560px;color:#ff0000;filter:progid:DXImageTransform.Microsoft.alpha(style=1,opacity=100,finishopacity=0);' ``いた……！！(ﾉlll゜ロ゜)ﾉ ォォォォォォ……！！||

ぼかしタグ【filter:progid:DXImageTransform.Microsoft.alpha(style=数,opacity=数,finishopacity=数)】

style=1 or 2 or 3
style=1 　 線形にぼかす
style=2　　円形にぼかす
style=3　　対角線上にぼかす

opacity=0〜100
ぼかし開始部分の透明度を指定　０（透明）〜１００（不透明）

finishopacity=0〜100
ぼかし終了部分の透明度を指定　０（透明）〜１００（不透明）

よって。

左側を透明にしたいときは、opacityを０に近く、finishopacityを１００に。
左側を透明にしたいときは、opacityを１００、finishopacityを０に近く。

style＝１（線形）でね。

style=2,3については、文字じゃわかりにくいから画像で。

これ、このfilterって奴らは基本、画像にも使えます。
文字を書き入れる部分を、いつもの画像のように[[attached(略)]]にすればよいのです。

すると、ほら……。

「僕とカジキの思い出」　一年二組　山田太郎………みたいな。

style=2 （円形にぼかす）

||<#FFFFFF'style='filter:progid:DXImageTransform.Microsoft.alpha(style=2,opacity=100,finishopacity=0);' ``[[attached(数値)]]||

画像の時はもちろん、フォント関係のタグは必要ないですから、取っ払いましたよ。

style=3 （対角線上にぼかす）

||<#FFFFFF'style='filter:progid:DXImageTransform.Microsoft.alpha(style=3,opacity=100,finishopacity=0);' ``[[attached(数値)]]||

円形・対角線上のぼかしは、opacityは中心部分、finishopacityは外側部分になるようですねぇ。

というわけで、じゃぁ逆を。

だから何、的。

うき文字・ウェ〜ブ、薬用石鹸ウェ〜ブ。

いや、ホントは「薬用石鹸ミューズ」だってのは、わかってるんですがね。

なんか、頭の中でああなっちゃってるんですよね。

そして、修正するのがめんどくさいので、このままで行こうと思います。

さて、ウェ〜ブ文字ですよ。

イエーーーイ！！ティン公！！

||<#ffffff' style='filter:wave(add=0,freq=3,lightstrength=0,phase=20,strength=5);font-size:30pt;COLOR:deeppink' ``イエーーーイ！！ティン公！！||

ウェーブ文字タグ【filter:wave(add=0,freq=3,lightstrength=0,phase=20,strength=5)】

（add=0,freq=3,lightstrength=0,phase=20,strength=5)
これらの数値を変えて、自由自在にウェーブを操るのじゃ〜ひーっひっひっひっひっひ、いーーっひっひ

【add=0（false）,1（true）】
波効果を与えた要素の上に、元の要素を重ねるかどうかを指定。

add=1の場合。

イエーーーイ！！ティン公！！

add=0の場合。

イエーーーイ！！ティン公！！

……？
背景の色が絡んでくるかどうかって事…？
add=1,背景色＝黒

イエーーーイ！！ティン公！！

え。
ウェーブしてる文字に、ウェーブしてない文字を重ねるって事？？？
…なんで？

【freq=数値】
波の数を指定。

freq=3の場合。

イエーーーイ！！ティン公！！

freq=7の場合。

イエーーーイ！！ティン公！！

freq=20の場合。

イエーーーイ！！ティン公！！

おお、20になると別物ですなぁ。

【lightstrength=0〜100】
光の強さを指定。

lightstrength=0の場合。

イエーーーイ！！ティン公！！

lightstrength=50の場合。

イエーーーイ！！ティン公！！

lightstrength=100の場合。

イエーーーイ！！ティン公！！

まぁ、0でええわ。

【phase=0〜360】
波の開始位置を指定。

phase=0の場合。

イエーーーイ！！ティン公！！

phase=100の場合。

イエーーーイ！！ティン公！！

phase=200の場合。

イエーーーイ！！ティン公！！

phase=360の場合。

イエーーイ！！ティン公！！

違いが…わからん…！
どういう意味？

【strength=数値】
波の強さを指定。

strength=5の場合。

イエーーーイ！！ティン公！！

strength=20の場合。

イエーーーイ！！ティン公！！

strength=50の場合。

イエーーーイ！！ティン公！！

わーい、ウルトラマン、ウルトラマーン。

というわけで。
私にもまだ、乙女の恥じらいというものがあるわけで…。

ウェーブ文字は、これくらいがちょうどいいかしらね

||<#ffffff' style='filter:wave(add=0,freq=4,lightstrength=5,phase=7,strength=4);font-size:18pt;COLOR:black' ``ウェーブ文字は、これくらいがちょうどいいかしらね||

うき文字・モザイク文字で、もやっともやっと。

何と読むでしょう。

うき文字で遊ぶべし。

お遊びタグは、ほんとにいろいろありましてね。

まぁ例は先日、お示ししたとおりです。

あれらは

【filter:progid:DX ImageTransform.Microsoft.】

の、お仲間なんですねぇ。

この……フィルタータグ、とでも申しましょうか、これの指定要素として、モザイクやウェーブや影文字や縞文字や……ややややや。

そういうものがあるらしいですよ。

で。

モザイク文字の場合は、

【filter:progid:DXImageTransform.Microsoft.】につづいて【Pixelate(maxsquare=3)】を……って、ややこしい。

あぁいやだ。

とにかく、モザイクの時は。

【filter:progid:DXImageTransform.Microsoft.Pixelate(maxsquare=3)】

これを使うのです。

で。

maxsquare=3　←ここの数値を変えると、モザイクの度合いが変えられるのです。

ここが肝心。

maxsquare=100の場合。

いや〜〜んうっふ〜〜んあっは〜んろびんさぁ〜ん

maxsquare=50の場合。

いや〜〜んうっふ〜〜んあっは〜んろびんさぁ〜ん

maxsquare=25の場合。

いや〜〜んうっふ〜〜んあっは〜んろびんさぁ〜ん

maxsquare=12の場合。

いや〜〜んうっふ〜〜んあっは〜んろびんさぁ〜ん

maxsquare=6の場合。

いや〜〜んうっふ〜〜んあっは〜んろびんさぁ〜ん

maxsquare=3の場合。

いや〜〜んうっふ〜〜んあっは〜んろびんさぁ〜ん

maxsquare=2の場合。

いや〜〜んうっふ〜〜んあっは〜んろびんさぁ〜ん

maxsquare=1の場合。

いや〜〜んうっふ〜〜んあっは〜んろびんさぁ〜ん

maxsquare=0の場合。

いや〜〜んうっふ〜〜んあっは〜んろびんさぁ〜ん

あれっ。

１と０じゃ、消えちゃうの？？　なんで？　ま、いいか。

まぁ３〜５が使いどころなのかしらねぇ。

||<#FFE4E1' style='width:560;height:30;font-size:16px;font-weight:bold;text-align:center;color:deeppink;filter:progid:DXImageTransform.Microsoft.Pixelate(maxsquare=3)' ``いや〜〜んうっふ〜〜んあっは〜んろびんさぁ〜ん||

うき文字・行の高さと文字間隔調整なんだけどね。

こういうの、見かけませんか。

那央さん、wikiってね、基本的にMacだと崩れがちらしいよ。哀しいね。Mac。

これは、フォントの大きさに対して、行の高さが追いついてないんですねぇ、悲しいですねぇ。

こういうときは、これを使いましょう。

【line-height】　行の高さタグ

：指定要素　数値にｐｘ 変えたくないときは、normal。　というか、このタグそのものが必要なし。

これを使うと、上のようなことにはなりますまい。

　良い例。

那央さん、wikiは基本的にMacだと崩れがちらしいよ。哀しいね。Mac。

||<#ffff66'style='font-size:16pt;line-height:30px'``那央さん、wikiは基本的にMacだと崩れがちらしいよ。哀しいね。Mac。||

　悪い例。

那央さん、wikiってね、基本的にMacだと崩れがちらしいよ。哀しいね。Mac。

||<#ffff66'style='font-size:16pt;line-height:10px'``那央さん、wikiってね、基本的にMacだと崩れがちらしいよ。哀しいね。Mac。||

　普通の例。

那央さん、wikiってね、基本的にMacだと崩れがちらしいよ。哀しいね。Mac。

||<#ffff66'style='font-size:16pt;line-height:16px'``那央さん、wikiってね、基本的にMacだと崩れがちらしいよ。哀しいね。Mac。||

しゃらららんら♪

次に。

文字一個一個の間隔を変える方法。

【letter-spacing】　文字間隔タグ

：指定要素　数値にｐｘ 変えたくないときはnormalまたは、0px。というかこのタグそのものが必要なし。　

那央さん、Macだと崩れがちらしいよ。哀しいね。Mac。

||<#ffff66'style='font-size:16px;letter-spacing:normal;line-height:30px'``那央さん、Macだと崩れがちらしいよ。哀しいね。Mac。||

那央さん、Macだと崩れがちらしいよ。哀しいね。Mac。

||<#ffff66'style='font-size:16px;letter-spacing:10px;line-height:30px'``那央さん、Macだと崩れがちらしいよ。哀しいね。Mac。||

20pxの場合。

那央さん、Macだと崩れがちらしいよ。哀しいね。Mac。

30pxの場合。

那央さん、Macだと崩れがちらしいよ。哀しいね。Mac。

50pxの場合。

那央さん、Macだと崩れがちらしいよ。哀しいね。Mac。

100pxの……まぁ、もういいか。

……マイナスにしたらどうなるんだろうね。

−10pxの場合。

那央さん、Macだと崩れがちらしいよ。哀しいね。Mac。

きゃーーっ。きゃーーーっ。

あ、最後になりましたが。

「哀しいね。Mac。」のところは、「おかしいね♪さっちゃん♪」のメロディーでお願いします。

うき文字・好きなところで改行しようじゃないか。（メンテ以降変わりましたよ）

その前に。

前回の記事で。

【text-align】
【font-size】
【font-weight】

などのことを、「要素」と表現したが。

こういうやつのことを、「タグ」というらしい。

タグ。

タグ。
タグ、タグ、タグ。

わー、それっぽーい。　それっぽいねー。

これから先は、このタグの種類がどんどん増えるわけ。
そしてそれを、セミコロン；で、つなげればいいのだ。

では、改行の仕方。

このタグを使いましょう。

【word-spacing】

：指定要素
550px　など、数値にｐｘ。

例）word-spacing:550px

記事幅のマックスは560pxから、550pxにメンテ後変更。
ただし、550pxだと、アバター等が下にずれて表示されます。
なので、いろいろやってみた結果、530pxくらいが丁度良いようです。

文章を書いて、任意の場所に全角スペースを入れると改行できます。

これも半角スペースから全角スペースに変更。　英文でも使えるってことですね。

ペコさん、改行だぁよ。よよよよよよよよ。よよよよよよよよよ。

||<#FFCCCC'style='text-align:center;word-spacing:530px'``ペコさん、改行だぁよ。よよよよよよよよ。よよよよよよよよよ。||

全角スペースを入れると。

ペコさん、改行だぁよ。　よよよよよよよよ。　よよよよよよよよよ。

||<#ffffff'style='text-align:center;word-spacing:530px'``ペコさん、改行だぁよ。　よよよよよよよよ。　よよよよよよよよよ。||

ペ　コさん、改行だぁ　よ。よよよよよ　よよよ。よよよよよよ　よよよ。

||<#FFCCCC'style='text-align:center;word-spacing:530px'``ペ　コさん、改行だぁ　よ。よよよよよ　よよよ。よよよよよよ　よよよ。||

全角スペースの場所によって、改行される場所を任意に変えられます。

もちろん、各行をセンタリングすれば同じようにはなりますが。

ペコさん、改行だぁよ。

よよよよよよよよ。

よよよよよよよよよ。

||<#ffffff'style='text-align:center;width:530px'``ペコさん、改行だぁよ。||
||<#ffffff'style='text-align:center;width:530px'``よよよよよよよよ。||
||<#ffffff'style='text-align:center;width:530px'``よよよよよよよよよ。||

これだと、wikiの文章分だかなんだか知りませんが、行間がえらい空いてしまうのだよ。

行間を詰めたいときは、【word-spacing:530px】がよい。
まぁ、めんどくさくないし、こっちの方が。

その他。

背景の幅も指定したいときは、さぁ幅指定タグ【width】を使いましょう。

ペコさん、改行だぁよ。　よよよよよよよよ。　よよよよよよよよよ。

||<#FFCCCC'style='text-align:center;word-spacing:250px;width:250px'``ペコさん、改行だぁよ　よよよよよよよよ。　よよよよよよよよよ。||

この際、【word-spacing】と【width】の数値を揃えること。
でないと、幅が揃わないので……どうなるんだろう、やってみよう。

ペコさん、改行だぁよ。　よよよよよよよよ。　よよよよよよよよよ。

||<#FFCCCC'style='text-align:center;word-spacing:430px;width:530px'``ペコさん、改行だぁよ。　よよよよよよよよ。　よよよよよよよよよ。||

あぁ…なんてこと。
きぃつけよ…。

独り言。

要するに【word-spacing】ってタグは、改行タグというよりは、単語と単語の間隔を指定するタグなわけね。
全角スペースを入れることによって、430pxなら430pxの間隔が空くわけよ。
それと【text-align】を上手く使って、改行タグにしてるわけよね。
だから、あの変になったやつは、単語と単語の間隔が430pxで、センタリングが相まって、あんなことになったわけよね。

そんでもって、やっぱり【text-align】でセンタリングとかを効かそうと思ったら、【width】で幅指定しないとだめなのよね。

あぁ、ちょっとややこしいなぁ、これ。

変になったやつの真ん中の行は、250pxの間隔も含めた状態でセンタリングしてあるから、ああなっちゃってるのか。ふむ。

だからやっぱり、【width】の数値より【word-spacing】の数値が大きければ、特に問題ない。
【width】の幅で文字列がセンタリングされるだけ、と。