1. TOP
  2. アメブロカスタマイズ
  3. マウスオンすると画像が透過するアメブロカスタマイズCSS

マウスオンすると画像が透過するアメブロカスタマイズCSS

画像にマウスをおいたときに、画像が透過して、ボタンのようになるアメブロカスタマイズを解説

アメブロで画像の上にマウスをおいたときに、画像が薄く透過されるように設定しておくと、この画像はクリックできるんだなと、アメブロ訪問者にイメージがしてもらいやすいですよね?

これにより、より見てもらいたいページへの誘導もしやすくなります。

今回はその方法を解説します

サンプルはこちらです↓:マウスを乗せると画像が透過します

o0300031211706270426

設定方法は、紹介するコードをCSS編集用画面の一番下にそのまま貼り付けるとできます。

ではコードをご紹介します。

※この設定は、画像を押したときにリンクの設定がされている場合に限ります。

アメブロ内のすべての画像を透過させる(おすすめ)

アメブロ内の画像の透過設定は以下の「参考コード①」を、CSS編集用画面の一番下にそのまま貼り付けるとできます。

 参考コード①

 

しかし、上記の設定は、アメブロの全体の画像全て(ヘッダー画像も含む)を透過してしまうので、それが嫌な場合は、上記①の使用はやめて、下記の部分的な透過設定をするとよいです。

たとえば、記事内の画像だけを透過させたいならば以下のコードをコピーして貼り付けてください

 

アメブロの記事内の画像を透過させるアメブロカスタマイズ

以下の参考コード②を、CSS編集用画面の一番下に以下のコードをそのまま貼り付けてください

参考コード②

 

そのほかに、もうひとつは、サイドメニューのフリースペースも透過させたいということならば、

アメブロのサイドバー内の画像を透過させるアメブロカスタマイズ

以下の参考コード③を、CSS編集用画面の一番下に以下のコードをそのまま貼り付けてください

参考コード③

 

これで設定は完了です。あなたの状況に応じて使い分けてみてくださいね♪

※この透過の設定は、画像をクリックできる状態(リンクの設定)のときのみ、マウスを乗せると透過する方法なので、ご注意くださいね

>>ページのトップへ

おすすめ

無料メルマガ
optin
自分で作るアメブロカスタマイズ