キラキラフォントを使いこなそう

キラキラフォントの応用、具体的な使い方のコーナーです。単純にブログに貼りつけるだけではなく、ちょっとした工夫で面白い使い方ができます。女性にも優しい、簡単な使い方。
きらきらフォントコレクション

キラキラフォントでキラキラ顔文字を作る!

 キラキラフォントで文字を作るだけではなく、アイコンや顔文字、画像として使ってみましょう。使い方の枠が大きく広がります。
 サンプルを置いてみます。これ以外にもまだまだ使えると思います。

free glitter text and family website at FamilyLobby.com

free glitter text and family website at FamilyLobby.com

free glitter text and family website at FamilyLobby.com

画像サイズを調節しよう!

 キラキラフォントを本文中に貼りつけるだけならそのままのサイズでもいいと思いますが、サイドバー表示などをする場合は微調整を行いたいところ。一回一回作りなおすのは大変。
 サイズ変換する別の方法を解説☆
フラッシュタイプのサイズ変更
<embed src="http://text.glitterfy.com/show.swf?message=Kirakira&font=http://text.glitterfy.com/fonts/plainn_lib6.swf&glitter=http://text.glitterfy.com/glitters/glitter1.swf&clickURL=http://www.glitterfy.com/&clickLABEL=Glitterfy.com&bevel=1&shadow=1&glow=1&blur=0&fade=0&blink=0&gb=2&ga=0.6&gi=0&gc=10027263&bb=2&bc=0&sb=7&sa=0.7&si=0&sc=0&blb=7&ls=6&fontsize=72&num=1" quality="best" wmode="transparent" bgcolor="#ffffff" width="255" height="133" name="Glitterfy Text" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></embed><br /><a href="http://www.glitterfy.com/">Glitter Text @ Glitterfy.com</a>

 まず、「タグ」の内容を確認してください。(上図参照)「Glitterfy.com」を例にとってみましょう
●まず、タグの中から「width="〇〇"」「height="〇〇"」というのを探しましょう。フラッシュタイプのタグで「<enbed>」が使われているブログパーツであれば、この技が使えることがあります。(ユーチューブなど)
●そこの数値を小さくすれば、サイズが小さく、大きくすれば大きくなります。「width」は横の長さ、「height」は縦の長さです。
●「Glitterfy.com」のブログパーツの場合は、これをいじるだけだと、フラッシュを表示するサイズだけ小さくなってしまいます。中身は大きいまま、表示サイズだけ小さくなるので、中身が見切れちゃうことも…。そこで、もうひとつの赤字(右図*1参照)「&fontsize=72」に注目。これを小さくすることで、フォントサイズ(つまり、中のキラキラフォントサイズ)を調整出来ます。
●このテクは、一部のブログパーツでしか使えないことに注意してください。

GIFタイプのサイズ変更
<a href="http://www.freeflashtoys.com/?glitter-text-maker"><img src="http://wws.jakou.com/img/5781de2e7f09919a6bd93234a67268.gif" border="0" alt="Glitter Text" width="240"/></a>

 まず、タグの中身を確認します。(上図参照)「freeflashtoys.com」のタグを例にとってみます。
●今回は、タグに追加します。赤字の部分を追加してください。「width="〇〇px"」の部分です。追加するとき注意するのは、両サイドに半角スペースが必ず必要です。
 これで、横の長さが調整出来ます。
●「height」(縦の長さ)は、コンピュータが自動でリサイズしてくれるので、設定しなくても大丈夫ですが、より完璧な表示を目指す人は、縦横比を計算して入れてください。例えば、ブログを表示したとき何らかの不具合でキラキラフォントが読み込みされなかった場合は、タグ中の「alt="〇〇"」の文字が表示されるのですが、この文字数が多いと、ブログのレイアウトが汚くなる原因になることもあります。

●(上級編)これは、「<img>」タグを使っているので、スタイルシートから調節することも可能です。例えば、「このdivボックス内すべての画像の横幅を200pxで表示する」なんてことも出来ます。
 例えば、「<div class="main-box">内の画像はすべて、横軸200pxに矯正する」という命令文は(下図)のような感じになります。

 いろいろ試して、美しいブログに仕上がるよう、頑張ってください☆

.main-box img {
width:200px;
}
(C) Copyright 2009 SAKI Laboratory All Right Reserved.