*（＾◇＾）* お〜いっ『山の神〜海の神〜福の神さん』やぁ〜 *

経済の霧も猫の足取りでやってくる、そして、鳥のはばたきを待つ。

ブログパーツ転載・説明評価

[ リスト | 詳細 ]

記事検索
検索

全5ページ

[1] [2] [3] [4] [5]

[ 前のページ | 次のページ ]

『マウスがディズニィー・アニメに変わる？』　�い劉�Ex９

★☆　left, center, right 等々の切り替えも追加しておきました。

　『マウスがディズニィー・アニメに変わる？』　�い劉�Ex９


⇒　続きです。
�Ｉ�寄せはレフト、倍角のスペースを文字間に入れると改行します。そして、アニメカーソルの変わる制御文が加わっています


||||<#'Style='Font:bold 22pt"HGS行書体";Color:#FFFFFF;Background:url(http://uk.bloggif.com/img/glitter/434.gif);[http://];Border:groove 5px #FFBF00;Width:535px;text-align:left;word-spacing:510px;cursor:url(http://media.superpimper.com/cursors/Disney/disney-3.cur)'``[[item(1,1)]]*(^◆^)*　できない約束はしないことだな||


||||<#'Style='Font:bold 20pt"魚石行書";Color:#FFFFFF;Background:url(http://img2.blogs.yahoo.co.jp/ybi/1/88/7e/masanari_5935d/folder/1149845/img_1149845_30586726_14?1258633983.gif);[http://];Border:dashed 3px #FF8000;Width:535px;text-align:left;word-spacing:510px;cursor:url(http://media.superpimper.com/cursors/Disney/disney-3.cur)'``[[item(1,1)]]*(^◆^)*　考えてばかりいると日がくれちゃうよ||

↓↓↓

*(^◆^)*　できない約束はしないことだな


*(^◆^)*　考えてばかりいると日がくれちゃうよ



�ど�寄せはライト、倍角のスペースを文字間に入れると改行します。そして、アニメカーソルの変わる制御文が加わっています

||||<#'Style='Font:bold 22pt"HGS行書体";Color:#FFFFFF;Background:url(http://uk.bloggif.com/img/glitter/434.gif);[http://];Border:groove 5px #FFBF00;Width:535px;text-align:right;word-spacing:510px;cursor:url(http://media.superpimper.com/cursors/Disney/disney-3.cur)'``[[item(1,1)]]*(^◆^)*　できない約束はしないことだな||


||||<#'Style='Font:bold 20pt"魚石行書";Color:#FFFFFF;Background:url(http://img2.blogs.yahoo.co.jp/ybi/1/88/7e/masanari_5935d/folder/1149845/img_1149845_30586726_14?1258633983.gif);[http://];Border:dashed 3px #FF8000;Width:535px;text-align:right;word-spacing:510px;cursor:url(http://media.superpimper.com/cursors/Disney/disney-3.cur)'``[[item(1,1)]]*(^◆^)*　考えてばかりいると日がくれちゃうよ||

↓↓↓

*(^◆^)*　できない約束はしないことだな


*(^◆^)*　考えてばかりいると日がくれちゃうよ


以前、ユーチューブの画面を動く背景にした方式を取り上げて紹介しましたが、同様の考え方です。
背景はサイズを設定しGIF系による画面を設定している内容状態であり、ほぼ同様です。
そこに文字のみを書き、そこに改行を可能にし、マウスをアニメカーソルに変化させる制御文を付加してあります。
フォントやフォントサイズや文字色も変得る事が出来ます。
※５０００行を越えてしまい２つに分割しました。【後編】

開く トラックバック（0）

『マウスがディズニィー・アニメに変わる？』　�い劉�Ex８

★☆　left, center, right 等々の切り替えも追加しておきました。

　『マウスがディズニィー・アニメに変わる？』　�い劉�Ex８

※これくらいのフォントサイズともなると５５０でもきついので５３５とする　バックラウンドがアニメGIFによる動画上に文字列を任意的な目的フォームで描き、なおかつマウスポインターがアニメーションのマウスポインター・カーソルに変えられる方式！！

