Bookmarklet メモ

自分用のメモも兼ねて小技ブックマークレットを2つ紹介。

どちらもWebサイト上の画像表示を調整するものです。
最近どうも色々なサイトで大きなサイズの画像を目にする機会が増えた気がしています。
「大きなサイズ」というのはここではページのbody幅ほぼ一杯とか、要は表示面積が大きいという意味です。

ページデザイン的な流行りというのもあるかもですが、個人的にはあまり好きじゃないです。
昔気質な画像サイズ(この場合データサイズも)は必要以上に大きくすべきではない、という意識もありますし。

後はやたら多くの画像が表示されるページとか、そこまで必要か?と思ったり。
中には単純に広告関連の画像がウザいという場合もありますが。

と前口上が長くなりましたが(^^;)
とにかく、そういうページでいっそ全画像を非表示にしてしまおう!というのが以下のブックマークレットです。

javascript:(function(){var%20h=document.body.getAttribute("data-x-hidden_f");if(h){h=null;document.body.removeAttribute("data-x-hidden_f");}else{h="hidden";document.body.setAttribute("data-x-hidden_f","on");}for(let%20e%20of%20document.images){e.style.visibility=h;}})()Hidden Images(←ブックマークレットとして登録できます)

ページが表示されたら、このブックマークレットをクリックすれば画像が全部非表示になります。
もう一度クリックすると表示されます。(トグル動作です)
※ただし元々hidden属性だった画像まで表示される場合があるので注意。

(7/25:修正)最初に挙げたコードだと、例えばいわゆる「次ページ」等にページ遷移した際に前の状態が残って余計な1クリックが必要になったりしたため、修正しました。

非表示まではしたくない、という場合もあります。その場合はこっち。
各画像の縦横サイズを最大150ピクセルに抑えて(小さくして)表示します。
ちなみに画像の上にマウスカーソルを乗せると元サイズで表示されます。
※ただし縦に細長い画像には反映されない場合があります(そうそう無いという前提)
(下記コード中の”150px”部分はお好みのサイズに変更しても良いです)

javascript:(function(){var%20h=document.getElementsByTagName("head")[0];var%20s=document.createElement("style");s.innerHTML="img%20{max-width:150px%20!important;height:auto%20!important;}img:hover%20{max-width:100%%20!important;opacity:1.0%20!important;}";h.appendChild(s);})()Shrink Images(←ブックマークレットとして登録できます)

・・・とか、ちょっと技術紹介記事っぽく書いたけど、まぁあまり他人の目には触れないだろうから自分用(笑)