簡単に綺麗なボタンが作れる無料ボタン作成サイト

ホームページからお問い合せなどのページヘ誘導する際にボタンを作りたいと思う方も多いと思いますが、ホームページ制作の初心者の方がキレイなボタンを作るのは結構難しいものです。

FireworksやPhotoshopを購入して本気でボタンの作り方をマスターしても良いのですが、簡易的なボタンであれば無料作成ツールを使うのが良いかもしれません。

今回は誰でも簡単にスタイリッシュなボタンが作れる無料サイトをご紹介します。

ボタン作成サイト

As Button Generator

As Button Generatorでは、グラデーションやストライプがかかったクオリティの高いボタンを作ることができます。

色はもちろんですが、グラデーションのタイプもいくつか用意されており、ストライプを変更したりフィルターをかけることも可能です。また、画像を読み込んでボタンに挿入することもできるので、自分のサイトオリジナルのボタンが作れると思います。

テキストを挿入する時に少しやり方がわかりにくいのですが、手順は以下のようになります。

  1. 「テキストを挿入する」をクリックする
  2. ボタンイメージに表示された「Edit me」を選択
  3. テキスト入力欄に表示された「Edit me」を編集
    (フォントの種類やサイズ、色などを選択)
  4. 「適用」をクリック
  5. 文字数が多い場合には、自動的にテキストが折り返されてしまうので、ボタンイメージに表示されたテキストの右上にマウスをあわせて、右斜め矢印の状態にして右に広げる
  6. 適用後に再編集する際には、入力したテキストをマウスで選択した状態にして行い、最後に「適用」をクリックする

テキストの挿入方法がわかりづらいと感じましたが、無料でこれだけクオリティの高いボタンが作れるのであれば問題ないでしょう。

ButtonMaker

ButtonMakerの使い方は簡単です。ボタンのサイズや色、テキストなどを入力して、最後に「create」をクリックするとボタンが出来上がります。できたボタン画像をパソコンに保存すれば作業完了です。

フォントが少ないのが残念なのですが、テキストを未入力にしてボタンだけを作成して、ホームページに載せるときにはCSSの背景として読み込ませて、ボタンの上にテキストを載せる形でも良いと思います。

サイトに載せたボタンに動きをもたせる方法

サイト上でボタンにマウスが載った時にボタンの色や文字が変わるようにしたいという場合には、画像を2つ用意して、CSSやJavaScriptで動きを持たせることになります。

画像にマウスを載せた時に動きをつけることを、マウスオーバーやホバーと呼びます。

CSSで簡単に動きをつける

a:hover img {
opacity: 0.6;
filter: alpha(opacity=60);
-moz-opacity: 0.6;
}

これでページ内の全てのイメージリンクがマウスを載せた時に半透明の状態になります。サイト内の全てのイメージリンクに対して、一括で動きをつけたい場合に便利です。

0.6や60というのが透明度で、80や90にすれば透明度が低くなり、50や40にすれば透明度は高くなります。

0.6で設定するとこのようになります。

特定のイメージに対してのみ変化を出したい時には、そのイメージリンクのタグをdivやpタグで囲って、それにclassを指定すれば良いでしょう。

HTMLでボタンのマウスオーバーを実現

JavaScriptは初心者には難しいですし、CSSも良くわからないという方は、HTMLでボタンの変化を出すことも可能です。

<a href=”飛び先のURL” onMouseOver=”document.gazo01.src=’ホバー後の画像URL'” onMouseOut=”document.gazo01.src=’ホバー前の画像URL'”><img src=”ホバー前の画像URL” width=”250″ height=”250″ border=”0″ name=”gazo01″ /></a>

gazo01という部分はそのままでOKですが、ページ内で複数のイメージに対してホバーさせたい場合には、イメージごとに01の部分を02や03に変更する必要があります。widthが横幅で、heightが高さです。無くても大丈夫ですが、読み込みを早くするために幅と高さを指定したほうが良いと言われています。

レンタルサーバー比較

実際に使ってみるとこのような動きになります。画像を2枚用意する手間がありますが、クリック率は上がるかもしれません。

管理人イチオシのレンタルサーバー

当サイトでも使っているエックスサーバーは、ディスク容量が200Gと大きく、MySQLが50個まで使えますので、1つの契約でいくつものサイトを運営することができます。

転送量が月2,000G、メモリ192Gと他の格安サーバーでは見られないスペックとなっており、アクセス数の多いサイトや複数のWordPressサイトを運営するのにも向いています。

自動バックアップと電話サポートが付いているので、初心者の方でも安心!

エックスサーバーの無料お試し申し込みはこちら

公開日:2012年11月24日

サブコンテンツ

このページの先頭へ