今日は画像表示の簡易カスタマイズについて。
はてなブログは、写真を投稿する形で投稿した画像は、
デフォルトで、カーソルもってってクリックしたら、
拡大表示されてしまうんですよね。
拡大というか、投稿した時のサイズで表示されてしまいます。
これはクリックした時の挙動が、拡大、に設定されているため。
たとえば、下記のような画像を埋め込んでいたら、、
ここにカーソルもってってクリックしたら、
この表示になるっていう。
これ、結構うっとおしくて困っておりました。
なぜ拡大されるのか。
たとえば、最初のウサギのイラストの場合、HTMLはこんな表記。
<img class="hatena-fotolife"
title="f:id:.....:1234678910p:plain".......>
1行目のhatena-fotolifeっていうのが、 その表記にする指令を出しているようです。
つまり、ここの指令を無効にしてしまえば、上記のような動作はおきないということ。
方法１.
HTML編集で、「hatena-fotolife」の表記を適当にかえる。
何でもいいです。ここを削除でもよいし、一文字追加とかでも大丈夫。
hatena--fotolifeにしてもいいし、hatena-fotolifesにしてもいいし。
これで、拡大表記にしたくない画像への指示を変えてしまえばＯＫ。
方法２．
一個ずつなんて面倒くさい！ってときは、一括で解決する方法がありました。
CSSでhatena-fotolifeの指令を変えてしまえばよいのですね。
こちらのブログを参考にさせて頂きました。
リンクを貼らせて頂きます。
【2019/4/28★追記】■■■■■
貼らせて頂いていたページが
なくなってしまっていました。(´；ω；`)
…ので、ここに記載します。
/*画像クリック拡大なし*/
.hatena-fotolife{
pointer-events: none;
}
これをCSSのところに貼り付ける。
とりあえずウチのサイトではこれ使えているので、まだ使えるかと。
■■■■■
無事変更できました。
すっきりした～°˖✧◝(⁰▿⁰)◜✧˖°
補足：
なお…
これらは、画像を完全にダウンロードできないようにする方法ではないようですので、
そういうことをお求めの場合は、また別の話になるかもしれません。
上記以外に、拡大表記じゃなく、
fotolifeに直接アクセスさせることもできるようです。
「:plain」を「:image」に変えるらしいのですが、単純にこれだけではダメでした。
きっと何か方法があるのでしょうけど、、(*´Д｀) 力尽きた。まあいいか。
※はてなさん曰く、fotolifeっていう名前は、
あえて、のようです。スペルミスではなくて。(*'▽')
