「jQuery Lightbox」を使って画面サイズに合わせたスタイリッシュな画像表示をする!

スポンサーリンク

「jQuery Lightbox」でかっこ良く画像を表示させる!

ブログは文字情報が主になりがちですが、たまに画像を入れる事によりメリハリのある読みやすいページになります。また、画像を用いて説明をする場合もありますよね。画像を貼付けてみたはいいが、クリックすると「新しいタブが開いて面倒」だったり「スマホで見たら大きすぎて画面に収まらない」というようになかなか画像の扱いは難しいものです。

そんな時に便利なWordpressプラグインが「jQuery Lightbox」です。

20131008jQuery Lightbox02

おなじみプラグインの新規インストールページで「WP jQuery Lightbox」と検索すると一番上に表示されます。

インストールをし終わったら設定を開き、「自動的に画像(イメージリンク)にLightbox効果を適応する」と「スクリーンサイズに合わせて画像を縮小」にチェックを入れます。その他もお好みで!

20131008jQuery Lightbox01

すると、新しく投稿する記事はもちろん、元々あった記事の画像もスタイリッシュに表示されます。

画面サイズに合わせた表示が可能

実際に表示させる例をお見せしましょう。まずはPC表示です。このように、表示しているページの上に被さるように、レイヤーとして表示されます。

20131008jQuery Lightbox03

続いてスマートフォンで見てみましょう。iPhone 5で表示するとこんな感じになります。

20131008jQuery Lightbox04

いかがでしょうか。きちんとスマートフォンの画面サイズに合わせて表示することができますね!

WordPressでブログを運営している方におすすめです!

コメント