まずは4つのボタンの上にマウス（矢印）をのせてみてください。

どうでしょうか？

上の2つのボタンの方が、クリックしたくなりませんか？

あなたのよく見るサイトでも、上の2つのようなボタンやバナーがたくさんあると思います。

あなたのサイトに来る人も、きっと無意識のうちに「ベタ貼りの画像」より「動きのあるボタンやバナー」に慣れていると思います。

ちょっとした工夫で、ちょっとだけクリック率もあがるかもしれませんね♪

このページでは、その方法をご紹介します！

 ▼コードだけ知りたい方はこちら

今回の方法は、他のページのように「HTML」をいじるだけではできません。

「CSS」というものも一緒に記述してはじめて成り立ちます。

他の方法もありますが、このサイトでも使用している方法を、はじめから解説します。

オンマウスで画像を透過させるには、

1. 「HTML」で、その画像に名前（分類名、クラス名）を付ける
2. 「CSS」で、その名前（分類名、クラス名）の付いた画像の動きを指示する

というような作業が必要です。

そこで使用するのが、「画像のURL」です。

＜A．Jimdoの場合＞

Jimdoの特性上、＜B．Jimdo以外の場合＞の方法で取得したURLは変わってしまうとの記事を拝見しました。

指摘の通り、表示ができなくなる不具合が生じたため、Jimdoで作成しているサイトの場合はこちらの方法をお試しください。

１．新しく非表示のページを１つ作る。

（★新しいページの作り方が分からない方はこちら）

2．「新項目を追加」から「フォトギャラリー」を選択してURLを取得したい写真をアップロードする。

（★「フォトギャラリー」が分からない方はこちら）

 ※「写真」で１つ１つアップしてもよいが、「フォトギャラリー」の方がこの作業の場合は楽です。

４．３．までの作業が終わったら一度サイトのページの一番右下にある「プレビュー」をクリックする。（編集画面のままだとURLがおかしくなってしまいます）

プレビュー画面の状態で、ページの何もないところにマウスのカーソルを持っていき「右クリック」→「ソースの表示」を選択

出てきた英語みたいな文字列の中から、３．で付けた画像の名前を探します。その前にある

<img src="http://・・・・>とある"　"で挟まれた

http://・・・　の部分がその画像のURLです。

<a ><img class="toka" src="画像のURL" 

alt="※" /></a>

その画像をからリンクを貼りたい場合は、

<a href="リンク先のページURL">

<img class="toka" src="画像のURL" 

alt="※" /></a>

↓下のコードをコピーしてそのまま貼り付ける

<style type="text/css">

/*<![CDATA[*/

<!--

a:hover img.toka

{

  opacity:0.6;

  filter:alpha(opacity=60);

  -ms-filter: "alpha( opacity=60 )";

}

-->

/*]]>*/

</style>

ちなみに、STEP３のように「CSS」に記述したことは、そのサイト全体に適用されるので・・・

<a ><img class="toka" src="画像のURL" alt="" /></a>

というHTMLように、「toka」部分を同じ名前（クラス名）にした画像すべてが透過されることになります。

このサイトでも、バナーなどの<img src="・・・" alt=""/>という部分に、

class="toka" 

というコードだけ「img」と「src」の間に貼り付けているだけで、バナーが透過するようになっています。

＞＞「HTML」　超簡単！基礎の基礎

　■部分的に文字の大きさを変える

　■部分的に文字のフォント種類を変える

　■オンマウスで画像を変える

　■オンマウスで画像を曇らせる

　■見出しのデザインを変える（見出しに背景を付ける）

＜＜簡単！ホームページのカスタマイズ＋α

▲ページTOPへ

HOME｜jimdoでHPをつくる｜Jimdoを始める方法｜リンクの貼り方

各コンテンツの使用例｜HTMLのいじり方｜相互リンク募集中！