2013年03月06日

star_gold

【簡単!】スタイルシートだけで画像をロールオーバーさせる方法【seesaa】

【カテゴリ:ブログカスタマイズ
ブログ記事もちゃくちゃくと増えて、現在150の記事になりました♪
といっても、中にはTwitterからの投稿もあったりするので、しっかりと書いた記事はもう少し少なくなります。

と、だんだん記事が増えると共にブログもオリジナリティーをだしたいと、デザインなどをいじっております。

そこで、自分なりに調べたり試行錯誤しながら覚えたことを書いていきたいとおもいます。

今回はタイトル通り、CSSだけでブログ中の画像をロールオーバー(マウスカーソルを画像の上にもってくると画像が変化します)する方法を紹介。

seesaaで設定する場合。
登録はこちらSeesaaブログ



スクリーンショット 2012-10-23 18.51.42.png

デザインを選択して、使用しているCSSデザインを選択するとCSSの編集画面がでるので、下のCSSをコピーアンドペーストします。
挿入位置は一番上にでも入れればわかりやすいと思います。

このCSSはこちらのブログ
雑貨はデザイン様を参考にさせて頂きました。


a:hover img{
opacity:0.50;
filter:alpha(opacity=50);
-ms-filter: "alpha( opacity=50 )";
-moz-opacity:0.50;
}


挿入後、ページ下部にある「保存」をクリック。
これで終了。


画像のロールオーバーは画像を2枚用意しなければいけなかったり、いろいろ面倒なのですが、このCSSを入れるだけで画像がロールオーバーされているようになるのでとても助かります。

seesaaブログはスタイルシートやhtmlのカスタマイズがわかりやすいので気に入っています。
スマートフォン用のデザインテンプレートの種類が増えたらもっといいのですが。



最後まで読んで頂き、ありがとうございました♪


2012-10-23 19:20の記事
【ブログカスタマイズの最新記事】
posted by TakiOki at 20:39 | Comment(0) | TrackBack(0) | ブログカスタマイズ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/298701648
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。