Image Elevatorプラグインで画像を挿入
最近、私の運営するWordPressブログに、Image Elevatorというプラグインをインストールしました。そこで発見したのは、このプラグインを使って挿入した写真などの画像のサイズが小さい割に非常にクリアだということでした。
これまでは、綺麗な画像を載せたくて、10MB以上の画像を平気でアップしていましたが、このプラグインのおかげで、最大数MBのファイルサイズで、十分に鮮明な画像を載せることができるようになりました。
実際に、他のソフトなどを使って同じ画像をWordpressに挿入して、これをImage Elevatorと比べてみました。その結果は、下の通りです。
Image ElevatorとPhotoshop、Marseditの比較
（Image Elevatorから挿入したオリジナルの画像 6240×4160MB 3MB）
（Photoshopから挿入したオリジナルの画像6240×4160 12MB）
（Marseditから挿入した 6240×4160の画像 12MB)
（Image Elevatorから挿入した画像 800×534 3MB）
（Photoshopから挿入した画像 800×533 534KB）
（Marseditから挿入 800×533 523KB)
（Image elevatorから挿入した600×400の画像 3MB）
（Photoshopから挿入した 600×400 の画像 316KB）
（Marseditから挿入 600×400 316KB ）
（Image Elevatorから挿入した400×267の画像 3MB)
（Photosohpから挿入した400×267 の画像 154KB）
(Marsedit から挿入 400×267 148KB)
（Image Elevatorでjpeg圧縮度を80％→40％に落とした結果 2MB）
（Image Elevatorでjpeg圧縮度を40%→20%にした結果 1MB ）
Image Elevatorでは、オリジナルの大きなサイズのファイルをWordPressに挿入するときに、指定した％で自動的に画像をjpegファイルに圧縮してくれます。最後の2つの画像は、それぞれ圧縮率を40%、20%に指定して挿入したものです。％の値が小さいほど、圧縮率が高いことを示しています。それだけファイルサイズも小さくなります。20%に指定したときのファイルサイズはわずか1MBでした。つまり、オリジナルのサイズの12分の1です。それでも、ごらんのように、非常に鮮明な画像が得られています。ブログには十分すぎる画質です。1MBなら、ブラウザで読み込むスピードも速く、ユーザーはストレスを感じなくても済むでしょう。MarseditやPhotoshopでは、こういったことはできないでしょう。Marseditを使っているブロガーの方々でも、このことを知れば、Wordpressビジュアルエディタ＋Image Elevatorに乗り換える動きが出てくるのではないでしょうか？
Image ElevatorとWordPressエディタの組み合わせ
それでは、Image Elevatorでどのように画像を処理し、Wordpressビジュアルエディタに取り込んでページ作成をするのでしょうか。CocoonテーマをインストールしたWordpressで、2カラムの写真を挿入するという例で説明したいと思います。
2カラムの枠をつくる
Cocoonには、2カラム、3カラムの枠をつくって、そこに写真やテキストを挿入して、2列の表示を簡単につくれる機能があります。（これは、従来はShortcodes Ultimateというプラグインで実現していました）。ビジュアルエディタの「タグ」メニューを開くと、2カラムと3カラムを選ぶことができます。ここでは、「2カラム（1:1)」を選びます。
すると、次のような、2カラムの入力ボックスが表示されます。
そこで、左側と右側のボックスに、画像を読み込みます。ここでは、いま作成中の英語ブログから画像を借りてきたいと思います。「Real英会話」という人気英会話アプリの一場面です。左側には、吹出しつきの会話文、右側には1フレーズの読み上げ練習を入れます。
Image Elevatorの設定
そこで、Downloadフォルダに保存しておいた画像ファイルを立ち上げ、「編集」→「コピー」の操作でファイルをクリップボードに貼り付けておきます。
次に、ビジュアルエディタのメニューにあるImage Elevatorのボタンを押して、次のような設定画面を出します。
ここで、CSS classesというのは、画像にどのような装飾をつけるかを指定するclass名を入れるところです。shadowImgは、画像にシャドウ自動的につけてもらうためのCSSを指定しています。
Image Resizingでは、画像のサイズを変更できるのですが、ここでサイズを小さくすると、不鮮明な画像になってしまうので、これは無視して、Image Compression（画像圧縮）だけを指定します。先ほどの実験で、20%という高い圧縮を行っても十分に鮮明な画像が得られることがわかったので、20%に指定しました。
指定が終わったら、「Update Rules」のボタンを押して設定画面を閉じます。
画像の読み込み
そこでいよいよ画像をビジュアルエディタに読み込むわけですが、その操作は簡単です。キーをカラムの左欄に置いた状態で、Macの場合は、Commadキー＋V （Windowsの場合はコントロールキー＋V)を押すだけです。画面に挿入中の丸い印がしばらく回転します。そして、シャドウつきの写真が左カラムに挿入されます。
同じようにして、右側のカラムにも画像を挿入します。
あとは、カラム上の不要な文字を消し、2つの画像にキャプションをつけるだけです。これは、テキストエディタを使ったほうが速いです。
実際に、この記事を投稿して、ブラウザで見ると、次のような感じになります。
画像の編集
もちろん、これでも十分ですが、画像のサイズをもう少し小さくしたいと思うことがよくあります。そんなときは、画像をクリックすると、「編集」することができます。
ここでは、画像のサイズを幅300pxくらいにするため、「カスタムサイズ」を選び、そのサイズを入力します。これで、表示画像のサイズが希望通りに変わります。うれしいことに、画質はもとのままで変わりません。ブログでは、写真のサイズをどのくらいにするかは、重要なプロセスです。Marseditでは、こうしたことは、画質を落とさないとできないので、これは致命的な問題点といえるかもしれません。
このようにして、Image Elevatorとビジュアルエディタを組み合わせれば、思い通りの美しいスタイルのブログを作成することが可能になります。みなさまもご参考にしていただければ幸いです。