ギャラリーとライトボックスを使って複数の写真を見やすく表示する方法

今、コワーキングスペース八王子8Beatのコンテンツを作っています。スペースについて説明するのに写真がたくさんあった方がいいかなと思いました。
その際、多くの写真を並べたり、クリックしたときに拡大表示させるためにギャラリー機能とライトボックスプラグインを使っていい感じになりました。
その方法について書きます。

WordPressに付属しているギャラリー機能で複数の写真を表示する

固定ページに複数の写真をWordPressに付属しているギャラリー機能で貼り付けます。

ギャラリーを貼り付けたい箇所で

メディアを追加 をクリック

ギャラリーを作成 をクリック

ギャラリーに使いたい写真を Ctrlキー を押しながら複数選択します。選択後、ギャラリーを作成 をクリック。

ギャラリーを編集 画面になります。

順序を変更したければ、写真をドラッグして順序を入れ替えます。

右側に ギャラリーの設定 という箇所があり、表示するカラムの数や写真のサイズなどを指定できます。ここでは、

写真をクリックしたときに拡大表示できるように、リンク先メディアファイル にしておきます。



ギャラリーを挿入
をクリック

テキストタブで編集していると、このように

ギャラリーが挿入されました。表示してみると、

このように指定した写真がギャラリーとして表示されました。

ここに表示されているのは、

写真をメディアに追加してから キャプション という部分に追加した文章です。

写真をクリックすると、

固定ページから、写真がブラウザに表示されたページになります。ここから固定ページに戻るには、

ブラウザの 戻る をクリックするしかありません。ちょっと使い勝手が悪いですね。

ライトボックスのプラグインを使って写真をクリックしたときに拡大表示する

写真をクリックしたときにライトボックス形式で表示して、使い勝手を良くしたいと思います。ライトボックス形式とは画面を移動することなく、クリックした画像が手前に拡大表示されるようにすることです。

以前

画像をクリックすると同じ画面でポップアップされ、ちょっとかっこいい感じに表示してくれる機能を一般的にライトボックスというようです。 WordPressに簡単にライトボックス機能

この記事で、ご紹介したプラグイン Easy FancyBox を使いたいと思います。

ダッシュボード プラグイン>新規追加 をクリック

Easy FancyBox と入力してリターン

このプラグインの 今すぐインストール をクリック

ボタンが 有効化 になるのでクリックします

プラグインが有効化されて、プラグイン一覧に移動します。これでインストールが終了します。

固定ページに挿入したギャラリーの写真をクリックすると、

このように写真がポップアップします。とても見やすくなりました!

写真の右の方にカーソルを持って行くと  が表示され、クリックすると、

次の写真が表示されます。

写真の左には  が表示されて、クリックすると前の写真に戻ります。

クリックしたときの動きを動画でご覧ください↓

gallery

クリックしたとき、閉じるときにふわっとしたエフェクトで表示されるのが心地いいです。

まとめ:ライトボックスの別のプラグインも試してみました

今回ちょっとだけ別のライトボックスのプラグインを試してみました。

wp-jquery-lightbox というプラグインです。このプラグインを入れて表示すると、

gallery2

このようにエフェクトキャプションの表示などが少し違う感じの動きになります。このプラグインもなかなか評判がいいようなので、この辺は好みによってプラグインを選ぶといいかと思いました(^^)/

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る