WordPressに画像を入れる手順、圧縮のやり方まで動画つきで

WordPressでブログを始めたとき、最初につまずきやすいのが「画像の挿入」です。この記事は、当ブログの前オーナーが2020年当時に自分の作業手順をまとめた記録を、ろっぐが引き継いで整理したものです。画像の入れ方から、圧縮・タイトル付け・トリミング・横並び表示まで、順番にたどっていきます。

比較的やさしいWordPressですが、画像の挿入でつまずく人はたくさんいます。前オーナーも最初はアップロードするのがやっとで、一つ一つの作業をそのつど調べていたそうです（2020年当時）。

この記事では、画像を挿入する基本手順に加えて、画像圧縮・トリミング・ギャラリー作成といった便利な機能もまとめました。動画とスクショ付きなので、手を動かしながら進めてください。

WordPressに画像を挿入する方法

この動画では、画像をダウンロードしてからWordPressに挿入するまでの流れと、前オーナーが実際に使っていた便利な小技を記録しています（2020年当時）。

画像を挿入する作業自体はとても簡単です。手順は次の4ステップです。

※上記は当時のエディター画面での手順です。現在のブロックエディターでは「画像」ブロックを追加してアップロードする形になり、ボタンの位置や名称が異なる場合があります。

そもそも載せてはいけない写真と載せてもいい写真については、こちらの記事にまとめています。

ここからは、画像を挿入するうえで知っておくと便利な情報をまとめました。

画像をアップロードする前に圧縮する

WordPressに画像をアップロードする前に、必ず圧縮作業をしましょう。

画像は容量が重く、サイトのスピードを遅くする原因になります。開くのに時間がかかると、せっかく訪れた読者を逃してしまうこともあります。

「圧縮」とは画像の容量を小さくすることで、見た目の大きさを小さくすることではありません。容量を落として、サイトの高速化を目指しましょう。

画像を圧縮する方法

圧縮するには、以下の方法があります。

プラグインはWordPress上に導入し、画像をアップロードすると自動的に圧縮してくれるツールです。一方サイトを使う場合は、画像を1枚ずつサイトにアップロードします。

それぞれの特徴は以下の通りです。

何を重視するかで最適な方法は変わります。何枚も画像を使い、1枚ずつのアップロードが面倒ならプラグインを、より軽量化を求めるならサイトを使う、といった具合です。

前オーナーは、作業が増えても圧縮率が高い方がよいと考え、圧縮率が高くて人気の「TinyPNG」というサイトを使っていました（2020年当時）。

TinyPNGの使い方

↑この動画の2分21秒のところから解説しています。

TinyPNGは、パンダが目印の圧縮サイトです。日本語表記はありませんが、操作はたったの2ステップなので簡単です。

まず、圧縮したい画像をこの〇の中にドラッグします。

一瞬で圧縮が完了するので、「download」をクリックして圧縮後の画像を保存すれば完了です。

下の例ではGoProの画像を圧縮しました。容量の大きい画像であるほど圧縮率が高くなり、このときは89％も圧縮されました。ここまで軽くなると、サイトのサクサク具合もかなり変わります。

スクショの画像を3枚圧縮したときも、50％以上圧縮されました。ちなみに一番下の枠の「86％」は、合計で何％圧縮されたのかを表しています。

※いらすとやなどのフリー画像は、圧縮率が低い傾向にあります。

1回の作業は短く、一度に20枚までまとめてドラッグして圧縮できます。1記事に20枚程度なら、作業の負担もそれほど大きくありません（枚数や容量の上限は変わることがあります）。

画像をアップロードした後にタイトルを付ける

↑この動画の6分36秒のところから解説しています。

圧縮した画像をWordPressにアップロードしたら、後々便利になるひと工夫があります。それは「画像にタイトルをつける」ことです。

同じ画像を何度か使う場合、毎回アップロードすると容量がもったいなく、効率的でもありません。タイトルをつけておけば、過去にアップロードした画像をすぐに見つけられます。

画像のタイトルを変更する方法

画像をアップロードすると「メディアライブラリ」の画面になります。右側にタイトルを入力できる欄があるので、ここを「検索して分かりやすい名前」に変えます。

そのままだと、アルファベットや数字が並んでどの画像か分からない名前になっています。これでは検索できませんが、例のように「ウミガメ」といった名前にしておけば、

このように、検索したときすぐに選べるようになります。ひと手間かかりますが、後からやっておいてよかったと思える小技です。

WordPressの画像をトリミングする

↑この動画の8分33秒のところから解説しています。

余分な箇所を削りたいときに使える機能です。

メディアライブラリで画像を選択すると、右側に「画像を編集」という項目が出てくるので、ここをクリックします。

「トリミング」のボタンをクリックし、

好きなサイズにトリミングしたら、もう一度「トリミング」をクリックします。

最後に「保存」をクリックしたら完了です。

元に戻すときはこの画面に戻り、「画像を復元」をクリックすれば戻ります。

WordPressの画像を横並びにする

↑この動画の12分12秒のところから解説しています。

「画像をたくさん使いたいけれど一括りにしたい」「何枚かを横並びに貼りたい」というときに便利な方法です。ここでは「ギャラリーを作成」という機能を使います（当時のエディター基準。現在のブロックエディターでは「ギャラリー」ブロックを使う形になります）。

「メディアを追加」の画面を開くと、左に「ギャラリーを作成」という項目があります。

一括りにしたい画像を選び、「ギャラリーを作成」ボタンをクリックします。

次にカラムとサイズを選びます。カラムは横並びを何枚にするかを決めるもので、例えば画像4枚でカラム3にすると、1枚が2段目にくる仕様です。サイズは「サムネイル・中・大・フルサイズ」から選べますが、フルサイズにすると画質がきれいなのでおすすめです。

最後に「ギャラリーを挿入」をクリックすると、このように表示されます。

まとめ

• 画像は必ず圧縮し、容量を軽くしてサイトを高速化させる
• 圧縮プラグインは自動で圧縮するので効率的、圧縮サイトは手間はかかるが圧縮率が高い
• おすすめ画像圧縮サイトは「TinyPNG」
• アップロードした画像にタイトルをつけると効率的に管理できる
• 画像の余分な箇所を削るならトリミングをする
• 画像を何枚か横並びに表示したいならギャラリーを作成する

画像を挿入するだけでも、さまざまな工夫の余地があります。そのままアップロードしていた人は、まず圧縮作業だけでも今日から始めてみてください。慣れれば面倒に感じることもなくなります。