賢威で使えるちょっとカッコいいボタン画像の作り方

意外と今さら聞けないのが「ボタン画像の作り方と設置方法」ではないでしょうか。

今日はマウスを載せると凹んだように見える一般的でオーソドックスなボタン画像の作り方を紹介します。こんな感じのやつです。（マウスを載せてみてください）

お申込みはこちら

まずはボタン画像を作成する

まずはこちらで使うボタン画像を作成していきます。ポイントは表示用のボタン画像とマウスオーバー（マウスを乗せたとき）用のボタン画像の２枚を用意する、ということです。

ここでちょっとしたテクニックを紹介すると、通常のボタン画像というのは、上から下にかけて濃くなるようにグラデーションが掛かるように作ると綺麗に見えます。 逆に、マウスオーバー時のボタン画像は反対の下から上にかけて濃くなるようにグラデーションをかけると、アクション時に凹んだような視覚効果を演出できます。

そして、２枚の画像が用意できたら、以下のように縦に２枚を繋げた１枚の画像として保存してください。

 
これで画像の準備は完了です。

ちなみに、ご自身でボタン画像を作るのが難しい場合は、こちらの（当サイト限定！賢威で今すぐ使える画像素材置き場）にいくつか上げておきましたので、こちらのものを使ってください。

賢威でCSSの設定をする

まずは先ほど作成した画像ファイルを賢威にアップロードしてください。管理画面の「メディア―＞新規追加」からアップロードできます。

アップしたら画像のアップロード先のURLを覚えておいてください。

次に、管理画面の「外観―＞テーマ編集」から賢威の「design.css」を開きます。design.cssのどこでもいいので、以下の記述をまるまるコピペで追加してください。

#main-contents a.button{
display: block;
background-image: url(先ほどアップしたボタン画像のURL);
background-repeat: no-repeat;
background-position: left top;
height: 0px;
width: 588px;
padding-top: 92px;
overflow: hidden;
position: relative;
}

#main-contents a.button:hover{
background-position:left bottom;
}

padding-topとwidthは、当サイトの画像素材置き場にあるボタン画像をそのまま使った場合を想定していますので、ご自身で用意されたボタン画像を代わりに使う場合には、そのボタン画像のwidthとpadding-topを指定してください。

これで事前準備は完了です。

ボタン画像を記事内に設置する

 
準備したボタン画像を最後は記事内に設置します。記事の投稿画面で、ボタンを設置したい箇所に以下のように記述してください。

この１行だけでOKです。ちなみに、ここでテキストで書いている「お申込みはこちら」は画面上には表示はされません。なので同じ内容を、先ほど作った画像ボタンに直接、書いてください。

今回は以上です！