エス技研

WordPress、CakePHP、PHP、baserCMSなどの Web系システムを中心に情報を提供します!


WP jQuery LightBoxでWordPressの画像を簡単に見やすくする方法解説

   

WP jQuery LightBoxで簡単にLightBoxを設置しページの見やすさを向上

 

WP jQuery LightBoxとは

 
WP jQuery LightBoxは、記事内に編集された画像を拡大表示する際に LightBoxを利用して表示する仕組みを簡単に提供するプラグインです。
 
20161001_wp_01
 
WordPressの標準的な機能では、記事内に編集された画像をクリックすると、画面遷移して、画像だけが表示されます。
その際、画面遷移して、HTMLが記述されていない画像だけのページに遷移しますので、ブラウザの「戻る」ではなく、「閉じる」をクリックしてしまうと、そのままページ閉じてしまうことになるため、ブログからの離脱になってしまうことがあります。
 
そのような使い勝手がよくない WordPressの標準的な画像のリンクを、LightBoxを利用して使い勝手を良くするためのプラグインが「WP jQuery LightBox」です。
「WP jQuery LightBox」は、LightBox効果を、プラグインをインストールするだけで利用できるようにしてくれる簡単設置のプラグインです。
 
 

WP jQuery LightBoxのインストール方法

 
WordPressのプラグインのインストール方法は、「WordPressプラグインの3つのインストール方法解説」に記事を書いていますので、そちらを参考にしてください。
 
 

WP jQuery LightBoxの設定方法

 
WP jQuery LightBoxの設定は、管理画面の左メニューの「設定」-「jQuery LightBox」から遷移します。
設定画面は、1画面の簡単設定です。
 
20161001_wp_02
 
設定項目は、中途半端に日本語になっていますが、英語の個所も問題ないレベルの英語だと思います。
 
 

自動的に画像(イメージリンク)にLightbox効果を適応する

「自動的に画像(イメージリンク)にLightbox効果を適応する」にチェックを入れることで、自動的に画像(imgタグ)に LightBox効果を適用します。
このチェックを外すとプラグインを利用する意味がなくなります。
 
 

コメント欄でLightbox効果を有効にする

「コメント欄でLightbox効果を有効にする」にチェックを入れると、コメント欄に編集された画像にも LightBox効果を適用します。
nofollow属性は無効になります。
 
 

Show title

チェックを入れるとタイトルを表示します。
 
 
画像に対して下記のように設定をしたとして説明をします。
20161001_wp_03
 
※ここでポイントとなるのは「添付ファイルの表示設定」の「リンク先」を「メディアファイル」に設定しておく必要があります。
 それ以外の設定では、LightBox効果は適用されません。
 
20161001_wp_04
 
 
【注意】
WordPressのメディアの仕様は、先の画像のように「タイトル」と「代替テキスト」の両方を入力して「投稿に挿入」を実行すると、imgタグには「代替テキスト」のみが編集されます。
ですが、手作業で「タイトル」と「代替テキスト」の両方を編集した場合は、WP jQuery LightBoxの処理としては「タイトル」が編集されます。「タイトル」がない場合は「代替テキスト」が編集されます。
 
 

Show caption

チェックを入れるとキャプションが表示します。
 
 

Show image numbers: “画像 # の #”

チェックを入れると「画像 # の #(画像 1の 5)」の部分が表示します。
 
 

ダウンロードリンクを表示

チェックを入れると「ダウンロード」のリンクが表示します。
 
 

Show image info on top

タイトルや、キャプションなどの情報を出す場所を上にするか、下にするかを指定します。
チェックを外すと下記のように画像の下に情報が表示されるようになります。
20161001_wp_05
 
 

スクリーンサイズに合わせて画像を縮小

「スクリーンサイズに合わせて画像を縮小」スマホなど画面が小さな端末で見た場合、画面サイズに合わせて自動的に縮小するか、しないかを設定します。
チェックを入れておきましょう。
 
また、「Minimum margin to screen edge」は、縮小する場合の画面の端からどれくらいマージンを取るか、という設定です。
デフォルトではマージン 0ですが、好みに合わせて設定しましょう。
 
 

Use custom stylesheet

自分用のスタイルシートが使えるようですが、どのようにして使うものなのか、確認をしていません。
 
 

Animation duration

LightBoxを表示する際のアニメーションとして、画面の上部から LightBoxが下りてくるのですが、これのスピードを設定することができます。
標準設定は 400で、0.4秒になるのですが、画像を読み込むスピードにも影響を受けますので、標準設定の 400くらいが無難なんじゃないかと思います。
 
 

Slideshow speed

「play slideshow」をクリックしてスライドショーを表示する場合の画面の切り替わりのスピードを指定します。
単位は「ミリ秒」なので、「4000」を指定した場合は「4秒」となります。
また、「0」を指定するとスライドショーを無効化することができます。
 
 

