はてなブログ記事の画像を『クリックできなくする』3つの方法

image-click

ブログ記事画像の拡大クリックを回避したい!

 

ブログを書く上で欠かせない画像ですが

 

はてなフォトライフから貼り付けた画像の場合

 

パソコンで画面上の画像にカーソルを持って行くと、またはスマホの場合は指で画像をタップすると画像のみを表示できるようになっていますよね

 

これ無駄だなぁと常々感じておりました

 

てか拡大だったらデバイス上で指広げればできるやん

 

いっその事クリックできないようにしたい

 

なんとかできないものなのか…

 

その理由と参考サイト

image-click2

画像をクリックできなくしたい理由としては

 

  • 無駄なクリック箇所を減らすことでクリックができる場所が明確になる(収益性の向上)
  • モバイルでのスクロールの際に起こる誤クリックが無くなることでユーザーの不快感を減らす(ユーザビリティの向上)
  • 上記の項目によりユーザーの記事に対する集中を促す(ユーザビリティの向上)
  • 単純に邪魔(操作性の向上)

 

などです

 

しかしそんな事が可能なのか?

 

と思ったら

 

こちらに詳しく書いてありました

psn.hatenablog.jp

 

ぽけっとしすてむさま本当にありがとうございます!

 

 

画像非クリックのやり方

work-with-mac

HTMLで書き換え

やり方はいくつかあるそうですが

 

画像のHTMLで

 

f:id:xxxxxxxxxxxxj:plain]

 

の plain のところを

 

f:id:xxxxxxxxxxxxj:image]

 

という風に一つ一つ手書きで書き変えるという方法があります

 

 

記事を書く際のHTML編集画面で画像にある上記のような部分を見つけ行えばできるはずです

 

plainをimageに書き換えていくというやり方は、全てに適応するとなると手間なのですが、特定の画像のみ適応させたい!という時に使えるでしょう(あんま無いかもだけど)

 

 

フッターにコードを1行追加するだけ

もう一つはぽけっとしすてむさまが書かれているjQueryを使って書き換えていくというやり方

 

後者のほうが圧倒的に楽に全ての画像に適応できます!

 

コードは是非下記サイトから取得してください、コピペでフッターに貼り付けるだけで簡単にできますので。

 

psn.hatenablog.jp

 

 

これで無事に画像を意図的にクリックできないようにできました!

はてなフォトライフから画像を貼り付けている方は是非試してみてください

 

 

Flickrを使って画像を貼り付ける

Flickrから画像を貼り付ければクリックで画像の拡大はできなくなります

 

ちなみに僕の場合は画像の貼り付けにFlickrを使っているのでもともと画像のクリックはできない仕様にしています

 

ただしFlickr画像貼り付け時には画像のHTMLを調節されることをオススメします

 

そういった方法もありますので是非ご参考にされてください!

 

www.flickr.com

 

 最後に

では実際に画像のクリックをできなくすることで効果はあったのか?ということですが

 

正直ハッキリとした結果はわかりません

 

しかし故意に行っているものと、意図せずになってしまっているものとではブログに対する考え方が違うのと

 

ユーザビリティの向上ブログの差別化を図る上での一つになるのではないかと睨んでいます

 

是非ご参考にされてください

 

 

尚、こういったコードを使ってカスタマイズをする際は自己責任で行うのと、念のために必ずバックアップを取ってからおこなってくださいね!

 

 

以上、「はてなブログ記事の画像を『クリックできなくする』3つの方法」でした

 

最後までご覧いただきありがとうございました!

ブログ
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
もしよろしければシェアお願いいたします
muddydaddy3をフォローする
スポンサーリンク
どろんこあそび

コメント