このブログではなくて、仕事として作っているウェブにちょっとした問題が発生して12時間以上ぶっ通しで作業した勢いでこの記事を書き始めたでででーさん(@d3_dayo)です！
予期せぬトラブルというのはツライものですな！夜中に実は問題が生じていることにシレッと気づいて、今日はずっと夜中から作業していました(^_^;)
改めて、バックアップのとり方だったり、諸々のリスクヘッジについて考えさせられたので、たまには良からぬトラブルも良い経験になることでしょう！
ブログを書いている皆様におかれましても…特にデザインをカスタマイズするのが好きだという方は、手慣れていたとしてもバックアップは忘れずにとるようにしましょう（笑）その本当にちょっとした手間が、もしも何かあった時に…必ず自分を助けてくれるはずです！
さて、今日はさすがにちょっとヘロヘロなんですが、それでも記事更新はまだまだ毎日続けたいよということで、思考停止で書くことができるネタになってしまい申し訳ありませんが、今日は1つCSSでも紹介しようと思います。
画像にマウスオーバーすると、その画像が透過されて白い膜に覆われたような感じになる、このマウスオーバー効果はよく見かけると思います。
このマウスオーバー時の透過効果をガッツリとブログ内の画像全体に適用する際のCSSは以下です。
/* 画像マウスオーバー時の透過 */ img:hover { opacity: 0.5; /* ここの数字を変えると透過の度合いが変わります */ }
その昔、ホームページ(静的ページ)を弄りだした頃は、単純な透過でもかなりすごいって感動しまくったことを憶えています！しかし、それから10年以上は余裕で経ってるので…もう、さすがに、毎度毎度この効果、個人的には飽きてきていますΣ(´∀｀；)
なので、今回は私が最近ハマっている(なんとなく好き)マウスオーバーすると画像がモノクロになる効果のCSSを紹介したいと思います！ガッツリと画像全体に適用するだけなら、この記事に掲載するコードのコピペだけでOKです。
マウスオーバーした画像がモノクロになるCSS
/* 画像マウスオーバー時に画像をモノクロにする */ img { -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -o-filter: grayscale(0%); -ms-filter: grayscale(0%); filter: grayscale(0%); transition:0.5s; /* ここの数字を変えると色が変化する速度が変わります */ } img:hover{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); }
「transition:0.5s」の部分は数字を「0.9」とか大きくすると、よりフワっとした色変化に見えます。
上記のコードをはてななら管理画面から「デザインCSS」に貼り付けるだけで、ブログに挿入している画像にマウスオーバーした際にモノクロのエフェクトがかかるようになります。
あとは最近トップページの記事一覧をカード型で1列2記事表示にしているブログをけっこう見かけるので(このブログもそうです)そのレイアウトにしている場合の、アイキャッチ画像にマウスオーバーした際、モノクロになるようにするためのコードも載せておきますね。
/* カード型アイキャッチマウスオーバー効果 */ .page-index .entry-thumb-link { -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -o-filter: grayscale(0%); -ms-filter: grayscale(0%); filter: grayscale(0%); transition:0.5s; } .page-index .entry-thumb-link:hover{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); }
この山形の人 (id:igube)のブログとか、まさにカード型の記事一覧にしていますが、アイキャッチにマウスオーバーしても何も反応がないのもちょっとした違和感をおぼえる時があるので…ぜひ、試してみてくださいね(名指しで試せという司令を送ってるようなものですねｗｗ)
というわけで、今回はマウスオーバーした画像がモノクロになるCSSを紹介しました。あ、もちろん！はてな以外でも使えますからね（笑）
はてな以外の人もぜひぜひ試してみてください(^^)
もし、部分的にこの効果を施したくて、でもCSSでどこを指定していいのかわからない場合などは、コメントかツイッターでご質問頂ければ回答します！
ちなみに…Milliardで関連記事を表示している人は(そしてパネル表示にしている人)はちょっとこれを使用する時は気をつけたほうが良い感じです。というのも、Milliardのパネル表示だと記事カード上にタイトルが表示されますが、このコードとバッティングしてうまく表示されなくなる可能性があります。MilliardのほうCSSで弄れば問題はないのですが…面倒くさいと思うので…Σ(´∀｀；)
他にもカスタマイズ関係で役立つかもしれない記事はこんなのもあります！
www.d-3.siteでででーさん
www.d-3.site