WebブラウザからWordPressで画像を挿入する方法としてはこれ以上簡単なやり方がないと思うほど理想的なプラグイン「OnePress Image Elevator」の使い方や設定についてまとめました。
画像の挿入に関しては人気のブログエディタMarsEditよりも簡単です。
もくじ
OnePress Image Elevatorの概要
何と言ってもWordPressの標準エディタで（ビジュアルエディタ・テキストエディタどちらでも）
Ctrl+V
（コピペ）で貼り付ければ画像挿入が完了するのでブログ執筆が捗ります。
無料版だと制限がありますが小さめのキャプチャを貼るくらいなら問題はありません。ただし無料版は画像形式がPNGで挿入されるため、大きい画像を使うなら有料版のほうが良い場合もあります。
有料版の導入手順などはこちらを参考にどうぞ。⇒OnePress Image Elevatorを有料版(premium)にする手順
OnePress Image Elevatorのインストール
OnePress Image ElevatorはWordPressのプラグインなので管理画面から簡単にインストールまで完了します。
まずWordPress管理画面左サイドバーのプラグインの「新規追加」をクリックして、
プラグインの検索欄に「OnePress Image Elevator」と入力して検索します。
「今すぐインストール」をクリックしたらインストールまで完了するので完了画面の「有効化」をクリックしたらもう使える状態になります。
↓インストールが完了すると投稿画面でImage Elevatorの設定ボタンが現れます。
OnePress Image Elevatorの使い方
OnePress Image Elevatorの使い方はかなり簡単で、コピーした画像をCtrl+Vで貼り付けるだけです。
貼り付けている途中はロード中のマークがくるくる回ってしばらくしたら貼り付けが完了します。
10KB程度の軽い画像だと1秒くらいで挿入が完了しますが100KBを超える程度の画像になると挿入完了まで数秒かかります。
ただし数秒かかるとは言っても挿入中もカーソルの移動や文字入力は自由にできるので画像の挿入は体感時間がゼロです。
普通はWordPressで画像を挿入しようとしたらメディアライブラリへのアップロードの時にしばらく待ちますがアップロードの体感時間がゼロというのはめちゃくちゃ使いやすいのでもう戻れません。
標準的なスクリーンショットの撮り方
さて、Ctrl+Vで簡単に貼り付けできると言っても、まずはコピーしないと始まらないので、例として画面のキャプチャをコピーする方法を書いておきます。操作方法などをブログで紹介する時に使えるので参考にしてください。
Windows
- Print Screen画面全体をコピー
- Alt+Print Screen選択中のウィンドウをコピー
Mac
- ⌘+Shift+control+3画面全体をコピー
- ⌘+Shift+control+4選択範囲をコピー
- ⌘+Shift+control+4の後にSpace選択中のウィンドウをコピー
上記の方法が、何もソフトが入っていなくても標準で使えるスクリーンショットです。Windowsなら「ペイント」などのアプリケーションを使えばとりあえず画像として保存もできます。
でも実際は以下に紹介する画像を加工するアプリケーションを使うことが多いですけどね。
画像加工ソフト
さっきの標準機能を使うより、画面のキャプチャから加工まで全部できるフリーソフトを使うほうが便利なのでこちらをおすすめします。
WindowsはScreenpressoがあればすべてできます。
関連：スクリーンショット加工ソフトScreenpresso
文字入れをせずに、リサイズ・トリミング・明るさ補正くらいならIrfanviewもおすすめ。
参考：IrfanView – 窓の杜ライブラリ
スクリーンショットをより多機能にしたり上記Irfanviewのような画像加工アプリと連携させたいならWinshot
参考：WinShot – 窓の杜ライブラリ
Macは昔はSkitchが定番でしたが、メインでMacは使ってないのであまり詳しくありません。
Image Elevatorの設定について
Image Elevatorの設定ボタンはエディタ画面の中にあります。
ボタンをクリックするとポップアップで内容が表示されます。
無料版で使えるのは「画像ページへのリンク」と「classを自動で追加」
「自動リサイズ」と「自動JPEG圧縮」は有料版のみの機能になります。
画像ページヘのリンク
元画像を表示するリンクを貼る設定です。画像がクリックできるようになり別ページで大きく表示されます。（WordPressの設定に寄ってはポップアップで表示されることもあります）
ただし無料版だとコピペで貼り付けた場合はpngになるので大きな画像は容量が大きくなりすぎてあまりおすすめできません。
一度JPG画像として保存していても、画像加工ソフトで開いてCtrl+CでコピペするとPNGとしてクリップボードに保存されてしまい、エディタで貼り付けるとPNGとして貼り付けされてしまうので注意してください。
画像加工ソフトからコピペでJPGとして貼り付けしたいなら「自動JPG圧縮」機能がある有料版を導入したほうが無難です。
class名を自動で追加
画像のimgタグにclass名を自動で付加してくれる機能です。付加するclassに外枠罫線や大きさ・寄せの配置などをあらかじめ設定しておけば自分がいつも使うレイアウトに自動で設定することができます。
自分の場合は外枠罫線にグレー線を引くclassを設定しています。自動で外枠罫線を付ける仕組みについて記事も書いてます。
CSSファイルの中に「class名「qwq」は外枠罫線を引くよ」というタグを書いて、
|
1 2 3 |
img.qwq { border:1px solid #d9d9d9; } |
Image Elevatorの設定でclass名の入力欄にqwqを書けば、
画像を貼り付けるだけで外枠罫線が引かれるようになります。
※↑この画像は元画像には外枠の罫線はなく、画像の外側に後から罫線が付いてます。
有料版で使える機能
OnePress Image Elevatorは大幅な時間短縮になりますが、無料版はコピペで貼り付けるとPNGのまま貼り付けされてしまうので、ページが重くなってしまうという問題があります。
有料版では「自動リサイズ」と「自動JPG圧縮」の機能があるので、写真をたくさん貼り付ける人にとってはかなりの時短になります。
13ドル（ペイパルは15ドル）とそれなりのお値段ですけど価値を感じる人なら有料版の導入は非常におすすめです。
ただし海外サイトのアカウントを作ったりインストールが分かりにくかったりとそれなりのハードルの高さなのでちょっと気合が要るかもしれません。
参考：OnePress Image Elevatorを有料版(premium)にする手順
自動リサイズ
OnePress Image Elevator有料版の機能ひとつめ。
大きな画像をコピペで貼り付けた時に、あらかじめ設定したサイズに自動でリサイズしてくれます。
自分で画像編集ソフトを使ってあらかじめリサイズする手間が減るので時間短縮になります。
設定画面では左側がリサイズ後の最大幅、右側が最大高さになります。空欄にした場合は自動リサイズされません。
↓この場合は横幅が610pxより大きい場合に、610pxまでリサイズする設定になってます。高さは長くてもリサイズしない設定にしています。
↑例えば上記の設定だと、横幅が610pxより大きい場合にリサイズされます。
縦横比は維持したままリサイズされるので、例えば1000x1000pxだったら610x610pxになります。
自動圧縮（JPEG変換）
OnePress Image Elevator有料版機能のふたつめ。
コピペで貼り付けた時や、PNG画像を挿入した時に、PNGを自動的にJPG画像に変換して圧縮します。
リサイズは画像編集ソフトで簡単にできるので別になくても構わないですが、PNG→JPG変換は普通ならファイルを一度保存しないといけないので、これを自動で処理してくれるのは非常にありがたい。
PNGをJPGに変換するかどうかは「Skip images less then」でファイル容量を設定します。例えば50KBにすると、PNG画像が50KBを超える時にJPGに変換することになります。
そして「JPEG Quality」でJPG変換する時の圧縮率を設定します。100%にすると無駄に容量が重たくなってしまうことが多いので、80%や90%くらいがおすすめです。気になるようなら見比べてみてください。圧縮率を低くしても思ったより気になりません。
重たい画像はページの表示速度に影響するので、今まで「PNG」「JPG」を気にしてなかった人はこれを機に自分の貼り付けている画像のファイル形式と容量を確認してみたらどうでしょうか。
画像の容量とファイル形式を確認するChrome拡張機能でView Image Info (properties)というのがあります。
ページの重さ度外視で、とにかく最大限に綺麗に見せたい写真ならともかく、妥協しても構わない画面キャプチャをいちいち最高の画質で貼っていたら無駄に重くなってしまうので、無駄のない画像貼り付けは大事です。
まとめ
以上、OnePress Image Elevatorのインストールから、無料版と有料版の違いまで一通り書きました。
今までWordPressでの画像挿入は面倒くさいと決めつけていましたが、これならビジュアルエディタでも非常に快適に画像を挿入できます。
とくにWindowsではブログエディタにピカイチのものが無いので標準のビジュアルエディタがこれだけ便利ならもうビジュアルエディタで良いんじゃないかと思います。
関連：OnePress Image Elevatorを有料版にする手順
とても参考になりました。ありがとうございました。
Skip images less thenの所は「以下の画像はＪＰＧ圧縮しない（ＳＫＩＰ）」のお間違えのようです。