Drip 'n' Snip

ドリップン・スニップ

あなたの生活役立つWEB情報イッパイお届け
スポンサーリンク

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

Pocket

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ですが、やはりユーザビリティには大きく貢献してくれます。
まだご使用でない方は是非どうぞ!

                           

  関連記事

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

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

最近良く聞くCDNって何…?XSERVEの「mod_pagespeed」とどちらが効果的?

こんにちは、rebuild.fmに癒やしを求める日々の僕です。 ところで、CDN ...

wordpressでファイルを配布したい時、FTPを毎回つなぐのは面倒だな…?

こんにちは、唐突ですが、Wordpressでファイルを配布したい時、ありますよね ...

WEBサイトの制作やWEBアプリの制作に興味がある?個人で勉強出来るサイトを順番に3つ紹介!

こんばんは。 ここのところ個人のスキルアップをひたすら頑張っている僕です。 とこ ...

【iOS11新機能】「アプリの使い方教えて」に答えるiOS11の画面録画機能

iOS11に追加された隠れた新機能「画面収録」で「iPhone教えて」を華麗に切り抜けよう!

-WEB開発, ノウハウ