マウスオンすると画像が透過するアメブロカスタマイズCSS
画像にマウスをおいたときに、画像が透過して、ボタンのようになるアメブロカスタマイズを解説
アメブロで画像の上にマウスをおいたときに、画像が薄く透過されるように設定しておくと、この画像はクリックできるんだなと、アメブロ訪問者にイメージがしてもらいやすいですよね?
これにより、より見てもらいたいページへの誘導もしやすくなります。
今回はその方法を解説します
サンプルはこちらです↓:マウスを乗せると画像が透過します
設定方法は、紹介するコードをCSS編集用画面の一番下にそのまま貼り付けるとできます。
ではコードをご紹介します。
※この設定は、画像を押したときにリンクの設定がされている場合に限ります。
アメブロ内のすべての画像を透過させる(おすすめ)
アメブロ内の画像の透過設定は以下の「参考コード①」を、CSS編集用画面の一番下にそのまま貼り付けるとできます。
参考コード①
1 2 3 4 5 |
a:hover img{ -ms-filter: "alpha( opacity=80 )"; filter: alpha( opacity=80 ); opacity: 0.8; } |
しかし、上記の設定は、アメブロの全体の画像全て(ヘッダー画像も含む)を透過してしまうので、それが嫌な場合は、上記①の使用はやめて、下記の部分的な透過設定をするとよいです。
たとえば、記事内の画像だけを透過させたいならば以下のコードをコピーして貼り付けてください
アメブロの記事内の画像を透過させるアメブロカスタマイズ
以下の参考コード②を、CSS編集用画面の一番下に以下のコードをそのまま貼り付けてください
参考コード②
1 2 3 4 5 |
.skinArticleBody2 a:hover img{ -ms-filter: "alpha( opacity=80 )"; filter: alpha( opacity=80 ); opacity: 0.8; } |
そのほかに、もうひとつは、サイドメニューのフリースペースも透過させたいということならば、
アメブロのサイドバー内の画像を透過させるアメブロカスタマイズ
以下の参考コード③を、CSS編集用画面の一番下に以下のコードをそのまま貼り付けてください
参考コード③
1 2 3 4 5 |
.freespaceArea a:hover img{ -ms-filter: "alpha( opacity=80 )"; filter: alpha( opacity=80 ); opacity: 0.8; } |
これで設定は完了です。あなたの状況に応じて使い分けてみてくださいね♪
※この透過の設定は、画像をクリックできる状態(リンクの設定)のときのみ、マウスを乗せると透過する方法なので、ご注意くださいね