オンマウスで画像に枠線をつけてみよう。 - 初心者でもできる画像の編集+加工

ブログURL変更のお知らせ

いつも「初心者でもできる画像の編集+加工」をご覧いただきありがとうございます。

このたび、ブログURLを変更しましたのでお知らせいたします。新しいURLは以下のとおりです。

新URL:https://gazocustomize.xyz/

旧URLにアクセスしても新しいURLに転送されるようになっています。

今後も「初心者でもできる画像の編集+加工」をどうぞよろしくお願いします。

GIMP編集
無料画像編集ソフトGIMP2.8で画像の編集+加工の記事一覧はこちら

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

オンマウスで画像に枠線をつけてみよう。

501.jpg

ドロップシッピングのショップ作成時、商品が沢山あるページがあると思います。

商品画像にカーソルをあわせると、色のついた枠線をつける方法です。

もしもドロップシッピングで人気の商品「やさしいジョイントマット」の画像でサンプルを作ってみました。

3r.jpg1r.jpg2r.jpg


商品画像にカーソルをあわせると赤い枠線がでできますね。

これは、CSSで実装しています。

では、早速実装方法です。



まずは、HTMLから


画像に枠線をつけたいテーブルタグなど


画像に枠線をつけたいテーブルタグなどを囲います。

続いて、CSS

/* 画像枠赤 */
.waku a img {border:2px solid white}
.waku a:hover img {border:2px solid #ff0000}


CSS一番下に記述してくださいね。

以上で実装完了です。

あとは、自分の好きな枠線の太さや色を調整してみてくださいね。

【サンプル】
3r.jpg1r.jpg2r.jpg


この記事を読んだ人はこんな記事も読んでます



Comment
非公開コメント

Track Back

http://gazocustomize.blog.fc2.com/tb.php/49-9d91cab4

スプレッドで比較

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。