どうも！フジグチです！
以前書いた、ホバー時に”ふわっ”とさせるカスタマイズの記事↓
これを書いたあとに読み返していて、「なんか分かりづらいな...」と思っていました。
PCで見るとカーソルを合わせるだけで画像が浮くので良かったのですが、スマホから見るとある程度画像を押さないと浮く感じが見えないので、
画像を押し込む→画像がポップアップされる→ホバーアクション（画像が浮く）が隠れる→”ふわっ”とさせる感じが伝わらない。
となっていました。
ポップアップしてもたいしてサイズも変わらず、大したこだわりも無く設定したアイキャッチまでポップアップされるのもイヤなのと、そもそも「サイトの画像ってこんなにポップアップされた？」
と不思議に思い調べてみました。
はてなフォトライフが原因
はてなブログでは画像を記事にアップロードすると"hatena-fotolife"というclassが自動付与され、画像がポップアップ表示出来るようになるみたいですね。
ということはこのclass="hatena-fotolife"の部分をHTML編集で削除すればいいのです。
間違ってもalt="～～～"の部分は消さないでください！SEO的にも評価が下がる可能性があります。出来るだけalt属性は入れましょう！
検証してみる
それぞれの画像をクリックして確かめてください。
※”ふわっ”とするのは付けたかっただけです。
そのままアップした画像
class="hatena-fotolife"を消してアップした画像
これでクリックしても、余計なポップアップが表示されなくてよくなりました！
記事数も少なかったので、ポップアップが必要ないところの修正が楽に済みました！
えっ？
記事数多い人はめんどくさくてやってられない？
ポップアップを無効にするCSS
消したい人がどれくらいいるかは分かりませんが、CSSで消す方法も見つけましたので貼っておきますね。
img.hatena-fotolife {
pointer-events: none;
}
このCSSをデザイン→カスタマイズ→デザインCSSに貼り付ければ消すことが出来ます。
ただこれだとすべての画像がポップアップされなくなるので、見せたい画像がある時は個別にstyleでpointer-events: auto;を指定していかなければなりません。
私も最初は「消してもスマホならピンチアウトすれば問題ないかな～」と思ったのですが、自分の記事の画像を見ながらPCで作業してくれる人が居た場合のことを考えて、適宜仕分けてやっていこうと思います。
お読み頂きありがとうございました。
