目次

  1. Lightboxとは?
  2. Simple Lightboxとは?
  3. インストール〜有効化
  4. 機能
  5. Simple Lightboxの使い方

1. Lightboxとは?

ウェブページのサムネイル画像をクリックした時に、別の画面に遷移したり、ポップアップウィンドウを立ち上げたりせず、黒色半透明の背景が画面を覆った上に拡大画像を表示させることができるJavaScriptプログラムで開発者はウェブアプリ制作者のLokesh Dhakar氏(Lightbox公式サイト
米国「The MIT License」にライセンス登録され、商用・非商用に関わらず無料で使用できるという事で、開発者の方々がこぞって開発し派生したスクリプトやプラグイン等が大量にあり、ブログ全盛期の時、画像を表示させる時に良く使われてましたね〜。
かくいう管理人もSereneBachでサイト構築していた時はSereneBach作者が作成したLightbox Plusを仕込んで使用していました。

下のサムネイル画像をクリックして頂けるとLightboxがどんなものか分かるかと思います。
スライドショーを設定しているので6秒経過すると次の画像に遷移します。

2. Simple Lightboxとは?

簡単に WordPress サイトに Lightbox の機能を追加できるシンプルでカスタマイズし易いプラグインです。
WordPressにインストールするだけでデフォルトの設定のままでも十分に効果を発揮する事が出来て過去の記事も編集しなくても大体はOKです。(一部編集しなければならない時もありますのでご了承下さい)
2021年3月13日記事公開時点の最新バージョン:2.8.1

3. インストール〜有効化

  • 公式プラグインディレクトリにリリースされているのでWordPressのダッシュボードから「プラグイン」メニューの「新規追加」を選択
  • 右上の検索ボックスに「Simple Lightbox」と入力
  • 検索結果の上の方に表示されると思うので「今すぐインストール」をクリックする

  • インストール完了したら「今すぐインストール」のボタンが「Activate」に変わるので「Activate」をクリックしてプラグインを有効化する。

4. 機能

  • Lightbox の動作を変更させるには、管理者メニューの中の外観 > Lightboxをクリックして下さい。またはインストール
    済みプラグイン一覧から Simple Lightbox の下の設定からでも可能です。

  • 機能一覧を書きに記載しますが、細かい所を気にしなければデフォルトのまま変更しないでも使用出来ます。
  • 機能変更方法は、ほとんどがチェックボックスになっているのでオン・オフをして下方にある変更を保存ボタンをクリックすると動作変更となります。

  1. 有効化
    1. Lightbox機能を有効にする
    2. ホームページで有効にする
    3. 投稿ページで有効にする
    4. 固定ページで有効にする
    5. アーカイブページ(タグやカテゴリーなど)で有効にする
    6. ウィジェットを有効にする
    7. メニューで有効にする
  2. グループ化
    1. スライドショーのためのグループ項目
    2. 投稿ページのグループ項目
    3. ギャラリー項目を別々にする
    4. ウィジェット項目を別々にする
    5. グループメニュー項目を別にする
  3. UI
    1. テーマ
      1. UIでライトを設定
      2. UIでダークを設定
    2. ウィンドウサイズに合うようにLightboxのサイズを調整する
    3. アニメーションを有効にする
    4. スライドショーを自動的に再生する
    5. スライドまでの時間(秒)
    6. 項目をループさせる
    7. オーバーレイの透明度(0-1)
    8. デフォルトのタイトルを有効にする
  4. ラベル
    1. 閉じるボタン
    2. ローディング時のプログレスバー
    3. 次の項目へのボタン
    4. 前の項目へのボタン
    5. スライドショー開始ボタン
    6. スライドショー停止ボタン
    7. スライドショーステータスのフォーマット

5. Simple Lightbox の使い方

デフォルト設定のまま、もしくは設定の変更が完了したら、早速使ってみましょう。

設定でトップページ(ホームページ)、投稿ページ、固定ページ等を『有効化』(デフォルトで有効)したページであれば、画像を挿入する際に『リンク先』に『メディア』を指定するだけでLightboxを設定する事が出来ます。

リンク先』に『メディア』を指定しないと拡大表示出来なくLightboxでも
表示も出来ないので注意して下さい。



LimeCounter Plugin Previous post [SB Plugin] LimeCounterプラグイン v0.30 リリース
ol要素の入れ子のナンバリング Next post ol要素の入れ子で親の番号を引き継いでのナンバリング方法

コメントを残す