�，泙譴気鵑瞭阿�アニメ背景の上に文字を書くスタイルの原文からのサンプル２例です。この段階ではマウスはアニメカーソルには変わりません。


||||<#'Style='Font:bold 22pt"HGS行書体";Color:#FFFFFF;Background:url(http://uk.bloggif.com/img/glitter/434.gif);[http://];Border:groove 5px #FFBF00;Width:560px'``できない約束はしないことだな||


||||<#'Style='Font:bold 20pt"魚石行書";Color:#FFFFFF;Background:url(http://img2.blogs.yahoo.co.jp/ybi/1/88/7e/masanari_5935d/folder/1149845/img_1149845_30586726_14?1258633983.gif);[http://];Border:dashed 3px #FF8000;Width:560px'``考えてばかりいると日がくれちゃうよ||

↓↓↓

できない約束はしないことだな


考えてばかりいると日がくれちゃうよ



��幅寄せはセンター、倍角のスペースを文字間に入れると改行します。そして、アニメカーソルの変わる制御文が加わっています


||||<#'Style='Font:bold 22pt"HGS行書体";Color:#FFFFFF;Background:url(http://uk.bloggif.com/img/glitter/434.gif);[http://];Border:groove 5px #FFBF00;Width:535px;text-align:center;word-spacing:510px;cursor:url(http://media.superpimper.com/cursors/Disney/disney-3.cur)'``[[item(1,1)]]*(^◆^)*　できない約束はしないことだな||


||||<#'Style='Font:bold 20pt"魚石行書";Color:#FFFFFF;Background:url(http://img2.blogs.yahoo.co.jp/ybi/1/88/7e/masanari_5935d/folder/1149845/img_1149845_30586726_14?1258633983.gif);[http://];Border:dashed 3px #FF8000;Width:535x;text-align:center;word-spacing:510px;cursor:url(http://media.superpimper.com/cursors/Disney/disney-3.cur)'``[[item(1,1)]]*(^◆^)*　考えてばかりいると日がくれちゃうよ||

↓↓↓

*(^◆^)*　できない約束はしないことだな


*(^◆^)*　考えてばかりいると日がくれちゃうよ


以前、ユーチューブの画面を動く背景にした方式を取り上げて紹介しましたが、同様の考え方です。
背景はサイズを設定しGIF系による画面を設定している内容状態であり、ほぼ同様です。
そこに文字のみを書き、そこに改行を可能にし、マウスをアニメカーソルに変化させる制御文を付加してあります。
フォントやフォントサイズや文字色も変得る事が出来ます。
※５０００行を越えてしまい２つに分割しました。【前編】

開く トラックバック（0）

『マウスがディズニィー・アニメに変わる？』　�い劉�Ex７

　『マウスがディズニィー・アニメに変わる？』　�い劉�Ex７

※これくらいのフォントサイズともなると５５０でもきついので５３０とする。(右端の文字の折り返しの終端処理がおかしくなります) 

おなじみ、れんれんさんのファンとなれば読める記事からのフィルター文字の抜粋の例です。(２種の基本文です) まれさんも同様にフィルター文字を紹介されています。※修正しました。

||||<#ffffff'style='font-family:"HGP創英角ﾎﾟｯﾌﾟ体";width:550px;font-size:25pt;filter:Blur(strength=10,direction=135);color:#FF6600'``★ここに文字Σd(ﾟ∀ﾟd)♪★||

||||<#ffffff'style='font-family:"HGP創英角ﾎﾟｯﾌﾟ体";width:550px;font-size:25pt;filter:Blur(strength=10,direction=135);color:#000000'``★ここに文字Σd(ﾟ∀ﾟd)♪★||

↓↓↓
★ここに文字Σd(ﾟ∀ﾟd)♪★

★ここに文字Σd(ﾟ∀ﾟd)♪★



�‐綉�を、倍角スペース文字による改行、文字のセンター詰めとマウスポインターをアニメーションカーソルに切り換えられるように記述した物です。

