<   2014年 08月 ( 85 )   > この月の画像一覧

画像にロールオーバー効果(マウスオーバー効果)をつけるかんたんな方法

ブログやホームページでリンクが設定されている画像にマウスを合わせると、画像が明るくなったり別の画像に切り替わったりすることがあります。

このことを ロールオーバー効果 とか マウスオーバー効果 などと呼んでいます。(以下、ロールオーバー効果)

ロールオーバー効果をつけておくと、そこにリンクが設定されていることが分かりやすく、クリックしてもらいやすくなります。

ロールオーバー効果をつける方法はいくつかあります。

マウスを合わせたときの画像を別に用意しておいて、JavaScriptスタイルシートで切り替えるやり方が従来は一般的でした。

しかし、設定対象の画像がたくさんある場合、例えばブログの記事に載せた写真をクリックして拡大表示して見てもらう場合には、別画像を用意する手間がわずらわしく、上記のやり方は現実的ではありません。

CSS3 によるロールオーバー効果

そのような場合は、CSS3 で追加された opacity というプロパティが手軽でけっこう役に立ちます。

スタイルシートに以下の行を追加するだけで、リンクが設定された画像にマウスを合わせたときに画像が明るくなります。
a img:hover {
opacity: 0.7;
}

さらに、CSS3transition プロパティを使うと画像がじわぁ~っと切り替わるようにできます。
a img {
transition: all 0.3s ease-in-out 0s;
}
a img:hover {
opacity: 0.7;
}


opacity と transition を使う上での注意点

opacity と transition はブラウザの種類やバージョンによっては動作しません。

例えば、WindowsXP で使われている Internet Explorer 8 以下のブラウザでは動作しませんし、Firefox だとじわぁ~っと切り替わりません。

より多くのブラウザ環境で期待した通りの動きをさせるためには上記に加えてさらに何行か書かないといけませんが、ブログに載せた写真に設定する場合のように
動かないブラウザがあってもあまり気にしない

というときには使えそうです。

ということで、このブログのスタイルシートに上記の設定を追加しました。
[PR]

by pc_klik | 2014-08-31 13:50 | ブログ TIPS

観葉植物などの鉢植えの植え替えをしました

過去にパソコン教室くりっくに飾ってあった鉢植えはけっこう多いのですが、その多くが枯れてしまいました。

いま思うに、植え替えをしなかったことが最大の原因でした。(たぶん)

植え替えの知識がなかったので、植え替えして枯らしてしまうよりも現状維持で・・・という考えでしたが、それではダメなんですね。

先日の青年の木の植え替え作業で段取りをそれなりに理解したので、今日の午前中に観葉植物などの鉢植えの植え替えを実行しました。

トラデスカンチア

d0015124_1615167.jpg


鉢から抜いてみたところ、中で根が伸びてとても窮屈そうでした。

幸い、根腐れ状態に進行していなかった(ように見えた)ので、また元気な葉っぱがたくさん生えてくることを楽しみにしています。

デンドロビューム

d0015124_1615536.jpg


鉢の中に根がびっしりと詰まっていて、ほとんどの根が乾いて(枯れて?)いました。

生きていそうな部分だけを残して、別の鉢に植え替えました。

茎(バルブと呼ぶらしい)の上のあたりから根が生えていましたので、そこを切り離して手前の鉢に植えておきました。

d0015124_1615790.jpg


胡蝶蘭

d0015124_162084.jpg


この鉢の中がいちばんひどい状態でした。

根がほとんど腐っていたので、腐った根を撤去してから植え替えておきました。

サンデリアーナ

d0015124_162376.jpg


鉢の中ではまだあまり根が窮屈になっていませんでしたが、小さいポットに入っていたので、早めに少し大きめの鉢に移しておきました。

今後は植え替えをきちんと実行しようと思います。
[PR]

by pc_klik | 2014-08-31 12:00 | 日記

今朝の菜園の収穫 ~ トマトとモロヘイヤ

d0015124_21104077.jpg

[PR]

by pc_klik | 2014-08-31 07:30 | 菜園

今朝は澄んだ青空が広がっています

今朝の散歩ルートは荒金~堂島です。

d0015124_2112419.jpg

d0015124_2112442.jpg

d0015124_21124651.jpg

d0015124_21124858.jpg

d0015124_21125083.jpg


澄んだ青空が広がっていて、今日はずっとこの天気が続いてくれるといいのですが、天気予報では夕方から雨です。
[PR]

by pc_klik | 2014-08-31 07:00 | 新潟県南魚沼市の風景

今日もまた激しい夕立ちになりました

d0015124_2115245.jpg


今日もまた激しい夕立ちになりました。

午前中はすごくいい天気だったのに・・・。

上流の水無渓谷でもかなり降っているようで、裏の水無川は水量が増えて激しい濁流になっています。

局地的な夕立みたいですね、西の空は晴れていますから。

窓を開けるとちょっと肌寒く感じるくらいに気温が下がってきました。
[PR]

by pc_klik | 2014-08-30 16:55 | 新潟県南魚沼市の風景

爽やかな秋晴れです、といっても・・・

今日の新潟県南魚沼市は爽やかに晴れています。

まだ8月ですが、気分は秋晴れです。

d0015124_21175459.jpg

[PR]

by pc_klik | 2014-08-30 12:40 | 新潟県南魚沼市の風景

今朝の ちゃむ ~ 布団の上で・・・

d0015124_21195342.jpg

[PR]

by pc_klik | 2014-08-30 08:45 | 犬・猫・etc

今朝の ジェム ~ テーブルにあごをのせてウインク

d0015124_21205335.jpg

d0015124_21205564.jpg

[PR]

by pc_klik | 2014-08-30 08:30 | 犬・猫・etc

今朝の菜園の収穫 ~ トマト

トマトはもうそろそろ終わりです。

d0015124_2121373.jpg

[PR]

by pc_klik | 2014-08-30 08:00 | 菜園

気分よく目覚めた朝の風景

d0015124_2122925.jpg

d0015124_2122111.jpg

[PR]

by pc_klik | 2014-08-30 06:10 | 新潟県南魚沼市の風景

魚沼情報サービスのホームページへ | パソコン教室くりっくのホームページへ | ブログトップ   昨日:   今日:   合計:
AX