エス技研

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


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

      2017/03/09

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.

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

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

  関連記事

WordPressグローバルナビ・メニューの編集の方法解説

グローバルナビであるメニューの編集方法の解説です。メニューの管理画面の使い方の解説と設定のポイント、テーマによって設定する項目が違う点などを解説します。

ロリポップでWordPress+Basic認証で不具合発生!回避方法解説

ロリポップサーバでWordPressを使いBasic認証を設定する際には注意しないとWordPressが動かなくなる場合も!その回避方法を解説します。

WordPressのカテゴリやタクソノミーにカスタムフィールド項目を追加する方法

WordPressのカテゴリやタクソノミーに編集する項目を追加する方法の解説。Advanced Custom Fieldsを使うと簡単。テンプレートに記述する方法も解説。

Crayon Syntax Highlighterでソースコードをキレイに編集する設定方法

PHP、HTMLなどのソースコードを紹介する際に見やすく編集してくれる Crayon Syntax Highlighterの設定の方法、利用方法の解説です。

BackWPupでバックアップ・エラー発生の具体的対処方法事例6

BackWPupその6。エラーが起こったときの対処方法の具体例紹介です。

WordPressの Google XML Sitemapsで WebMaster Tools用の sitemap.xmlを生成

WordPressの Google XML Sitemapsで WebMaster Tools用の sitemap.xmlを生成する方法を説明しています。

PoeditでWordPressの日本語対応方法。英語プラグインの日本語翻訳ファイル作成

プラグインの日本語化の手順のまとめ。.pot、.po、.moファイルの解説や便利ツールの Poeditの紹介を行いつつ、手順、ファイル設置場所、注意ポイントなども紹介。

MW WP Formの使い方詳細解説・WordPressの確認画面付フォーム

WordPressの確認画面付お問い合わせフォームプラグイン「MW WP Form」の詳細解説をしています。

Better Delete Revisionを使って WordPressのリビジョンを削除する方法

自動的に溜まるリビジョンは Better Delete Revisionを使うことで簡単に削除することが出来ます。表示の重さを軽減したり、バックアップファイルのスリム化に貢献します。

Custom Post Type UIでカスタムタクソノミーを設定・バージョン1.4対応解説

カスタムタクソノミーをプラグインCustom Post Type UIを使って設定する方法の解説。バージョンアップにより設定する項目も増え続け、より柔軟な設定が可能に。