||||<#ffffff'style='font-family:"HGP創英角ﾎﾟｯﾌﾟ体";width:530px;font-size:25pt;filter:Blur(strength=10,direction=135);color:#FF6600;text-align:center;word-spacing:530px;cursor:url(http://media.superpimper.com/cursors/Disney/disney-3.cur)'``[[item(1,1)]]*(^◆^)*　★ここに文字Σd(ﾟ∀ﾟd)♪★||

||||<#ffffff'style='font-family:"HGP創英角ﾎﾟｯﾌﾟ体";width:530px;font-size:25pt;filter:Blur(strength=10,direction=135);color:#000000;text-align:center;word-spacing:530px;cursor:url(http://media.superpimper.com/cursors/Disney/disney-3.cur)'``[[item(1,1)]]*(^◆^)*　★ここに文字Σd(ﾟ∀ﾟd)♪★||

↓↓↓

*(^◆^)*　★ここに文字Σd(ﾟ∀ﾟd)♪★

*(^◆^)*　★ここに文字Σd(ﾟ∀ﾟd)♪★



�⊂綉�を、倍角スペース文字による改行、文字の左詰めとマウスポインターをアニメーションカーソルに切り換えられるように記述した物です。

||||<#ffffff'style='font-family:"HGP創英角ﾎﾟｯﾌﾟ体";width:530px;font-size:25pt;filter:Blur(strength=10,direction=135);color:#FF6600;text-align:left;word-spacing:530px;cursor:url(http://media.superpimper.com/cursors/Disney/disney-3.cur)'``[[item(1,1)]]*(^◆^)*　★ここに文字Σd(ﾟ∀ﾟd)♪★||

||||<#ffffff'style='font-family:"HGP創英角ﾎﾟｯﾌﾟ体";width:530px;font-size:25pt;filter:Blur(strength=10,direction=135);color:#000000;text-align:left;word-spacing:530px;cursor:url(http://media.superpimper.com/cursors/Disney/disney-3.cur)'``[[item(1,1)]]*(^◆^)*　★ここに文字Σd(ﾟ∀ﾟd)♪★||

↓↓↓

*(^◆^)*　★ここに文字Σd(ﾟ∀ﾟd)♪★

*(^◆^)*　★ここに文字Σd(ﾟ∀ﾟd)♪★



��上記を、倍角スペース文字による改行、文字の右詰めとマウスポインターをアニメーションカーソルに切り換えられるように記述した物です。

||||<#ffffff'style='font-family:"HGP創英角ﾎﾟｯﾌﾟ体";width:530px;font-size:25pt;filter:Blur(strength=10,direction=135);color:#FF6600;text-align:right;word-spacing:530px;cursor:url(http://media.superpimper.com/cursors/Disney/disney-3.cur)'``[[item(1,1)]]*(^◆^)*　★ここに文字Σd(ﾟ∀ﾟd)♪★||

||||<#ffffff'style='font-family:"HGP創英角ﾎﾟｯﾌﾟ体";width:530px;font-size:25pt;filter:Blur(strength=10,direction=135);color:#000000;text-align:right;word-spacing:530px;cursor:url(http://media.superpimper.com/cursors/Disney/disney-3.cur)'``[[item(1,1)]]*(^◆^)*　★ここに文字Σd(ﾟ∀ﾟd)♪★||

↓↓↓

*(^◆^)*　★ここに文字Σd(ﾟ∀ﾟd)♪★

*(^◆^)*　★ここに文字Σd(ﾟ∀ﾟd)♪★


ここに示される内容の文字の制御文でフォントやフォンサイズ、文字色などを併せて変える事が出来ます。　また、文字の背景カラーを変えることもできるのですよ〜♪

※手実験になりますが色々とパラメータの数値を変えて確認実験してみてください。驚くほど色んな変化をするのでびっくりする事と思います。

開く トラックバック（0）

『マウスがディズニィー・アニメに変わる？』　�い劉�Ex６

　『マウスがディズニィー・アニメに変わる？』　�い劉�Ex６


