Generatorの使い方サイトへの設置webフォントと組み合わてもうひと味!おまけCSS3と対応ブラウザの登場により、角丸やグラデーションを使ったリンクやフォームの送信ボタンが画像なしで表現できるようになりました。うれしいことにCSSを使用したボタンは簡単に生成できるウェブサービスまであります。border-radiusなどCSS3固有のプロパティなどを知らなくても手軽に装飾ボタンを作れるのです。いくつか有名どころがあり、まとめ記事などもよく見ますが、今回は実際にサイトに設置するまでを実践してみたいと思います。驚くほど簡単に設置できます!ボタンジェネレータで簡単生成まずはウェブサービスでボタンを生成します。角丸+グラデーションに加えてシャドウ付きです。数項目の簡単な指定だけで以下のようなボタンが作成できます。詳しく見てみるツールはほんとうに直感的て説明不要なほどですが、以下に各項目を説明しておきます。好みのパターンを選択Color項目ではグラデーションの各パートの色指定ができます。Themeが用意されていますので、よほどこだわらなければ、ここで選択すれば十分かと思います。Gradient:グラデーションの位置指定ができます。Size項目ではサイズに関しての指定します。(text)項目では文字に対するシャドウ効果を指定します。(button)項目ではボタンに対するシャドウ効果を指定します。(Useボタンでエフェクトを使用するか否か選択可能)Top:縦位置Left:横位置Blur-Radius:ぼかし半径Spread-Radius:拡散半径Text項目には任意のボタンに表示させるテキストを指定します。サイトへの設置さあ、お好みのボタンは作成できたでしょうか?結果のCSSとHTMLタグが出力されますので、あとは自分のサイトに張りつけるだけです。Generator」より出力されたサンプルです。このソースをそのまま使用すれば、上記のボタンが設置できます。class="css_btn_class">詳しく見てみる</a>最近のブラウザであれば、外部スタイルシートやヘッダにCSSを記述しなくても、body内でhtmlタグと一緒に記述すれば、ボタン表示のチェックができます。(WordPressの場合はテキストモードで入力のこと)もちろん、本来はスタイルシートに書くべきなのですが、この方法ならヘッダカスタマイズ不可の無料ブログなどでも使えますね。これだけで画像を使ったようなボタンが設置できるのです。3分どころか、1分あればできそうですね!webフォントと組み合わてもうひと味!さらに見栄えをよくするために、もうひとつスパイスを加えてみます。webフォントと組み合わせてみます。mplus-2p-black">詳しく見てみる</a>すでにwebフォントをCSSで定義してあれば、ボタンのスタイルに書体指定のクラスを加えるだけです。なるとこれまでなら画像でしか表現できなかった世界です。Photoshopなどで製作してGIFなどで出力するという工程を考えるとかなりの時間短縮になると思います。効率重視のアフィリエイトサイトなどでも重宝するのではないでしょうか。おまけその他にも魅力的なCSSボタンが作成できるウェブツールがありますので、おすすめのサイトを紹介しておきます。buttonいかがでしたでしょうか。クリエイティブな仕上りがあっという間に実現できますので、ぜひ活用してみてください。コメントをキャンセルメールアドレスが公開されることはありません。ひと昔前なら画像で表現していたようなアイコン。WordPressをはじめ、サイト構築を行っていると変更が反映されない場合があります。SYSTEMをまったく知らなかったのですが、知り合いから依頼されヘルプすることになりました。introductionウェブサービスの構築・集客コンサルティングをやっているR3098です。このサイトではWordPressの初級・中級ユーザーや集客に悩むウェブサイトオーナーに向けた情報を発信しています。