WP jQuery LightBoxの便利な使い方(How to Use)

 
WP jQuery LightBoxには、管理画面からは設定できない便利な使い方も用意されています。
 
20161001_wp_06
 
1.下記のように記述することで、WordPressの画像ギャラリーを使用して、グループ化して自動的に LightBox効果を得ることができます。
 

 
いまいち使い方が分かりませんでした...
 
 
2.下記の記述で、簡単に画像ギャラリーを設置することができます。
 

 
「ids」は、画像の PostIDを指定します。複数指定するときは上記のようにカンマで区切ります。
「group」は、何に使うのかがよくわかりませんでした。
複数のギャラリーに分ける場合は、複数のショートカットを記述することで別々のギャラリーとして指定できます。
 
 
3.下記のように、画像へのリンクに「rel="lightbox"」を追加することで、LightBox効果を付与することができます。
  オプションとして「title」属性でタイトルを指定することもできます。
 

 
 
4.上記の対応に関して、下記のように「rel」属性の値を統一することで、グループ化することができます。
  「rel」の値を複数設定すると、同一のものだけがグループ化されます。
  ページごとの上限はありません。グループもいくつでもOK!
 

 
 
5.自動的に設定される LightBoxを個別に無効にするには、リンクの属性に「rel="nobox"」を設定します。
 
 
6.「ダウンロード」をクリックしてダウンロードさせるファイルをカスタマイズする場合は、下記のように「data-download」属性を指定します。
 

 
 
7.無限スクロール(類似の無限スクロールプラグイン)を使用する場合は、新しいコンテンツを呼び出す際に、下記のように「doLightbox()」関数も呼び出す必要があります。
  ほとんどのプラグインには、新しくページが呼び出される際に呼び出されるコードの設定を持っています。
 

 
 

WP jQuery LightBoxのトラブルシューティング(Troubleshooting)

 
20161001_wp_07
 
WP jQuery LightBoxを使っていてトラブルが発生した場合は、助けを求める前に次の 3つのステップを試してみてください。
と書いてあります。
 
1.Make sure your site...
 
 
...ここは、実際にトラブルが起こった場合に翻訳をしてみたいと思います!

 - WordPress

GoogleAdwords

GoogleAdwords

最後までお読みいただきましてありがとうございます。
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです!

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

下記の空欄を埋めてください。 * Time limit is exhausted. Please reload CAPTCHA.

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

※入力いただいたコメントは管理者の承認後に掲載されます。

  関連記事

XAMPP環境で WP-DBMANAGERでの復元でDBが壊れる

XAMPP環境で WordPressの WP-DBMANAGERを利用して DBの復元をしたら DBが壊れた。

Theme My Loginでメール認証、管理者承認付の会員管理・基本編

会員管理をするプラグインTheme My Loginの解説。メール認証、管理者認証、reCAPTCHAによるいたずら登録を防止し、ログイン攻撃対応のセキュリティも備わっている。

WordPressのカテゴリ単位・フォルダ単位でBasic認証を設定する方法

カテゴリ単位でBasic認証を設定する方法の解説。WordPressのカテゴリはフォルダの実態がないですが、実は簡単な方法でプラグインも使わずにBasic認証を設置できます。

Custom Post Type UIでカスタムタクソノミーを設定し編集する方法解説

カスタムタクソノミーを追加、管理するプラグインCustom Post Type UIの使い方の解説。プラグインの解説ではあるものの、カスタムタクソノミーの仕様の解説でもある。

アクセス5倍増!FC2、seesaaからWordPressに引越結果をレポート

FC2、seesaaからWordPressに引越しでアクセス数がどう変わるかのレポート。canonical、meta refresh設定とWordPressの集客力の検証しています。

BackWPupでバックアップ・データベース保存の自動設定例

BackWPupその8。DBを毎日1回バックアップする具体的事例での説明です。

WordPressで ¥円マークが \バックスラッシュになる原因と対処方法

円マークがバックスラッシュに変換される。その原因と対処方法を解説します。原因はCSSでのフォント指定に欧文フォントも含まれるため欧文フォントで表示されること。

Advanced Custom Fieldsの関数の全部の使い方を調べてみた

Advanced Custom Fieldsに用意されている関数を全て調べてみた。よく使うget_field、the_field以外にも多くの関数が用意されていて、フォームを作成することも可能。

SI CAPTCHA Anti-Spamを使って WordPressのコメントスパム対策をする

コメントスパム対策として入力させない対策の一つとしてCAPTCHAという方法がありそれを簡単に実装できるプラグインSI CAPTCHA Anti-Spamの解説です。

Custom Field Templateで簡単にカスタムフィールドをフル活用

カスタムフィールドを簡単に設定するプラグイン。簡単にカスタムフィールドが管理で来て作業効率が数倍にアップします!