★☆�Α，海譴呂�なじみのジョセフの日記でお馴染みのジョセフさんの記事内容に文法的に可変要素をさらに追加した例です。

※これはWスペースによる改行操作が織り込みとフォントサイズ等々の追加をどんなスタイルからでも可能ということを示した物です。


��text-align:center;word-spacing:540px;   ・・・これをcursol文の前に挿入してみました。これで倍角のスペースを文字間に入れることで改行が可能です。
また、text-align:center;　・・・によりcenterをleftにする事により左詰、rightにする事により右詰となります。

||<#ffffff' style=' width:540px;height:50px;color:blue;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=#8f00ffff,endcolorstr=#8fff00ff,gradienttype=0);text-align:center;word-spacing:540px;cursor:url(http://media.superpimper.com/cursors/Disney/disney-3.cur)'``[[item(1,1)]]*(^◆^)*　*ここにコメントを入れる事が出来ます。||

↓↓↓

*(^◆^)*　*ここにコメントを入れる事が出来ます。　*(^◆^)*　*(^◆^)*


��Wスペースによる改行操作が織り込まれるとheight:50px;⇒height:30px;にしても改行された時の背景や文字の改行による幅は変わりません。
むしろ、文字サイズを変えるほうが自動的に幅を最適化しますので変化がでてきます。(縦の幅)

||<#ffffff' style=' width:540px;height:30px;color:blue;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=#8f00ffff,endcolorstr=#8fff00ff,gradienttype=0);text-align:center;word-spacing:540px;cursor:url(http://media.superpimper.com/cursors/Disney/disney-3.cur)'``[[item(1,1)]]*(^◆^)*　*ここにコメントを入れる事が出来ます。　*(^◆^)*　*(^◆^)*||

↓↓↓

*(^◆^)*　*ここにコメントを入れる事が出来ます。　*(^◆^)*　*(^◆^)*



��;font-size:20pｔ　・・・と言うのを文字列の開始直前に入れてみました。ptによる表示はピッチ表示で論理的な表示です、��のpxはピクセル表示で物理的な表示でサイズが異なります。同じ20ですが違いが有る事や表記法が2種類あることをしておいてください。どちらでも可能です。

||<#ffffff' style=' width:540px;height:30px;color:blue;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=#8f00ffff,endcolorstr=#8fff00ff,gradienttype=0);text-align:center;word-spacing:540px;cursor:url(http://media.superpimper.com/cursors/Disney/disney-3.cur);font-size:20pｔ'``[[item(1,1)]]*(^◆^)*　*ここにコメントを入れる事が出来ます。　*(^◆^)*　*(^◆^)*||

↓↓↓

*(^◆^)*　*ここにコメントを入れる事が出来ます。　*(^◆^)*　*(^◆^)*


��font-size:20px　・・・と言うのを文字列の開始直前に入れてみました。　��と比較してみてください。　別の記事投稿でフォント関係の記法などを少しまとめてみたいと思います。

||<#ffffff' style=' width:540px;height:30px;color:blue;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=#8f00ffff,endcolorstr=#8fff00ff,gradienttype=0);text-align:center;word-spacing:540px;cursor:url(http://media.superpimper.com/cursors/Disney/disney-3.cur);font-size:20px'``[[item(1,1)]]*(^◆^)*　*ここにコメントを入れる事が出来ます。　*(^◆^)*　*(^◆^)*||

↓↓↓

*(^◆^)*　*ここにコメントを入れる事が出来ます。　*(^◆^)*　*(^◆^)*



　　　　
↑
上記をクリックして、RGBカラーをチェックしてください！！
カラーは半角文字でRGB表現です、例えば青色の場合、#0000FFとなっていますが、#は気にせずコピーして変更張り付けしてください。
制御文字は半角です。

※5000文字を越えグラジエントによる解説はさらに記事数が増えてしまいました。

開く トラックバック（0）

『マウスがディズニィー・アニメに変わる？』　�い劉�Ex５

　『マウスがディズニィー・アニメに変わる？』　�い劉�Ex５


