ブログなどサイト運営をする際、良く画像を貼りつけたりしますが、
それをもっと見栄えの良いカッコイイ画像加工出来たら?と思った事はありませんか?

WordPressを使用したサイトにおいて、そんな画像加工が出来るプラグインがありますので、今回は加工のやり方が違う2つのプラグイン「Shadows」「Jquery Colorbox」の導入方法と使い方について詳しく解説して行きます。

注)プラグインの設定方法はWordPressのバージョンアップで変わることがあり
解説とは異なる場合がございますので、予めご了承下さい。

画像加工プラグイン
 

 

 

 

 

 

Shadowsとは?

まずはじめにご紹介するのが「Shadows」というプラグインです。
Shadowsは画像の縁に影を付けてくれて
画像が浮き上がったように見え、かなり雰囲気が出て来ます。

 

Jquery Colorboxとは?

「Jquery Colorbox」は画像の外枠が黒く表示され、画像本体がLightbox形式という浮かび上がって見えるようになるプラグインです。

 

インストール方法

Shadows及びJquery Colorboxともにインストール方法は他のプラグインと同じですので
こちらを参照してインストールを行って下さい。
参照記事:【WordPressプラグインの基本的なインストール方法】

 

Shadowsの設定

Shadowsはインストールして有効化するだけで使えるようになりますので
特に設定の必要はありません。

 

Shadowsの使い方

Shadowsの使用方法は画像に影を付ける4つのパターンのタグを選択し、そのタグを埋め込むだけです。
以下が4つの埋め込みタグになります。

  • shadow_curl
  • shadow_flat
  • shadow_osx
  • shadow_osx_small

では、実際のタグの埋め込み方について表示結果と一緒に具体例でご確認下さい。

<img src=”画像URL”width=”400″ class=”shadow_curl”>


 

<img src=”画像URL”width=”400″ class=”shadow_flat”>


 

<img src=”画像URL”width=”400″ class=”shadow_osx”>

 

<img src=”画像URL”width=”400″ class=”shadow_osx_small”>

 

このように4つのパターンをHTMLタグに受けも込むことによってShadowsが自動で画像を影付きで加工してくれます。

 

Jquery Colorboxの設定

Jquery Colorboxはインストールして有効化すると、最初の段階では以下のようなエラー表示がされ使うことが出来ませんので、エラーを取り除き使用出来るようにして行きます。
画像加工プラグイン1

 

 

 

設定方法は簡単で管理画面(ダッシュボード)から「設定」⇒「Jquery Colorbox」をクリックし下図のような設定画面を開き、一番上にある「Automate jQuery Colorbox for all images in pages, posts and galleries:」にチェックを入れ「変更を保存」で完了です。
画像加工プラグイン2

 

 

 

 

 

 

 

 

 

 

 

 

 

Jquery Colorboxの使い方

Jquery Colorboxを有効化し起動させると、別ウィンドウで画像を開く設定になっていた場合において、画像をクリックするとページが黒くなりその画像が浮かび上がってくるという演出?をしてくれます。
(↓↓イメージ図)

 

なお、当サイトにおいてはJquery Colorboxの演出は必要ないので導入しておりませんが、
なかなか面白いプラグインですので、目立ちたい!そんな興味がある方は導入してみて下さい。