記事内の画像へのマウスオーバーについて

Simplicityの特徴 フォーラム Simplicityについての質問 記事内の画像へのマウスオーバーについて

このトピックには4件の返信が含まれ、1人の参加者がいます。1 ヶ月、 1 週前 ごりまつ さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #51925

    ごりまつ

    初めまして、ごりまつと申します。
    Simplicity2を使わせていただいております。
    本当に初心者の私でも分かりやすく、いつも助けられています。

    今回は記事内の画像の件で質問があります。
    「リンク先を指定した画像」へマウスポインタを持っていくと画像が「透過」するのですが、このエフェクトを無効にするにはどうすればよろしいでしょうか。

    「リンク先を指定した画像」へマウスを持っていくと「マウス」だけが「指先カーソル」に変化するようにしたいのですが、色々と調べてみても分からなかったので質問させて頂きました。

    どうぞよろしくお願い致します。

  • #51926

    Hidekichi

    > 「リンク先を指定した画像」へマウスポインタを
    > 持っていくと画像が「透過」するのですが、
    > このエフェクトを無効にするにはどうすればよろしいでしょうか。

    画像効果はデフォルトでは、ボーダーを付けるかドロップシャドウしかなかったように思います。画像自体が透過しているのではなく、画像の上に何かしら色がかぶさっているとすればhover時に色を付けているということになりますし、画像自体を透過させているのであれば同様にopacityなどで透過させているかと思います。

    いずれにしてもhover時にそうなっているわけですから、その設定を変えればよいわけですが、カスタマイザーでそうなっているのか、スタイル側でそうなっているのか(どちらもcssですが、カスタマイザーでon/offがあるのかという意味です)は実際にどうなっているかを見ないとわかりません。

    何かしらプラグインを入れてそうなっているのかも知れませんし、あるいは何かしらで書かれているスタイルがたまたまその箇所に適用されているだけかも知れませんし、色々と状況は考えられますが、どれがどうなっているのでこうすれば直るという回答は言い切れないかと。

    まずは該当箇所がどうなっているかがわかるように、サイトアドレスを書いてもらう、Simplicityの公式ページで同様になっているような箇所があるかどうか探る、他のサイトで同様になっている箇所を探すなどして、その状態が見れるようにして下さい。

    状態がわかれば、何が原因でそうなっているのかがわかるので解決方法もあるかと思います。
    リンクを付けた画像だけではそうはならないと思うんですよね。例えば、公式のサイドバーにある新着とかのサムネイルはリンクがついた画像ですが、そうはなっていないでしょう?

  • #51928

    ごりまつ

    素早い対応ありがとうございます。
    もしかしたら私の不注意でカスタマイズ中にプラグインやCSSで仕様を変更してしまったのかも知れません・・・。

    サイトURLはこちらです。
    どうぞよろしくお願い致します。
    http://safarira.com/2016/10/31/post-276/

  • #51931

    Hidekichi

    原因としてはhead内に読み込まれているであろうstyleタグでのインラインスタイルのextension-style-inline-cssに書いてある、

    a:hover img { opacity: .8; filter: alpha(opacity=80); -ms-filter: “alpha(opacity=80)” }

    が原因です。このextension-style-inline-cssはよく見ますが何が書き出しているのかは知りません…と書いた後このスタイルが入っている位置を見て、lib/script.phpと当たりをつけ、その中身を見てみると、カスタマイザーの「その他→カスタムCSSを外部ファイルに書き込む」設定のものだと判明しました。

    これのチェックを外すか、読み込み位置的に子テーマstyle.cssの前ですから、

    a:hover img { opacity: 1; }

    とでも書いておけば直るかと思います。

    「カスタムCSSを外部ファイルに書き込む」はその説明にも書いてある通り、「※使用による不具合についてはサポートできません」ということですから、基本的にはチェックを外しておけばよいのではなかろうかと思います。で必要があれば、その必要に応じて子テーマstyle.cssにその必要な内容をスタイルすればよいだけの話ですので。

    ちなみにですが、質問とは関係ないんですけれども、

    a:hover img { -ms-filter: “alpha(opacity=80)”; filter: alpha(opacity=80); opacity: .8; }

    書くとすればこうです。おそらくは順番が混じっていてもたいていは動作するとは思いますが、cssは上から読み込まれていくので下のプロパティで上書きされると思います。もし下のプロパティがブラウザでサポートされていない物の場合スキップされるわけですので、サポートされているプロパティを上に書くほうが良いように思います。

    これらはcssのフォールバックであって、実際はopacity: .8が動作させたいわけですが、それが動作しないブラウザに向けてfilterがあり、-ms-filterがありということだろうと思うので、本来動作させるプロパティを最後に書いておけばたいていはそれで動作するはずなのです。

    例えば、

    .test { font-size: 18px; font-size: 1.125rem; }

    とあった場合、16pxが基準の場合はどちらも18pxで表示されますが、remがわかるブラウザはhtmlのフォントサイズに対する1.125倍と正しく理解できます。remがわからないブラウザは18pxで表示してremをスキップします。こういった違いが出る場合があるということです。まぁ細かく言えばですけどね。

    また現在サポートされているブラウザではopacityは全てのブラウザで対応していますから、filter:alphaなどはサポートが終了したIEの古いバージョンのものに対してなので、もう必要ありません。正しく見れないというのは必要な環境の人だけが実装すれば良いことで、大抵の場合サポートされたOSでサポートされたブラウザを利用しているでしょうから、一般的には無視するのがベターです。

    いつまでも古いブラウザにも対応しているとそれが足かせになり、いつまでも古いブラウザが淘汰されません。正しく見れる環境はfirefoxなりchromeで無料で手に入るわけですからいつまでも古いIEにこだわる必要はないということです。

  • #51932

    ごりまつ

    無事に解決する事が出来ました。
    詳しくお答え頂き本当にありがとうございます!

トピック「記事内の画像へのマウスオーバーについて」への新規返信追加は締め切られています。

スポンサーリンク
アドセンス(大)
アドセンス(大)