サイトにLIGHTBOX効果を付けるWORDPRESSプラグイン『JQUERY COLORBOX』の設定方法

今回はワードプレスのサイト運営を彩るプラグインを紹介します。

はじめに「Lightbox」ってご存知ですか??

Lightboxとは、サイトの画像をクリックした時に、

画像だけをその場で浮き上がらせる効果の事です。

例えばこれ、、

g13

こんな感じで浮き上がります。

わざわざ訪問者が、別の画像ページに飛ぶ必要がなくなるので、

「面倒くさいページに飛んでしまった。」「閉じるのが面倒だからクリックしたくない」

などのことがなくなります。また、別リンクに飛ばないメリットから、訪問者の滞在時間が長くなると思います。

なのでワードプレスを使っていく方は、是非導入してもらいたいです。(今ではかなり当たり前になってますが)

『jQuery Colorbox』のダウンロード

『jQuery Colorbox』を簡単に設定する方法を説明しますね!

まずいつも通りプラグインから「jQuery Colorbox」と検索してダウンロードしてください!そしてダウンロードしたら有効化ですね。

ちなみに制作者サイトはこちらです。直接ダウンロードされる方はこちらからダウンロードしてくださいね。
WordPress › jQuery Colorbox « WordPress Plugins

jQuery Colorboxの日本語化

まずは日本語化poファイルをダウンロードします。jQuery Colorboxの日本語化に関しては、おれだめ通信 のneuvecomさんが作成したpoファイルを、WaterCream`s Blogのwatercreamさんがさらに手を加えて公開されているそうです。
(管理人様、紹介させて頂きます。)

jQuery Colorbox 日本語化poファイルをダウンロード(wp-jquery-colorbox-ja-43.zip)

jquery-colorbox-ja.moとjquery-colorbox-ja.poがでるので、それぞれ/jquery-colorbox/localization/の中にアップロードしてください。

これで日本語化は終了です。管理画面で確認してみてくださいね。

参考サイト:おれだめ通信様
jQuery Colorbox プラグインの日本語化
参考サイト:WaterCream`s Blog様
jQuery Colorbox 日本語化poファイル

『jQuery Colorbox』の設定

g3

jQuery Colorboxを有効化したら、上の画像のように赤い警告文が表示されます。

英語の意味は、「jQuery Colorboxプラグインは画像に対してLightboxを有効にする設定になってないです。」という意味です。

そしたらWordPress管理画面の設定の中からjQuery Colorboxの設定画面を開いてみてください。

g4

上記のような画面がでると思います。

 

jQuery Colorboxは、上から3つのチェックボックスのいずれかにチェックを入れる事によって初めて動きます。

・Automate jQuery Colorbox for all images in pages, posts and galleries:

投稿やページ内の画像にcolorbox-classを自動的に追加します。また、WordPressギャラリーにも追加します。1つの投稿やページ内の画像を自動的にグループ化されます。

 

・Automate jQuery Colorbox for images in WordPress galleries only:

自動的にcolorbox-classをWordPressギャラリーの画像だけに追加します。 1つの投稿やページ内の画像を自動的にグループ化されます。

 

・Automate jQuery Colorbox for all other images:

その他の画像にのみLightbox効果を付加します。(サイドバーなど、ちょっと特殊な設定です。)

 

一番おすすめは、一番上の設定です。試してみてくださいね。

 

また初期設定としてオススメを紹介します。

・Remove link from Meta-box:

Meta-boxからjQuery Colorboxの作者へのリンクを外します。

・Add JavaScript to footer:

jQuery ColorboxのJavaScriptコードをフッターに持って行ってくれます。

・Close Colorbox on overlay click:

 

Lightboxで画像を表示した時、画像以外のところをクリックすれば画像を閉じる事が出来ます。チェックが入っていない場合、Lightboxの❌印をクリックしないと閉じないので少し面倒なのでチェックしてみてください。

 

お疲れ様でした!設定は以上です!

この記事はあなたのお役に立てたでしょうか?

ブログランキングへ破ってみませんか?

破る

ビリビリビリ・・。


本日も破って頂きありがとうございました(´∀`)
dogezas.gif

 
看板      
お名前 メールアドレス
記事を読んで少しでも興味深く思われましたら、
以下のソーシャルメディアボタンで共有してもらえると青春野郎は喜びます!

yaji-006

コメントを残す




CAPTCHA