WordPress の投稿に画像を挿入する方法

  • このエントリーをはてなブックマークに追加

WordPress を使用することで初心者でも簡単に見映えのよいコンテンツを作成することができる。そして読者の理解を深めてコンテンツに満足してもらうためにも、画像は欠かせないものだ。

そこで、ここでは画像の

  • 挿入
  • サイズ変更
  • トリミング(不要な部分の削除)

の方法を一つひとつ図解で分かりやすく紹介する。特にサイズ変更やトリミングに関してはWordPressの機能を使い、画像加工ソフトに頼らないシンプルな方法を紹介するので最後まで読んで欲しい。

1.記事に画像を挿入する方法

ここでは記事の文中に画像を挿入する方法を紹介する。ただ解説だけだとしっくり来ないところも出てくるので、まずは解説の通り試してみよう。

1−1.画像をアップロードする

まず管理画面にログインして左メニューの「投稿」より記事を作成しよう。そして、下図のように画面赤枠の文中に画像を挿入したい箇所をクリックする。

次に「メディアを追加」をクリックしよう。

するとメディアライブラリ画面がポップアップで表示される。

挿入したい画像ファイルをメディアライブラリ画面上にドラッグ&ドロップする。

アップロードされると下図のように表示される。

1−2.代替テキストを入力する

続いて代替テキストの設定をする。これはメディアライブラリ画面の右側にある詳細設定を使用する。その他の項目は特に重要ではないが、念のため解説しておこう。

  • タイトル:ここでつけたタイトルは、Google 画像検索の検索結果に表示されるようになるので、画像のタイトルにもキーワードを入れるようにしよう。
  • キャプション:挿入した画像の下部にテキストを表示したい時に使う。
  • 代替テキスト:これはALTテキストのことで、このタグを設定することで画像がどういう画像なのかを検索エンジンに伝えることができる。
  • 説明:画像の管理用に説明文を入力する。

代替テキストは、検索エンジンの評価の対象のひとつとなるため、SEO対策としてもここは忘れずに設定しておこう。徹底して SEO 効果を上げる画像の設定については『WEBライティングとは』にある「5−2.画像の最適化」を読んで実践していただきたい。

1−3.表示内容を設定する

ここでは挿入する画像の表示位置やサイズを設定することができる。コンテンツ上の画像の見え方を設定する大事なところなので一つひとつ解説しよう。

  • 配置:画像の配置を設定する。次の(1)左寄せ、(2)中央揃い、(3)右寄せ、(4)なしの4つから選択できる。
  • リンク先:リンク先の設定をする。(1)メディアファイル、(2)添付ファイルのページ、(3)カスタムURL、(4)なしの4つから選んで設定できる。
  • サイズ:オリジナル画像サイズ(=フルサイズ)以外にサムネイル画像サイズ、上図のように自動で生成された画像サイズを選ぶことができる。

リンク先は、デフォルトで「メディアファイル(オリジナル画像のURL)」となっている。URLを設定したい場合は「カスタムURL」を使用する。設定する URL がなければ基本的に「なし」で良い。

1−4.画像を挿入する

設定が完了したら画面右下にある「投稿に挿入」ボタンをクリックしよう。

すると図のように投稿画面に画像が挿入される。管理画面とブラウザの見え方は異なるため、必ずブラウザで確認しよう。

これで画像の挿入する方法は以上だ。

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

画像編集ソフトのように WordPress では簡単に画像サイズを変更することができる。

サイズ変更の前にコンテンツの横幅を何ピクセルか計測したい場合、各ブラウザの拡張機能を使うと簡単に調べられる。Google Chrome なら「Page Ruler」、Firefox であれば「MeasureIt」が使いやすいのでおススメだ。

2−1.画像の編集画面にアクセスする

メディアライブラリにアップロードした画像をクリックしよう。

画面右側に「画像を編集」リンクが表示されるのでクリックする。

2−2.画像のサイズを変更する

下図が画像の編集画面だ。この画面の右上にある「画像縮尺の変更」を設定すると画像サイズを変更できる。

※ サムネイル設定はほとんど使用しないが、興味がある方は「3−4.その他の設定方法」を確認しよう。

画像の縦サイズ、横サイズどちらかをピクセル数で入力したら「縮尺変更」をクリックする

画像サイズが変更されたら「保存しました」と表示される。問題なければ「戻る」ボタンをクリックして編集画面を閉じる。

これでサイズ変更は完了だ。

3.画像をトリミングする方法

トリミングとは画像の不要な部分を削除する編集方法だ。ここでは、WordPress の機能を使って簡単にできる方法を紹介する。

3−1.画像の編集画面にアクセスする

「2−1.画像の編集画面にアクセスする」の手順通りに下図の編集画面にアクセスしよう。

3−2.画像をトリミングする

トリミングでは特にこの編集画面の左側を使用する。

編集画面で使用するツールを下表でまとめたので実際に操作する時に確認しよう。

アイコン ツール名 用途
トリミング 画像の切り抜きができる。対象を中心にして、余分な箇所を削除したいときに使用する。
anticlockwise 反時計回りに回転 画像の向きを左回りに回転する時使用する。画像の縦向き、横向きを変更したい時にしようする。
rotate-clockwise 時計回りに回転 画像の向きを右回りに回転する時使用する。画像の縦向き、横向きを変更したい時にしようする。
perpendicular-direction 垂直方向に反転 画像を垂直方向に回転させたいときに使用する。
horizontal-direction 水平方向に反転 画像を水平方向に回転させたいときに使用する。
cancel 取り消し 1つ前の編集に戻って現在の編集状況を破棄する時に使用する。
do-over やり直し 1度「取り消し」をして編集していたが、やっぱり取り止めて元に戻す時に使用する。

