何でもありのカオスなブログ

画像をポップアップで表示させたい!そんな時はjQuery Colorbox使おうぜ!

      2015/02/12

みんな普通にやってるけど、アレってどうやるの!?

そんな全国1万2千人のWordPress初心者の方、ご安心を!
これを読めば、たった5分でブログの画像がポップアップするようになります。

さぁあなたもレッツ・トライ!

SPONSORED LINK

jQuery Colorboxで画像をポップアップさせる!

画像をポップアップで表示させるWordPressプラグインjQuery Colorbox

プラグインjQuery Colorboxを追加する

まず、WordPressの管理画面に行き、プラグイン>新規追加jQuery Colorboxを検索してインストールします。

インストールが終わったら、有効化しましょう。有効化した後に

jQuery Colorbox 警告

このような警告が出ると思いますが気にしなくてOK!設定が終わると警告は消えます。

jQuery Colorboxを日本語化する!

そのままだと、英語で設定しづらいので日本語化しましょう!
日本語化のファイルは

jquery colorbox 日本語化ファイル

こちらからDLできます。

DLが終わったら、解凍してFFFTPなどで日本語化ファイルをアップロードしましょう。
解凍した全てのファイルを wp-content / plugins / jquery-colorbox / localization の中に入れればOK!

日本語化が終わったら、設定>jQuery Colorbox で設定ページへ移動します。

jQuery Colorboxの設定

日本語化すれば設定は簡単だと思うので特に説明はしません!
代わりに自分の設定を載せておくので参考にしてみてください。

jQuery Colorbox 設定1

画像にズームオーバーレイを追加するにチェックを入れると、画像にカーソルが重なった時に虫眼鏡のマークが出るようになります。全部が全部ポップアップで見てもらうわけじゃないので外してます。

jQuery Colorbox 設定2

jQuery Colorbox 設定3

スマホで画面から画像がはみ出さないように、最大値を100%に設定。

また、いちいち?を押さないと画像が消えないのはめんどうなので「不透明部分をクリックすることで~」にチェック!

一番下の不透明度は0が透明で1に近づくにつれて不透明になります。自分は本文も多少見えるようにひとまず0.5にしています。

おわりに

インストールして日本語化してしまえば簡単に設定できるので5分もかからないかも?
これでオサレなブログに1歩近づいた!

 - プラグイン