---

ヒミツノタグワザ

---

フツーのタグにあきてしまったアナタ…そうguestさんアナタです　　　　 ちょっとディープなウラワザためしてみたくありませんか?　　　　 rintaroがたまたま発見したちょーっとカッコイイワザありますよ?

どこでもガンガンつかえます 画像のみ反転するのだ!! あっというまに画像が切り絵風になるのだ!! 画像にピカリ＊光が当たるのだ!! 付箋風?テーブルタグより簡単な囲い線!! 縦書きでしっとり ページ全体がモノクロ映画風になるのだ 画像なしタグのみでグラデーション背景を入手するのだ!! 画像を文字に切り取るのだ!! 文字間あけてなんとなく見やすくするのだ!! おしゃれなテキストエリアを入手するのだ!! 絵師様に描いて頂いた宝物…額縁に飾るのだ!! バナー周りの線を一斉消去!! ぜひショップで使おう さらばショップ店員!! さらばショップのあいさつ文!! さらばアイテム周辺の線たちよ!! ふわりふわり♥を降らせるのだ ぷくぷく深海風!!　あわがのぼっていく～ その他　(型にはまらないヤツら) をエモじゃない店員でつかいたいよね? ペットの紹介のページの画像をオリジナルにすりかえよう ん?　なんか短い?メニューにするのだ!!

＊ご利用に関する注意点＊ (恐怖の)ネオペットHTMLフィルターに全てのタグを対応させたので(たぶん)使えます 　ＵＬに関するタグはここにまとめました 　どこにrintaro113のミスが潜んでるかわかりません rintaro113はサイトにあるタグの利用によりその結果起こったと想定される 問題への関与を保証いたしません タグに関するあらゆるリスクは全てご自身が負うものです 　つかったらバナー張ってくれるとうれしいですねー (このHPは里子のコのページなのでこのバナーは私のULにリンクしています) リンクフリー!!　もしもよければ貼ってくだされ ►►►►►► <a href="http://www.neopets.com/randomfriend.phtml?user=rintaro113"> <p><img src="http://mulberries.at.infoseek.co.jp/momoko/bunner.gif" border="0"></p></a> ま　そこらへんよろしくお願いいたします

さぁ　早速↓からスタートです　めんどくさいのでリンクしてないんですよ～　は～い






















画像のみ反転するのだ!!
これを使うとフォントは左右反転しません　それがビミョーすごいところなんです
<style type="text/css"> a:hover img { } </style>

►解説 　a:hover{～}とa:hove img{～}を使い分けることでフォントは反転しないんですねー　ハーイ　 反転意外のアクションも使い分けでかっこよくできそうですねー

---

あっというまに画像が切り絵風になるのだ!!
これはちょっとスゴイぞ!　試して見てほしいです
<style type="text/css"> a:hover img { } </style>

►解説 　filter:chroma;とfilter:mask;の組み合わせで切り絵っぽくみえるんですねー　ハーイ 両方とものmask(color=black)のblackを好きな色に変えてみてくださいね 　フィルターは　まだまだ種類がいっぱいありますよ　そのうち紹介してみようかな…

---

画像にピカリ＊光が当たるのだ!!
半透明になるのはよくあるけど　これはちょっとちがうよん♪
<style type="text/css"> a:hover img { } </style>

►解説 　本当はぐにゃぐにゃになるフィルターですがぐにゃり度合いが弱いので明るくなるだけにみえるんですねー　 透明度が上がるのではなくて彩度があがるかんじになりますね　ハーイ 　LightStrength=○○の数字を上げるとさらにまぶしくできると思います

---

付箋風?テーブルタグより簡単な囲い線!!
スマートにおさまりますよ　テーブルタグが苦手な私にはぴったり!!
<style type="text/css"> #memo { font: 7.5pt; color: black; width: 150px; border-color: -blocked-; border-style: -blocked-; } #title { font: 8pt; color: black; } </style> 題名をここに書いてください 内容をここにかいてください

►解説 　align,width,color,border-color,border-styleなど好きにいじれるパーツがいっぱいです　腕の見せ所ですねー　ほっとくと角の丸い線になります　いいですねー 　フィールドセットを増やしたいときはstyleはふやさなくていいですからね

---

