Quickribbon

TOP

            デザイる2|Webサイト製作初心者に向けて情報発信していきます。

クール&キュートなリボン・ジェネレーター 4つ

クール&キュートなリボン・ジェネレーター 4つ

サイトに可愛いアクセントを施す、リボン・ジェネレーターの紹介です。
テキストやリンクを貼ることもでき、リボン画像と共にjavascriptコードも生成してくれます。
Quickribbonで作ったものを右上に貼ってみました♪



Website Ribbon Generator

Website Ribbon Generator

Website Ribbon Generator の使い方

各項目を入力します

(A)Messageテキストを入力、入力しない場合は半角スペースを入れて下さい。
(B)LinkリンクするURLを入力します。入力しないと画像が生成されません。
(C)Emailメールアドレスを入力します。入力しないとエラーとなります。
(D)Fontフォントと文字サイズを選択します。
(E)Font colorフォントの色を選択します。



色をクリックで選択し「GENERATE」をクリック

好きなリボン(色)をクリックで選択し「GENERATE」をクリックします。


リボン画像が生成,javascriptコードが生成

プレビュー画面にリボン画像が生成されました。右クリックから保存できます。
その下にjavascriptコードが生成されています。コードを貼り付けることでリボンが表示されます。


Quick ribbon

Quick ribbon

Quick ribbon の使い方

テキスト入力と文字のサイズと色の選択

Ribbon text
テキストを入力します。

Choose the font and size
フォントとサイズを選択します。

Text color
赤枠クリックでカラーピッカーが出現しますので色を選択します。


リボンのスタイル選択とグラデーションの色使い

Pick the ribbon style
リボンのスタイルを選択。

Pick the ribbon color
リボンの色を選択。

  1. 「Color no.1」はリボン上からのグラデーション始まりの色。
  2. 「Color no.2」はリボン下へのグラデーションの終わりの色。
  3. 「Color no.3」がリボン上部の色。


背景色はスポイト・アイコンクリックでカラーピッカーが出現し選択できます。リボン画像の上で「右クリック→保存」することができます。クリックするとプレビュー画面に反映します。

Background color
背景色はスポイト・アイコンクリックでカラーピッカーが出現し選択できます。

リボン画像の上で「右クリック→保存」することができます。

Apply
どこかを変更した場合、クリックするとプレビュー画面に反映します。


リンク先のウィンドゥ設定とソース生成

Ribbon hyperlink
リンクするURLを入力します。

Open link
リンク先を別窓で開くか、同一窓で開くか選択できます。

Generate Ribbon!
クリックするとコードが生成されます。



ソースが生成されました。コピーして貼り付けるとリボン画像が表示されます。

コードが生成されました。コピーして貼り付けるとリボン画像が表示されます。
このページの右上部に貼り付けてあります。


その他 3Dリボン・ジェネレーター

3Dribbon-generator
3Dribbon-generator

色とサイズ、細部までこだわって設定できます。


ribbon-builder
ribbon-builder

スライダーでサイズの調整をし、カラーピッカーで色を指定するだけで出来上がり。




リボンはサイトに彩りを添えてくれます!最近は、あまり見かけなくなりましたが(^^;)
3Dリボン・ジェネレーターはちょっと苦手かなぁ・・・時期、使い方を記したいと思います。

関連記事


最新記事

a:2919 t:1 y:0







■この記事に足りないと思ったことがあったらぜひ教えてください。

powered by HAIK 7.3.0
based on PukiWiki 1.4.7 License is GPL. HAIK

最新の更新 RSS  Valid XHTML 1.0 Transitional