★☆�ァ，海譴呂�なじみのジョセフの日記でお馴染みのジョセフさんの記事内容にマウスポインターを表現できるように構造文を追加した物です。

��
||<#ffffff' style=' color:blue;padding:0px;width:560px;color:blue;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=#ffff60,endcolorstr=#c0ffff, gradienttype=0);font-size:10pt;color:#008000;cursor:url(http://media.superpimper.com/cursors/Disney/disney-3.cur)'``[[item(1,1)]]*(^◆^)*　*ここにコメントを入れる事が出来ます。||

↓↓↓

*(^◆^)*　*ここにコメントを入れる事が出来ます。


��高さ　height:10pxのものです。
||<#FFFFFF' style='font:14px;color:#FFFFFF;width:540px;height:10px;position:absolute;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=#FF00BFFF,endcolorstr=#FF9400D3,gradienttype=0);cursor:url(http://media.superpimper.com/cursors/Disney/disney-3.cur)'``[[item(1,1)]]*(^◆^)*　*ここにコメントを入れる事が出来ます。||

↓↓↓

*(^◆^)*　*ここにコメントを入れる事が出来ます。

�９發機�height:30pxのものです。
||<#ffffff' style=' width:540px;height:30px;color:blue;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=#ffff0000,endcolorstr=#ff008000,gradienttype=0);cursor:url(http://media.superpimper.com/cursors/Disney/disney-3.cur)'``[[item(1,1)]]*(^◆^)*　*ここにコメントを入れる事が出来ます。||

↓↓↓

*(^◆^)*　*ここにコメントを入れる事が出来ます。


�す發機�height:50pxのものです。
||<#ffffff' style=' width:540px;height:50px;color:blue;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=#ffff0000,endcolorstr=#ff008000,gradienttype=0);cursor:url(http://media.superpimper.com/cursors/Disney/disney-3.cur)'``[[item(1,1)]]*(^◆^)*　*ここにコメントを入れる事が出来ます。||

↓↓↓

*(^◆^)*　*ここにコメントを入れる事が出来ます。


�ス發機�height:30pxのものです。
||<#ffffff' style=' width:540px;height:30px;color:blue;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=#8f00ffff,endcolorstr=#8fff00ff,gradienttype=0);cursor:url(http://media.superpimper.com/cursors/Disney/disney-3.cur)'``[[item(1,1)]]*(^◆^)*　*ここにコメントを入れる事が出来ます。||

↓↓↓

*(^◆^)*　*ここにコメントを入れる事が出来ます。


��高さ　height:50pxのものです。
||<#ffffff' style=' width:540px;height:50px;color:blue;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=#8f00ffff,endcolorstr=#8fff00ff,gradienttype=0);cursor:url(http://media.superpimper.com/cursors/Disney/disney-3.cur)'``[[item(1,1)]]*(^◆^)*　*ここにコメントを入れる事が出来ます。||

↓↓↓

*(^◆^)*　*ここにコメントを入れる事が出来ます。


※これらはWスペースによる改行操作が織り込まれていないものですが文が長いと折り返しで改行化されます。追加はフォントサイズ等々含めて勿論可能です

開く トラックバック（0）

全5ページ

[1] [2] [3] [4] [5]

[ 前のページ | 次のページ ]

Yahoo!ブログからのお知らせ

.
山の神〜海の神〜福の神さん
山の神〜海の神〜福の神さん
非公開 / 非公開
人気度
Yahoo!ブログヘルプ - ブログ人気度について
友だち(13)
  • hiro103
  • たっちゃん
  • sarry
  • ansund59
  • Takeshi
  • くうちゃん
友だち一覧

スマートフォンで見る

モバイル版Yahoo!ブログにアクセス！

スマートフォン版Yahoo!ブログにアクセス！

日 月 火 水 木 金 土
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

最新のコメント

最新のトラックバック

標準グループ

ブログバナー

Yahoo!からのお知らせ

プライバシー -  利用規約 -  メディアステートメント -  ガイドライン -  順守事項 -  ご意見・ご要望 -  ヘルプ・お問い合わせ

Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

みんなの更新記事
前へ 次へ