GT-ONE 楽天タグ講座 パイプ奮闘記

グラデーションフォント 

おもしろタグ教室【グラデーションフォントを作成しよう】




【グラデーションフォントを作成しよう】



    【はじめに】

    【初心者のためのHPの飾りつけ教室】 とは別に、余談のページを作ってみました。
    ここではちょっと変わったタグや、趣向を紹介していきましょう。



    みなさんは、文字に色を付けるタグをご存知ですか?
    たいていの方が、ご存知だと思いますが。例えば!

    GT-ONE WEBSITE     この文字は、タグに表すと下のようになります。

    <FONT SIZE=4 COLOR="#FF0000"><B> GT-ONE WEBSITE </B></FONT>

    簡単にタグの説明をしておきましょう。

    SIZE=4       は文字の大きさを指定します。
    COLOR="#FF0000"    は文字の色を指定します。
    <B></B>    は文字を太文字にします。


    フォントの大きさと色を指定する基本のタグは、↓これですね。


    <FONT SIZE=" 文字の大きさ " COLOR=" 文字の色 "><B> ~大きさ、色を指定する文字~ </B></FONT>




    では、文字を虹のような、グラデーションで飾って見ましょう。
    グラデーションは、1字1字に色をつけます。
    例としてグラデーションにしたタグを書いて見ましょう。

    G T - O N E W E B S I T E     この様な、グラデーションのタグは下のようになります。


    <font size=4><b><font color="#ff0000"> G </font> <font color="#ff5e00"> T </font> <font color="#ffbd00"> - </font><font color="#eef000"> O </font><font color="#94f000"> N </font><font color="#37f000"> E </font><font color="#00f023"></font><font color="#00f073"> W </font><font color="#00f0d6"> E </font><font color="#00c9f0"> B </font><font color="#0065f0"> S </font><font color="#0016f0"> I </font><font color="#4800f0"> T </font><font color="#a100f0"> E </font></b></font>


    繰り返しなんですが、とても長い物になってしまいますね。
    そこで、簡単にグラデーションフォントのタグを製作できる「CGI」がこれです。



    項目に記入するだけで、グラデーションフォントを作成することが出来ます。
    虹色のグラデーションフォントを作りたい場合、項目の中の虹にチェックしてください。
    項目に記入したあと、グラデーションフォント作成をクリックしてください。
    そうしてできたタグをそのままコピーして貼りつければOKです。


    グラデーションフォント製作

    By 我楽多部屋


    【製作したタグの貼り方】

    まずは、「文字サイズ」を指定して「虹」と「太字」にチェックを入れます。
    最初はそれでやって見てください。出てきた、ソースを「コピー&ペースト」とします。タグの最初から最後までを左クリックしたまま、なぞります。
    そして、右クリックしますとフロートパネルが出てきますから、その中から「コピー」を選び左クイックします。貼りたい所に、ポイントし、また右クリックから貼り付けを選べば、OKです。

    簡単にグラデーションフォントが製作でき、簡単に貼り付けられます。グラデーションフォントで貴方のホームページを飾って見てください。(*^_^*)



おまけ!【カラーサンプル】


    グラデーションフォントに欠かせない、カラーコードのページを作って見ました。

    カラーコードやカラーネームが知りたいとき、カラーサンプルがご覧になれます

    みなさん、活用してくださいね。


    【カラーコード】 のページはこちらから。

    【カラーネーム】 のページはこちらから。




★ではみなさんがんばってください。★
よく御存じの方は読まないで下さいね。(*^_^*)




おもしろタグ教 室【MENU】 にもどる。







© Rakuten Group, Inc.
Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: