項目別アクセス 集計

JTrim 007 / 凸凹ボタンの作成(HPのリンクボタン)

Enjoy JTrim > JTrim Lab > 加工アラカルト >
関連項目を見る  << 前ページへ  次のページへ >>
ご質問は 画像加工質問掲示板/Help Forum へどうぞ!

このページではホームページでよく使うメニューの選択ボタンを作ってみましょう。
とっても簡単にできますが,ちょっと工夫をすることによって動きが違ってきます。 下の2つのボタンにマウスを乗せてください。違いがわかりますね。右の方はナチュラルにボタンを 押した感じが出ています。これは 凹 ボタンに文字を入れる際 若干右下に文字全体をずらします。 ちょっと手間がかかりますが,それだけの効果は得られます。
動きの少ない静かなページには左のボタン,動きのあるページには右というように使うとよいかもしれません。
あなたもオリジナルのボタンを作ってみてはいかが!

凸凹ボタンの文字を同じ位置で作成 凹ボタンの文字の配置を右下に少しずらして作成









■作成過程
<No.1>
「ファイル」→「新規作成」で画像縦横サイズとキャンバスの色を決めてOK, ここでは160×20 キャンバス色「白」とします。

<No.2>
「グラデーション」の色1と色2でボタンの色を決めます。(「塗りつぶし」でもかまいません。お好きなほうでどうぞ!)

<No.3>
「イメージ」→「テクスチャ」で好みのボタン地にします。(「テクスチャ」を使うかどうかはお好みで!)

<No.4>
「編集」→「文字入れ」で文字を入力します。このときに「透過」を選択してください。
文字の配置はマウスのカーソルで移動できますので,適宜配置してください。

<No.5>
「加工」→「立体枠をつける」まず 凸 ボタンを作ります。

<No.6>
「ファイル」→「名前を付けて保存」で保存してください。

<No.7>
保存したら「元に戻す」で1回戻ってください。(文字をずらす場合はもう1回戻って文字を一旦消します。 もう一度「編集」→「文字入れ」から文字を配置します。このときに、凹の場合は 右下にちょっとずらすのがコツです。)

<No.8>
今度は 凹 ボタンを作ります。「加工」→「立体枠をつける」で「凹 ませる」にチェックを入れます。

<No.9>
「ファイル」→「名前を付けて保存」で保存してください。

HTMLソースの書き方

HTMLソースには次のように記述します。

<a href="リンク先のURL">
<img src="xxx.gif" border="0"
onMouseover="this.src='yyy.gif'"
onMouseout="this.src='xxx.gif'" alt="コメントを記載">
</a>

xxx.gif : マウスカーソルが乗っていないときの画像
yyy.gif : マウスカーソルが乗ったときの画像