縦書きでしっとり
上手く使うのは難しそうですがインパクトは大!!
<font style="height: -blocked-;"> ここに文字をどうぞ </font>

►解説 　日本らしいですねー　文字の高さをしっかり指定しないとうまくいきません アルファベットは横向きになりので要注意　そうするとずっこけたAとかもできますねAとか?

---

ページ全体がモノクロ映画風になるのだ
簡単なタグですがページの雰囲気ががらりとかわるでしょう
<style type="text/css"> body { border-style: solid; border-width: 50px 0px 50px 0px; border-color: black; } </style>

►解説 　filter:gray;で全体が白黒になってます　border-widthをいじることで黒帯の幅がかえられますよ　 border-color:black;で黒帯になっているので他の色にするとまた違うイメージになりますね

---

画像なしタグのみでグラデーションの背景を入手するのだ!!
むー　このタグ…　難しくて　よく　わかりません…　ォィ!!

►解説 　startColorstrで始まりの色,endColorstrで終わりの色が指定できるっぽいです　gradientTypeは0で上下に1で左右にグラデーションするっぽいです 　よく分かりませんが　たぶ ん　背景画像との組み合わせは無理だと思うっぽいです　(?)

---

意味わかんないタイトルになっちゃいました…　でもタイトルをみればはっきりしますよね?
<style type="text/css"> div#moji { background-image: url("-blocked-"); } div#moji h1 { width: 100%; margin: 0; font: normal 3em "Arial Black"; } </style> <div id="moji"><h1>ここに文字</h1></div>

►解説 　要は画像が　ずらー　と並んでいてそのうえに文字型のマスクを被せるというかんじです 反転すると化けの皮が剥がれます　maskのcolorは背景色にあわせることをオススメします 　 タイトルなどに使用すると迫力あるかなと思います

---

文字間あけてなんとなく見やすくするのだ!!
深い意味がないといえばそれまで…　でもじつはこのページも文字間調節してあるよ
<style type="text/css"> td, p, body, a { letter-spacing: 1px; } </style>

►解説 　えー…と　いつになく地味なタグですね　ま　でも　見てくれる方にやさしくあるというのがHPの鉄則ですから…そんな思いやりあるHPに心意気を感じざるを得ませんからしてです ね… つまり…ですね…　長いのでやめておきます

---

おしゃれなテキストエリアを入手するのだ!!
ごてごて装飾的テキストエリアもいいかもですね…　↓のテキストエリアもかなりミモノですな…
<style type="text/css"> TEXTAREA#share { width: -blocked-; height: -blocked-; border: -blocked- -blocked- -blocked-; color: -blocked-; background-image: url("http://mulberries.at.infoseek.co.jp/momoko/bunner.gif"); } </style> <textarea id="share"> ここがテキストエリアになります　ここにタグなど書いてください

►解説 　枠のカラー,スタイル,スクロールバーはもちろん背景画像までつけちゃいます!! そこまでやりますか!?ってなテキストエリアです　 styleの部分は増やさなくていいですよ スクロールバーについては こちらのページが分かりやすくオススメです

---

絵師様に描いて頂いた宝物…額縁に飾るのだ!!
ぴったりの額縁を簡単なテーブルタグで用意してみるのもいいかも

rintaro作

<style type="text/css"> table#gaku { border: 10 ridge #804f24; background-color: #a37238; } </style> <table id="gaku" cellspacing="10"> <tr><td><img src="-blocked-"></td></tr> <tr><td align="center"><font size="2">作者名など</font></td></tr> </table>

►解説 　木目はくどかったかなーというわけで画像なしの額縁に変更…　なんかしっくりきません… ある日突然このタグがなくなる可能性大!!!

---

バナー周りの線を一斉消去!!
リンク集運営主さんも大助かり（?）
<style> img { border: 0; } </style>

►解説 　えーと…　とっても短いタグですが　ひとつひとつのバナーにborder="0"とつけていたら… やっぱりこういうときにべんりなのはCSSですねー　んー画期的…

---

さらばショップ店員!!
店員を消すことができます
<style> center img { display: none; } </style>

►解説 　店員を消すとなにができるかはアナタ次第　(というか何ができるのか分からない…) とりあえず　自分の描いた絵で店員風とか…フリーイメージのアニメーションもつかえますね

