OnePress Image Elevatorプラグインで画像貼り付けを簡単に!有料バージョンも使ってみました

今回はワードプレスにおける画像貼り付けプラグインをレビューします。

ハウツー記事スクリーンショット画像が必須

このブログは、ブロガー御用達のWordPressで書いているんですが、

Howto記事などでは画面のスクーンショット画像が必須ですね。

スクリーンショットとは
コンピュータのモニタもしくはその他の視覚出力デバイス上に表示されたものの全体または一部分を写した画像のこと。略して、スクショとも呼ばれる。

wikipediaより


↑ こういった画像です。画面を切り取った画像のことですね。

ブログ記事への貼り付けが面倒…

しかし、プラグインなしだと、

  1. スクリーンショットを撮る
  2. 保存されたスクリーンショットをアップロードする
  3. アップロードした画像を記事に貼り付ける
  4. 表示する大きさや配置などを整える

という、いささか面倒な作業が必要になってきます。

OnePress Image Elevatorとは

そこで、「OnePress Image Elevator」というプラグインを導入します。

このプラグインを使うことにより、

  1. スクリーンショットを撮る
  2. 記事にペースト(貼り付け)する

だけでOKになります!

スクショだけに限らず使える
スクリーンショットの他に、単純に画像をコピーして記事に貼り付ける、というふうにも使えます。
Macのスクリーンショットの撮り方

「⌘ + shift + control + 3」同時押しで画面全体のスクショをクリップボードに取得

「⌘ + shift + control + 4」同時押しで選択した部分のスクショをクリップボードに取得

できます。あとは記事内の貼り付けたい場所にペースト(⌘ + V)しましょう。

プラグインは基本無料で使える

「OnePress Image Elevator」プラグインは、有料プランもありますが、

無料でも十分使えます。

ぜひ一度インストールして使ってみてください。

有料バージョンでできること

無料バージョンでも有用なプラグインですが、有料バージョンの利点をあげます。

設定可能な項目が増えます。設定は投稿作成画面のボタンから行います。

自動でCSSを追加できる

設定で「CSS classes」というところがありますが、

こちらに任意のClassを書けば、HTMLに自動で挿入されます。

コード
<img class="img_border aligncenter" alt="" width="" height="" />

ビジュアルエディターからテキストエディターにかえてHTMLコードを確認してみると、

↑このようにClassが挿入されています。

補足
当ブログで使用している有料テーマ「SANGO」では、

  • img_border で画像に枠線をつける
  • aligncenter で画像を中央配置

というCSSが組み込まれていますので、このスタイルを使用しています。

自分でCSSに追記する場合は

コード
img.img_border {
    border: 3px solid #f0f0f0;
}
img.aligncenter {
    text-align: center;
}

のようにCSSを追記しましょう。

つまり、この設定を行っておくことによって、

画像を貼り付けるだけで「画像が中央に配置され、枠線をつける」ことが自動で行われるということですね。

CSSは応用がききますので、他にも自分の好みのCSSを設定できます。

画像の大きさを指定できる

「Image Resizing」でサイズを指定することによって、

貼り付け時の画像の最大の幅・最大の高さを調整できます。

例えば「Siza 680 px / 400 px」と指定すると、

画面いっぱいを撮影した 1980*1080 サイズのスクリーンショットでも

680*370 の大きさに自動で縮小されます。

幅だけの設定がオススメ
Siza 680 px / 400 pxのように設定すると、縦長の画像を貼り付けるときに想定以上に小さくなってしまうこともあります。

そうしないためには縦サイズは空欄にしておき、最大幅だけ設定しておくのがオススメです。

なお、「Crop to fit」にチェックを入れると、縦横比は維持されずに切り取られます。

龍之介

僕は画像を変に切り取られたくないので「Crop to fit」のチェックは外してあります。

「Save original images」にチェックを入れると、

フルサイズの画像も一緒にアップロードされます。

大きい画像もアップロードしておきたい場合にチェックしましょう。

龍之介

チェックを入れると、どの画像も「メディア」に2枚ずつアップロードされることになり、邪魔なので普段はチェックを外してあります。

「Image compression」にチェックを入れるとJPGで保存されるようになります。

PNGは劣化しないのが利点ですが、風景などの写真の場合はファイルサイズが大きくなりがちなので、ファイルサイズを節約したい方はチェックを入れておくとファイルサイズを抑えられます。

バグ?「テキストとしてペースト」には要注意

バグなのか仕様なのかはわかりませんが、

画像をコピーしてから記事内に貼り付けるときに、

「テキストとしてペースト」が有効になっていると画像が貼り付けできません。

 

「メディア」にはアップロードできていますが、

それも「下書きを保存」するなどして画面を一度更新しなければ確認できません。

龍之介

これがわかるまで、「あれ?反応しないなぁ」と苦労しました。そのあと「メディア」を確認したら同じ画像が何枚もアップロードされていました…

「テキストとしてペースト」は使っていたので不便ですが、しょうがないですね。

今は「テキストとしてペースト」は普段OFFにして、必要な時だけONにして使っています。

画像のタイトルを直感的に変更できるが…

貼り付けた画像にカーソルを乗せると、右下に画像の名前が浮き出てきます。

この状態で、文字列をクリックすると、その場で画像のファイル名(タイトル)を書き換えることができます。

注意
ただし、ファイル名に日本語は使えません。

試しに日本語を使用したところ画像が表示できなくなりました。

英数字とハイフンなどの記号だけを使いましょう

プレミアム(有料)にアップグレードする方法

料金はどのくらい?
プレミアムバージョンの価格は $13(約1,400円)の払い切りです。

一度支払えば継続して使えます。

購入手順

WordPressのメニューから「Image Elevator」を開き、

「Upgrade for $13 only!」を開きます。

購入サイトが開くので、「Buy Now」からアカウントを作成して購入しましょう。

龍之介

僕は PayPal経由のクレジットカードで支払いました。

プレミアム適用の手順

購入後にダウンロード画面を開き、PDFかTextファイルをダウンロードします。

テキストファイルもしくはPDFを開くと

「Item Purchase Code」が書かれているので、そのコードをコピーします。

WordPressメニューの「Image Elevator」から「License Manager」を開き、

Image Elevatorのプレミアムコード送信画面

この画像はすでにプレミアム化されたもの状態です。

赤枠で囲った欄にコードを貼り付けて、「Submit Key」で送信しましょう。

無事認証されればアップグレード完了です。

まとめ

通常、大変なハウツー記事作成ですが、

このプラグインを使うことによって大幅に時間短縮することができています。

無料でも使えますので、一度インストールして使ってみてはいかがでしょうか?

ただし、インストールすると、WordPressの画面でたびたび「プレミアムにアップグレードしませんか?」といった内容のバナーが表示されるので正直うざったかったです(^◇^;)

それも消したくて有料バージョンを購入しましたが、機能面では満足しています!

 

大事なポイント
  1. スクリーンショットやコピーした画像を簡単に記事に貼り付けられる
  2. 有料バージョンは約1,400円で、画像のサイズやCSSを設定できるようになる

龍之介

記事を書く上で、手放せないプラグインになりました。

 

コメントを残す

メールアドレスが公開されることはありません。