「WordPress」画像の挿入方法をわかりやすく解説!

WordPressに画像を挿入したい。そしてブログを公開したい。ひとまずのゴールは、記事をアップすることですよね。画像の貼り付けで、つまずいてしまっているのではないでしょうか。私もWordPressを触り始めの頃、つまずきました。

そんなときに、この記事を参考にしてみてください。具体的には、

  • 画像の挿入方法 2通り
  • 画像サイズを変更する方法(拡大・縮小)
  • 画像の置換
  • 画像のトリミングトリミング方法

この順番で、初心者の方がつまずきやすいポイントを、わかりやすくまとめました。ぜひこの記事を見ながら操作してみてください。

 

画像の挿入方法

ファイルのアップロード

画像を挿入したいところにクリックします。

編集ボタンの左上「メディアを追加」をクリックします。

「メディアを追加」画面になるので、「ファイルをアップロード」をクリックします。

「ファイルをアップロード」をクリックし、「ファイルを選択」をクリックしましょう。

すると、ご自身の画像が保存してある画面に移ります。投稿したい画像をダブルクリックします。

投稿したい画像が「メディアライブラリ」に追加されました。

配置を選択します。

  • 中央
  • なし

から選択できます。ここでは中央にしました。

次にサイズを選択します。

  • サムネイル
  • フルサイズ

から選択できます。ここでは、フルサイズにしました。

投稿したい画像に、チェックが入っていることを確認して、「投稿に挿入」をクリックします。

画像の挿入ができました。また次の方法でも画像の挿入ができます。

画像の保存場所から、ドラッグ&ドロップをしてアップロードもできます。ドラッグ&ドロップは左クリックをしながら、マウスを動かし、貼り付けたい場所で指を離します。

こちらも参考になりますよ。

「Word Press」メディアの追加方法!

2018.12.22

タイトルに名前をつけましょう

タイトルはGoogleの検索結果に表示され、SEO対策として使えるテクニックです。この機会に覚えてしまいましょう。上の画像のタイトルは、ファイル名のままですね。

このようにタイトルに「この画像は海の貝殻です。」と入力します。キーワードは、「画像」「海」「貝殻」となりGoogle検索結果として、表示されます。

上位検索を狙うなら、覚えておきたい大切なことでした。ぜひ活用してくださいね。

アイキャッチ画像は記事投稿に欠かせません。設定方法はこちらから↓

「Word Press」アイキャッチ画像の設定方法と劇的効果について!

2018.12.13

ファイルのアップロードはスムーズにできたでしょうか。無事にアップロードができて、記事を投稿できたらなによりです。もしも画像のサイズが大きすぎるまたは小さすぎるといった場合は、このあとも参考にしてみてくださいね。

 

画像サイズを変更する方法

拡大方法

画像をクリックするとメニューが出てきます。左から

  • 左寄せ
  • 中央揃え
  • 右寄せ
  • 配置無し
  • 編集
  • 削除

ボタンです。編集ボタンをクリックします。

画像詳細」画面になったら、サイズの選択をしましょう。ここでは、300×200→700×467にしていきます。

拡大するときは、フルサイズより大きなピクセル数にしたいので、カスタムサイズを選択します。

700×467が入力できました。実際に更新して、見てみましょう。

拡大ができました。編集画面に行くと、更新したサイズが表示されていることがわかります。

縮小方法

拡大方法がわかれば、縮小も簡単にできます。カスタムサイズからサイズ変更してみましょう。ここでは、3872×2562を700×463にします。

カスタムサイズを選択します。サムネイル、中サイズ、大サイズの中から選択してもよいでしょう。

更新をクリックすると縮小ができます。

画像をクリックして「画像詳細」画面へ切り替えると、変更が確認できます。また次の方法でも縮小ができます。

ご自身の画像が保存してある画面からアップロードしたら、投稿したい画像を選びます。右上にある「画像を編集」をクリックします。

右上に現在のピクセル数が表示されています。ここに任意のサイズを入力しましょう。

サイズを入力したら、右横にある「縮尺変更」をクリックします。

画面が切り替わり「画像を保存しました」と表示されるので、サイズの確認をして「戻る」をクリックします。

メディアライブラリ」の画面に切り替わります。右上にある画像情報を見ると、変更が確認できます。さいごに「投稿に挿入」をクリックします。

画像をクリックして「編集画面」へ切り替えると、変更が確認できます。

 

画像の置換

画像を入れ替えたい。間違えて画像を挿入してしまった。そんな時は画像を消してから、新たに挿入もできます。

たまに改行がくずれてしまったり、文章を誤って消してしまったりしてしまうことがあります。そんなときは便利な置換機能で、文章をくずすことなく、入れ替えてしまいましょう。

まずはおさらいです。入れ替えたい画像を左クリックし「編集」をクリックします。

右下の「置換」をクリックします。

「メディアライブラリ」にある投稿したい画像を選びます。

配置、サイズの確認ができたら右下にある「置換」をクリックします。

置換を使っていなかった頃の私は、たびたび入力した文章をくずしていました。一文字消してしまっては入力し直してと、非常に手間でした。

これで文章をくずすことなく画像を入れ替えることができました。思いのほかこの「置換」機能は使えますから、覚えておいて損はないですよ。

 

画像のトリミング方法

画像の一部だけ使いたい。そんなときは「トリミング」機能を使いましょう。こちらも編集する画像をクリックしてから「編集」をクリックし「画像詳細」へ行きます。

画面右上にある「オリジナルを編集」をクリックします。

ドラッグ(マウスを左クリック)しながらマウスポインターを動かします。このように選択した範囲外は、背景がグレーに変わります。

またカーソルをトリミング内に合わせながら、動かすこともできます。

枠の上にカーソルを合わせると、このように多方向へ調節できますよ。

切り取りの範囲が決まったら、「切り取りマーク」をクリックします。

保存」をクリックします。やり直したい場合は、「左矢印」で戻ります。

画像詳細」画面に切り替わるので、配置、サイズ指定して「更新」をクリックします。

編集中に「キャンセル」をクリックしてしまうと、「画像詳細」へ戻ってしまいます。私は何回かやってしまったので、みなさんは気をつけてくださいね。

 

さいごに

画像を多めにして解説しました。慣れてくると、頭の中で組み立てることができます。どこにファイルがあって、どのようにアップロードして編集して、と。

それまではこの手順を見ながら、やってみることをおすすめします。覚えたら見なくても、操作ができるようになっていきますし、誰もがこの道を通っていますからきっとあなたにもできます。

私も最初はそうでしたし、WordPressを触り始めの頃は、何も知りませんでした。そんな私もいまでは、記事を更新できています。画像の挿入方法を覚えたら、ぜひ次のステップへすすんでください。

記事の作成についてはこちら

「Word Press」超初心者向け!新規記事の作成方法を解説!

2018.12.13

次のステップアップはこちらから

【Word press】表(テーブル)を挿入する方法!

2019.03.06

さらにステップアップしたい方はこちらもどうぞ。

「Word Press」記事作成を便利にするおすすめプラグイン!TinyMCE Advanced

2019.03.12

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です