Drip 'n' Snip

ドリップン・スニップ

あなたの生活役立つWEB情報イッパイお届け
artboard

jQuery Lightboxでページの読み込みを早くしよう!


Wrodpressを使った画像系SEO対策記事2連続ですが、ご容赦くださいませ。

前回Tinypngのプラグインを使用した画像軽量化によるものでしたが、今回はちょっと変化球です。

そもそもWordpressに画像をアップロードすると4種類のサイズ作ってくれる

Original
サムネイル - 150x150
中 - 300x300
大サイズ - 1024x1024

この4種類が作成されます。設定によってはもっと沢山作成されます。
そして、通常はブログ記事内にその画像を貼り付けるわけですが、恐らく皆さまこういう基準で貼り付ける画像のサイズを選択されていると思います。

文字が沢山ある→文字が読める程度のサイズの画像
文字は含まれていないが大切な画像→大きめの画像
文字が含まれていないし雰囲気のためだけの画像→小さめの画像

共通して言えるのは、最も小さい画像ではなく、それが画像であるという効果が発揮できる程度のサイズである、という点。
しかし、実際にはブログのデザインを壊さない程度のサイズでは、文字は小さすぎる事が多いと思います。
かといって、クリックで画像に飛ぶようなリンクを作ってしまうと、ページが遷移してしまってユーザビリティが下がってしまう…。

そこで、jQuery Lightboxというプラグインを導入しましょう。

jQuery Lightbox

このプラグインを導入すると、自動的に画像へのリンクをLightBox形式に変更してくれます。
LightBoxがどんな形式かと言うと、画像が拡大して表示されて、他の場所をタップすると元のページの元の場所に戻る、というアレ。
これがあれば、掲載する画像はかなり小さいサイズ…サムネイルくらい小さいサイズに変更することが出来ます。
ユーザーは見たい画像だけ拡大して見れば良いので、ユーザビリティも下がりませんし、画像が小さくなった分だけページを読み込む速度が向上して、ユーザビリティはむしろアップしているかもしれません。文字も充分な大きさで見えるでしょうし。

jQuery Lightboxの設定

これが少しクセがあります。

jquery_lightbox_options__drip__n__snip_-_wordpress

このようにチェックしましょう。
特に、「スクリーンのサイズに合わせて画像を縮小」にチェックを入れる事が大切です。
入れておかないと、スマホで見た時に画面サイズより圧倒的に大きな画像が表示されて何もわからない!となってしまいます。

それと、画像をアップロードする時に、リンク先を「メディアファイル」にする事を忘れないでください。
%e6%96%b0%e8%a6%8f%e6%8a%95%e7%a8%bf%e3%82%92%e8%bf%bd%e5%8a%a0__drip__n__snip_-_wordpress
これを忘れてしまうと画像をクリックしても拡大されません!

まとめ

ちょっと昔に流行ったな〜という感じのLightBoxですが、やはりユーザビリティには大きく貢献してくれます。
まだご使用でない方は是非どうぞ!

NEXT
【スクリプトあり】p5.jsで簡単に要素にパーティクルを追加する

  関連記事

measure
Sketchを使っているデザイナ・ディレクタの皆さま必見!Sketch Mausreの本当のチカラ

[この記事はWEBデザイナもしくはWEBプロデューサ向けの記事になります。] [ ...

考えが巡ってまとまらない?アイデアが出ない?それなら「マインドマップ」を試してみたら?

人は一度にたくさんのことを考えられないもの。マインドマップを使って、頭のなかをスッキリ整理しよう!

artboard
静的なwebサイトなら、WordPressを使わずにphpのincludeでテンプレートエンジン化しちゃおう

今回はweb制作の話です。 こんにちは、基本的にWordpressでweb制作を ...

artboard
【2016年版】レンタルサーバ3選!/個人でブログを始めるなら?【初心者必見】

さて、前回副業としてブログを始めるにはどうしたらよいか、という記事を書きました。 ...

sagi
通販詐欺にあった記録と、通販詐欺の見分け方

こんにちは。 恥ずかしながら最近ネット上の通販サイトで詐欺にあってしまいました。 ...

-WEB開発, ノウハウ