画像を使わずCSSだけでリボンバナーを作成しよう!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

ウェブデザインを行う際、
リボンバナーを使って
アクセントを付けたいことも
あると思います。

画像を作成して設定するのも良いですが、
CSSだけで設置出来たら、手っ取り早くて
作業が楽になりますよね。

そして、CSSなどのコードも
コピペだけで使えたらもっと楽ですね^^

そんなあなたに、簡単にリボンバナーを作成できる
ジェネレーターを今回ご紹介させて頂きます。

Ribbon builder

RibbonBuilder

Ribbon builder

「Ribbon builder」にアクセスしたら、
「Ribbon Settings」「Text Settings」「Ribbon Colors」の
設定を好みの設定にします。

RibbonBuilder2

「Ribbon Settings」では、
リボンの横幅や、リボンのギザギザの部分の大きさ、
リボンのスティッチや影の有無の設定ができます。

「Text Settings」では、
リボン内の文字を入力したり、フォントサイズを設定したり、
文字の色や影の色を設定することができます。

「Ribbon Colors」では、
リボンのそれぞれのパーツ色の設定になります。

RibbonBuilder3

コードを見るには、HTMLボタン、CSSボタンをクリックして
コピペして使えばOKです。

試しに、起業の王道のリボンバナーを作成してみました。

RibbonBuilder4

この様に、簡単に作成できるので、
良かったらチャレンジしてみて下さいね。

mt

起業初年度1000万円、その後ゆるやかに年商3000万円までを目標に起業に向けて一歩を踏み出したい方向けの起業専門メルマガです。最新のノウハウを始め、セミナーや限定サービスのご案内をご希望の方は今すぐ下記フォームより、メインで使っているメールアドレスをご登録下さい。家族との時間を大切にしながら自由自在に収入を増やせる起業家になる方法を余すことなくお伝えいたします。

メールアドレス(必須)

コミュニティ