---

さらばショップのあいさつ文!!
さらばショップ店員!!"とセットでご使用下さいませ
<style> center b { display: none; } </style>

►解説 　店員を消したものの文が残るのでセットで使いましょう これでさらにオリジナルなショップが実現できるのは間違いありませんねー　ハーイ

---

さらばアイテム周辺の線たちよ!!
アイテム周りの線を消すと結構雰囲気かわります
<style type="text/css"> p img { border: 0; } </style>

►解説 　border:0;で線が消せるんですねー　ハーイ ……いや　あんまり　説明することないですね

---

ふわりふわり♥を降らせるのだ!!
単純に大量のmarqueeなだけです　タグが長い!!ので要注意
<style type="text/css"> .furu { color: pink !important; font: 8pt tahoma; } marquee { background-color: none; width: 8pt; height: 900px; position: absolute; top: 0px; } </style> <div class="furu"> <span>♥</span> <span>♥</span> <span>♥</span> <span>♥</span> <span>♥</span> <span>♥</span> <span>♥</span> <span>♥</span> <span>♥</span> <span>♥</span> <span>♥</span> <span>♥</span> <span>♥</span> <span>♥</span> <span>♥</span> <span>♥</span> <span>♥</span> <span>♥</span> <span>♥</span> <span>♥</span> <span>♥</span> <span>♥</span> <span>♥</span> <span>♥</span> </div>

►解説 ♥以外にも使えそうなのは❀❄✴あたりもありですかね fontを24ptくらいにするとはっきりします ちょっとくどすぎるかもしれませんね…　ま　使用者のセンス次第ですね

---

ぷくぷく深海風!!　あわがのぼっていく～
好評（?）　"ふわりふわり♥を降らせるのだ!!"のバージョン違いです
<style type="text/css"> .awa { color: -blocked- !important; font: 8pt tahoma; } marquee { background-color: none; width: 100pt; height: 1200px; position: absolute; top: 0px; } </style> <div class="awa"> <span>○</span> <span>○</span> <span>○</span> <span>○</span> <span>○</span> <span>○</span> <span>○</span> <span>○</span> <span>○</span> <span>○</span> <span>○</span> <span>○</span> <span>○</span> <span>○</span> <span>○</span> <span>○</span> <span>○</span> <span>○</span> <span>○</span> <span>○</span> <span>○</span> <span>○</span> <span>○</span> <span>○</span> </div>

►解説 　背景を濃くしてあわの色を薄くするのがオススメです　ファンタジーな雰囲気になりますよー

---

をエモじゃない店員でつかいたいよね?
自分もつかってまーす!!　ここでソースをチェックしてみてくださいね　ついでに買い物も…
<style> center img, center b { display: none; } </style>

►解説 　"さらばショップ店員!!"の応用になります　店員をウスル（ゴシック調）に設定して　 ショップ店員を↑のタグで消します 　もしも気になればかわりの店員はimgタグで表示してくださいね

---

ユーザー情報:○○○(ユーザー名)を消そうじゃないですか
画像でかぶせて消すのがめんどくさーいときにつかいましょう
<style type="text/css"> center font b { display: none; } </style>

►解説 　私もかなり悩んでいたのでついにボードで質問したところ1時間35分後に(早い!!)解答をいただきました　 お名前お出ししていいのか分かりませんが　本当にありがとうございました ここで感謝しておりますよー

---

ペットの紹介のページの画像をオリジナルにすりかえよう
わかりにくいので ここ を見てみてくださいね　こんなかんじのことです
<p><img style="float: left; margin: -194px 200px -60px 86px;" src="-blocked-" width="150" height="150"></p>

►解説 　まず150×150の画像を準備しなきゃいけないですね… ステータスによってはずれる事もあるみたいです marginのあとの数字(top right bottom leftの順)をいじってみてください

---

ん?　なんか短い?メニューにするのだ!!
わたしも ここ で使ってます　画像素材なしでシンプルなメニューにかえられるんですよ
<style type="text/css"> #n { display: none; } </style>

►解説 　すごく短いタグですが　こうかはバツクンだ!!!　気軽にたのしめますー

---

御指摘　御要望　御苦情　などありましたら気軽にメールください
あ　やっぱし苦情はやめとく