まず、画像上の1点をクリックし、ドラッグしたまま右下方向へカーソルを移動させよう。すると白い点線枠が表示される。

この枠の外側(薄いダーク色の部分)が不要な部分として削除される。ここで、点線枠を調整するには

  • カーソル
  • 縦横比
  • ピクセル数

の3つの方法がある。それぞれ解説していこう。

3−2−1.選択範囲をカーソルで調整する

カーソルで枠の選択範囲を調整したいときは、図の◯枠のポイントをドラッグしたまま移動しよう。Shift キーを押したまま四つ角をドラッグすると、縦横比を保った調整することも出来る。

3−2−2.選択範囲を縦横比で調整する

縦横比を保ったまま枠の選択範囲を調整したいときは、画面右側の「縦横比」を使うとできる。

正方形なら「1:1」。ハイビジョン画面なら「16:9」。従来のパソコン画面サイズである「4:3」。なじみ深く昔ながらのフィルムサイズとなる「3:2」などがある。自分のサイトに合った画像サイズに調整しよう。

3−2−3.選択範囲をピクセル数で調整する

もちろんピクセル数を入力して枠の選択範囲の調整もできる。サイズを統一して掲載する時に使える。

3−3.トリミングを確定する

選択範囲を調整して、切り抜く部分が決まったら「トリミング」アイコンをクリックしよう。

下図のように「保存」をクリックするとトリミングは完了だ。

もし、トリミングをやり直したい場合は「保存」ではなく、ここで「キャンセル」をクリックすると再度調整できる。

3−4.その他の設定方法

編集画面にはその他にも画面右下に「サムネイル設定」がある。

ここでは、トリミング後の表示内容をサムネイル画像にも反映させるか、させないかが選べる。ちなみにサムネイル画像は、メディアライブラリやギャラリーで表示される画像だ。設定内容はデフォルトのままで問題ないが、こだわりたい方は下図の解説に目を通しておこう。

「現在のサムネイル画像」で現状のサムネイルがプレビューされる。このサムネイル画像は、トリミングした画像から自動的に生成される。また、「変更を適用」には次の3つがある。

  • すべての画像サイズ:全ての画像とは(1)サムネイル画像、(2)オリジナル画像、(3)自動で生成される画像の3つだ。
  • サムネイル:編集内容をサムネイル画像だけに反映したい時、ここを選択する。
  • サムネイル以外の全サイズ:サムネイル画像は現状のままにしたい時、ここを選択する。

サムネイルの調整内容に合わせて選択して「保存」をクリックすると設定内容が保存される。

以上が画像のトリミング方法だ。

  • このエントリーをはてなブックマークに追加

コンテンツ制作に集中するだけで圧倒的な成果を上げる
『 bazubu-shiki 』

cta_bazubushiki“ bazubu-shiki(バズブシキ)” とは、バズ部の運営ノウハウを凝縮した
クラウド型コンテンツマーケティング専用CMSです。

  • ・検索エンジンを徹底的に意識したサイト構造
  • ・誰でも簡単にコンテンツが作れる
  • ・コンバージョンを獲得するための機能も完備
  • ・外部連携も安心!SNS、GAとの連携も万全サポート
  • ・常に最新機能が使える!クラウドを活かしたシステム

専門知識がない方でもコンテンツ制作にのみ集中することができます。
100万PVを超えるメディアを作るために、ぜひ導入してみてください。


" bazubu-shiki " について詳しく見る

最新の記事情報が取得できます

Facebook

「いいね!」ボタンを押すと、最新情報がすぐに確認できるようになります。

Twitter

「フォローする」ボタンを押すと、最新情報がすぐにツイート上で確認できるようになります。

コメントはこちらから

  1. 滝口 ひとみ

    こんにちは。
    いつも参考にさせていただいております。
    早速ですが、iPhone6で画像をメディアにアップロードしたものをPCで画像編集し、メディアを追加したところ、PCで見ると編集後の画像になっているのですが、iPhone6で見ると画像編集前の元の画像になっています。
    これは直すことはできないのでしょうか?
    FBに連携もしているのですが、FBも同じように元の画像になっています。
    解決策を教えていただけますか?

    1. おそらくスマートフォンのブラウザのキャッシュが残っていて、
      そのように見えているのではないでしょうか?

      こちらの方法でキャッシュ削除を試してみてください。
      http://www.konnect-kollect.info/iphone6-ios8-cache-delete.html

  2. 滝口 ひとみ

    ありがとうございました。
    今回は、サーバーからPCにダウンロードして、別名保存して再度アップロードし、メディアの追加をしなおしました。
    次回、同じ現象がおきたら試してみます。

  3. はじめまして。

    いつも勉強させて頂いております。
    早速ですが質問をさせていただければと存じます。

    記事内に画像を挿入し、公開して確認するとPCではアイキャッチ画像と記事内の画像どちらも表示されるのですが、SP(iphone6s)で確認すると、アイキャッチ画像と記事内の画像どちらも表示されません。
    さらに、画像が投稿されているであろうスペースは取られている状態です。
    ちなみにSPのキャッシュは消して確認したのですが、結果は変わらずでした。
    あと、画像の容量も下げて1枚当たり50kb以下に抑えてみましたがダメでした。
    ※投稿記事にはアイキャッチ含めて3枚挿入

    こちらどのように対処すればSPでも画像が表示されるのでしょうか?

  4. 昨日ご質問をさせて頂いたのですが、原因がわかりました。
    lazy loadが原因だったようです。
    お騒がせいたしました。

    これからも記事楽しみにしております。

    1. tomuさん、コメントありがとうございます。
      お返事が遅れてごめんなさい。
      解決されたとのこと良かったです。