自作画像ボタンの設置

ご自身で作られた画像ボタンを配置する部品です。


記述内に <a href="#"> が見つかると思います。 この # の部分にリンク先のアドレス等を記入してリンクを貼ります。

os
ご自身で作られた画像ボタンの設置部品 大・中・小
3
3
3
作成の解説

画像ボタンを作る際に文字も含めた画像ボタンを作ってください。サイズはだいたいでも構わないので大ボタンぐらいにしてください。ちなみに上記の画像は横が487ピクセルで大きめに作ってあります。 ボタンの大 中 小 は同じ画像を使い大きさを変えています。


ボタン画像は2枚数作ります。 2枚は同じ大きさにしてください。

1枚は、 ますすが乗らない時のボタン画像です。 名前の最後に _a とします。上記サンプルの画像は sample1_a.jpg こんな名前です。参考まで。

2枚目は、マウスが乗った時のボタン画像です。 こちらは名前の最後に _b  とします。 2枚のボタンは _a _b以外は 同じにします。

参考例ですと

sample1_a.jpg  sample1_b.jpg こんな感じです。


作られた画像は、 「 user-photo 」フォルダーの中に作ったフォルダーにアップしてください。
場所は、 「 wp-content 」フォルダーの中の、 「 fthemes 」フォルダーの中の、 「 wordpress-landingpage 」フォルダーの中の、
「 image 」フォルダーの中の、 「 user-photo 」フォルダーの中に作った登録フォルダー内にアップしてください。ワードプレスは階層が深いので注意してアップしてください。


部品を配置したら コード記述を見ると
<img src="image/user-photo/sample1_a.jpg" width="100%" height="auto" alt="3">
こんな画像タグが見つかると思います。

ピンクの sample1_a.jpg の部分を作った画像の_a の方の名前にします。

これでホバーボタンが動き出すと思います。

os