読者です 読者をやめる 読者になる 読者になる

にちじょうみだれがき

役立ち情報から雑記まで幅広いジャンルを展開するブログ。

【はてなブログ】記事中に挿入した画像の拡大機能を一括で解除する方法

おはようございます@chihayuu_です。
今日は久しぶり?にブログカスタマイズ記事です。カスタマイズって言っていいのか不安になる内容ですが。さっそく書いていきます。

行ったカスタマイズは、タイトルにも書いた通り、画像の拡大機能を解除しました。やみくもに解除したのではなく、ちゃんと理由があります。

画像の上にマウスを持っていくと、カーソルが指マークになりますよね?
これだと、画像にリンクがあると誤解されてしまうかもしれません。クリックしても出てくるのは拡大された画像だけです。あれ?これって、見てる側からしたら紛らわしいだけじゃない?と思い拡大機能を解除しました。


解除の仕方は至って簡単!!このコードを追加するだけです。

.hatena-fotolife{
  pointer-events: none;
}

試しにクリックしてみてください。
f:id:ChihaYuu:20141015221234j:plain

このコードを追加することで拡張機能は解除されます。これで、画像上にマウスを持っていっても指マークはでなくなります。リンクだと誤解される可能性が減りました。また、右クリックで画像を保存も出来なくなるので、勝手に画像を保存されたくない人は追加することをおすすめします。

ちなみに上記コードは「はてなフォトライフ」を利用して、記事編集サイドバーの「写真を投稿」から記事に写真を挿入した写真が対象となっています。
写真を投稿以外の方法から挿入しても、挿入したコードにidとかclass付けて、pointer-events: none;してやればクリック出来なくなるでしょう。
試してないのでどうなるかわかりませんが・・・。

以上!画像の拡大機能を解除する方法でした。拡大機能解除したかった!という人は是非使ってください。head要素に追加するか、デザインCSSに追加すればいいだけですので。


この記事を気に入っていただけたら、はてなブックマークやツイッター等でシェアしていただけると、非常に嬉しく励みになります。

スポンサーリンク