記事内の元画像と拡大後が同じ大きさであれば、拡大表示機能は不要。カーソルが矢印から指に変わるので、なんらかのリンクがあると誤解する場合がある。ユーザビリティ向上のため、余計な機能は解除しよう。
拡大表示機能って何？
下のGIFアニメで示すとおり、画像にカーソルを合わせてクリックすると大きな画像が表示される機能。PC表示で利用可能。
試しに上の画像をクリックしてみてほしい。同じサイズであるにもかかわらず、画像がセンターに再表示される。スマホ表示や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。
一文字だけ追加している理由は、複数の文字を追加するよりも手間が少ないから。
所感
読んでくださる方のユーザビリティを損なわないよう少しずつ配慮していきたい。