目次
ブログ記事画像の拡大クリックを回避したい！
ブログを書く上で欠かせない画像ですが
はてなフォトライフから貼り付けた画像の場合
パソコンで画面上の画像にカーソルを持って行くと、またはスマホの場合は指で画像をタップすると画像のみを表示できるようになっていますよね
これ無駄だなぁと常々感じておりました
てか拡大だったらデバイス上で指広げればできるやん。
いっその事クリックできないようにしたい
なんとかできないものなのか…
画像拡大を回避する理由と参考サイト
画像をクリックできなくしたい理由としては
- 無駄なクリック箇所を減らすことでクリックができる場所が明確になる(収益性の向上)
- モバイルでのスクロールの際に起こる誤クリックが無くなることでユーザーの不快感を減らす(ユーザビリティの向上)
- 上記の項目によりユーザーの記事に対する集中を促す(ユーザビリティの向上)
- 単純に邪魔(操作性の向上)
などです
しかしそんな事が可能なのか？
と思ったら
こちらに詳しく書いてありました
ぽけっとしすてむさま本当にありがとうございます！
はてなブログでの画像非クリックのやり方
HTMLで書き換え
やり方はいくつかあるそうですが
画像のHTMLで
f:id:xxxxxxxxxxxxj:plain]
の plain のところを
f:id:xxxxxxxxxxxxj:image]
という風に一つ一つ手書きで書き変えるという方法があります
記事を書く際のHTML編集画面で画像にある上記のような部分を見つけ行えばできるはずです
plainをimageに書き換えていくというやり方は、全てに適応するとなると手間なのですが、特定の画像のみ適応させたい！という時に使えるでしょう（あんま無いかもだけど）
フッターにコードを１行追加するだけ
もう一つはぽけっとしすてむさまが書かれているjQueryを使って書き換えていくというやり方
後者のほうが圧倒的に楽に全ての画像に適応できます！
コードは是非下記サイトから取得してください、コピペでフッターに貼り付けるだけで簡単にできますので。
これで無事に画像を意図的にクリックできないようにできました！
はてなフォトライフから画像を貼り付けている方は是非試してみてください
Flickrを使って画像を貼り付ける
Flickrから画像を貼り付ければクリックで画像の拡大はできなくなります
ちなみに僕の場合は画像の貼り付けにFlickrを使っているのでもともと画像のクリックはできない仕様にしています
ただしFlickr画像貼り付け時には画像のHTMLを調節されることをオススメしますが
そういった方法もありますので是非ご参考にされてください！
最後に
では実際に画像のクリックをできなくすることで効果はあったのか？ということですが
正直ハッキリとした結果はわかりません
しかし故意に行っているものと、意図せずになってしまっているものとではブログに対する考え方が違うのと
ユーザビリティの向上やブログの差別化を図る上での一つになるのではないかと睨んでいます
是非ご参考にされてください
尚、こういったコードを使ってカスタマイズをする際は自己責任で行うのと、念のために必ずバックアップを取ってからおこなってくださいね！
以上、「はてなブログ記事の画像を『クリックできなくする』３つの方法」でした
最後までご覧いただきありがとうございました！
