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

はぴらき合理化幻想

海外3年/西成ドヤ2年/沖縄2年/事故物件で寝袋3年目、ミニマリスト10年目でダンボール2箱の持ち物と保存食で大阪に定住中。

はてなブログに挿入した画像のクリック拡大表示を簡単に解除する方法

記事内の元画像と拡大後が同じ大きさであれば、拡大表示機能は不要。カーソルが矢印から指に変わるので、なんらかのリンクがあると誤解する場合がある。ユーザビリティ向上のため、余計な機能は解除しよう。

拡大表示機能って何?

下のGIFアニメで示すとおり、画像にカーソルを合わせてクリックすると大きな画像が表示される機能。PC表示で利用可能。

拡大表示機能をGIFアニメで再現

試しに上の画像をクリックしてみてほしい。同じサイズであるにもかかわらず、画像がセンターに再表示される。スマホ表示やFeedlyの方はPC表示でご覧あそばせ。

本来は、次のスライム画像のように元画像よりも大きな画像をLightbox風に表示する機能。スライムをクリックで大きな画像が表示されるよ。

はぴらきさんが描いたスライム

拡大表示機能のHTML構造

下図で示すはてなブログ標準の画像アップロード機能で画像をアップロードすれば、挿入されるHTMLは定型的になる。

「みたまま編集モード」を使っている人は下図で示す部分をクリックでHTMLを確認できる。

上記スライム画像のHTMLは次のとおり。

<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/h/hapilaki/20140508/20140508203025.png" alt="f:id:hapilaki:20140508203025p:plain" title="f:id:hapilaki:20140508203025p:plain" class="hatena-fotolife" itemprop="image"></span></p>

見やすいように改行した。

<p>
<span itemscope itemtype="http://schema.org/Photograph">
<img
 src="http://cdn-ak.f.st-hatena.com/images/fotolife/h/hapilaki/20140508/20140508203025.png"
 alt="f:id:hapilaki:20140508203025p:plain" title="f:id:hapilaki:20140508203025p:plain"
 class="hatena-fotolife"
 itemprop="image">
</span>
</p>

一文字追加するだけで機能停止

プログラムが拡大表示機能を使うかどうかを上記コード内のclass="hatena-fotolife"で判定する。

このclass="hatena-fotolife"がなければ、その画像に対して拡大表示機能が働かない。

class="hatena-fotolife"をまるごと削除してもいいが、次のように一文字追加するのが楽だ。

class="h-atena-fotolife"

これなら後から拡大表示機能を有効にする場合にハイフンを削除するだけ。別に上記挿入箇所に限定されない。hate-na-fotolifeでもhatena-foto---lifeでもOK。ハイフンでなくてもOK。

一文字だけ追加している理由は、複数の文字を追加するよりも手間が少ないから。

所感

読んでくださる方のユーザビリティを損なわないよう少しずつ配慮していきたい。

Amazon.co.jp: HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。

Amazon.co.jp: ドラゴンクエスト メタリックモンスターズ ギャラリー スライム: おもちゃ

てすとてすと