9月26日まで、エックスサーバーで「独自ドメインプレゼントキャンペーン」!更新料金も無料!サーバー新規開設が条件です。

[WordPress] 画像の挿入方法・画像に追加できる情報・表示機能

編集
いくみ
いくみ

当記事では、自分のパソコンに保存してある画像を表示させる方法について説明します。

他に、外部の画像URLリンクを埋め込んでブログに表示させる方法もあるそうですが、私は一度も使っていません。注意事項が増えるようなので、初心者向けではない印象です。そちらの方法は一切触れません。

パソコンに保存してある画像をブログに表示させる方法には以下の2種類があります。

画像の挿入方法

注:大まかな流れを捉えて「1ステップ」「2ステップ」としました。細かい手順にすると、数ステップあります。

当記事のポイント
  • 画像の挿入方法による違いを説明。
  • 記事内の画像の挿入手順
  • 画像に追加できる情報・リンク設定・サイズ調整・位置調整
  • 複数画像を並べて表示する方法・画像と文章を並べる機能・カバー機能の紹介。
  • アイキャッチ画像の挿入手順
アイキャッチ画像は

Myriam ZillesによるPixabayからの画像

挿入方法による違い

どちらの方法で画像を挿入しても、ブログでの表示は同じになります。

1つだけ異なる点があります。(画像管理の方法 ~ WordPressのいけずなラベルに負けないをすでに読んでいただいた方は、スキップしてくださいね。)

[メディアライブラリ]画面での[アップロード先]の表示

どちらの画面から作業しても、アップロードした画像は、すべて[メディアライブラリ]画面にリストされます。

その際、[メディアライブラリ]画面での[アップロード先]の表示に、以下のような違いがでます。

画像の挿入方法による違い

1行目の画像は、[投稿]画面から画像をアップロードしました(1ステップ)。この方法だと、アップロード先に記事のタイトルが表示されます。

2行目の画像は、[メディアライブラリ]画面で画像をアップロードしてから、[投稿]画面で画像を選択、という2ステップの方法で記事に挿入しました。そうすると[アップロード先]の情報が(未使用)となります。使っているんですけどね。

いくみ
いくみ

[メディアライブラリ]にアップロードした後に、その画像を記事に挿入しても、[アップロード先]に記事タイトルが自動挿入されないのです。このステータス機能は、「手動更新」です。

(未使用)になっていても、後からタイトルを挿入できます。

でも気にならない場合は、そのままでも大丈夫です。この[アップロード先]ステータスが間違っていても、ブログ表示に問題は出ません。

ただ、ステータスを間違ったままにしておくと、「自分が誤解して誤操作をする」可能性は出てしまうので十分気を付けましょう。(例:「未使用」というステータスを見て、削除してしまったり。)

注意:投稿画面で画像をアップロードした時には自動で記事タイトルが挿入されますが、その後は「手動更新」です。

記事内で画像を削除したら、メディアライブラリからも完全に削除するか、[切り離す]をクリックして(未使用)の状態に戻すことをおススメします。

[アップロード先]を変更する方法は以下で記事にしています。

目次の2番をクリックすると[アップロード先]変更方法の説明に飛びます。

いくみ
いくみ

ではそれぞれの挿入手順です。

画像の挿入手順

[投稿]画面からでも[メディアライブラリ]画面からでも、画像をアップロードする方法は、以下の種類があります。順番に説明します。

WordPress画像のアップロード方法
いくみ
いくみ

自分に合う方法をお好みで選びましょう。1ステップの良いところは「アップロード先」が自動で挿入されるところ。2ステップの良いところは「複数画像アップロード」が簡単。また、[メディアライブラリ]画面から画像を「選択」するときに、一通りの画像情報を入力できるのも魅力です。

[1ステップ] 投稿画面で画像を挿入

まずは、投稿画面を開いてください。

下書き中の投稿は[投稿一覧]から選択、新規の投稿画面は[新規追加]をクリックです。

WordPress画像の挿入手順

クリック操作で挿入

1.画像を挿入したいブロックをクリック。以下のようにアイコンが4つでます。1番左側のプラスサインアイコンをクリック。

WordPressブロックの追加アイコン

2.表示されるメニューから、[画像]アイコンをクリックします。[よく使うもの]に最初に含まれていたと思います。無ければスクロールして、[一般ブロック]から[画像]アイコンをクリック。

WordPress一般ブロックのメニュー、画像アイコン

何度か画像を使うと、ブロックをクリックしたときに、以下のように右側に[画像]アイコンが表示されるようになるので、プラスサインをクリックしなくても画像挿入できるようになります。

WordPress画像表示

3.[アップロード]をクリック。

WordPressクリック操作で画像の挿入

4.保存してある場所から、挿入したい画像を選択して完了です。

すると、サイドに[画像設定]が表示されていますね。このAltテキスト(代替テキスト)は、入力する方が良いそうです。

WordPress画像に追加できる情報(代替テキスト)

入力ボックスの下に説明があるように、画像が見られない方々に画像情報を伝えることができるそうです。また、画像が表示されないときに変わりにこのテキストが表示されます。

SEO対策にもなるそうです。(ただ、長すぎると、スパム扱いされてしまったりするそうです。簡潔に入力しましょう。)

下にスクロールすると、画像のサイズを調整できるオプションやリンク設定があります。お好みで設定します。オプションの種類については後述しています。

ドラッグアンドドロップで挿入

1.挿入したい画像を保存してあるフォルダを開いて、WordPressの投稿画面と並べます。

2.画像をドラッグ&ドロップして完了。(複数選択も可能。)

[WordPress] 画像の挿入方法(ドラッグ&ドロップ)
いくみ
いくみ

挿入後に画像をクリックすると、先ほどの[画像設定]が表示されます。[Altテキスト(代替テキスト)]を入力すると良いですね。

コピペで挿入 ~ 画像をファイル保存していない場合です。

1.ペイント画面やパワーポイント画面などから、挿入したい画像をコピー(Ctrl+C)します。

2.[投稿]画面で、画像を挿入したいブロックをクリック。貼り付け(Ctrl+V)て完了。

いくみ
いくみ

画像「ファイル」ではありません。ペイント画面やパワーポイント画面でトリミング・編集して、「ファイル保存していない状態」の画像です。

私はスクリーンショットはほぼこの方法で挿入しています。数が多すぎてファイル保存が面倒なのです・・・★。

このコピペ挿入方法にすると、WordPressが自動でファイル名を付けます。なので、おススメはしません。

私はこの方法でないと耐えられないので、そうしていますが、SEO対策的には良くないことでした★。以下のサイトで勉強させていただきました。画像ファイル名も意味ある名前にする方が良いそうです。

いくみ
いくみ

・・・と分かっても、多分辞められない!

いくみ
いくみ

ここでも同じく、挿入後に画像をクリックすると、先ほどの[画像設定]が表示されます。[Altテキスト(代替テキスト)]を入力すると良いですね。

[2ステップ] メディアライブラリ画面から画像をアップロード・投稿画面で選択

1.[メディア]メニューの[新規追加]をクリック。

[WordPress] 画像のアップロード(メディアライブラリから)

2.クリック操作の場合:[ファイルを選択]をクリックしてアップロードしたい画像を選択。
  ドラッグ&ドロップの場合:保存場所のフォルダから点線内にドラッグ&ドロップ。

[WordPress] 画像のアップロード(メディアライブラリから)

  どちらの場合も複数選択可能です。上限は30MBです。アップロードはこれで完了。

3.記事内に挿入するステップ:[投稿]画面を開きます([投稿]>[投稿一覧]または[新規追加]をクリック)。画像を挿入したいブロックをクリックして、1番左側のプラスサインアイコンをクリック。

WordPressブロックの追加アイコン

4.表示されるメニューから、[画像]アイコンをクリック。[よく使うもの]に含まれていると思います。無ければスクロールして、[一般ブロック]から[画像]アイコンをクリック。

WordPress一般ブロックのメニュー、画像アイコン

5.[メディアライブラリ]をクリック。

[WordPress] 画像の挿入方法

6.挿入したい画像にチェックを入れて、緑枠の情報は任意で入力。[選択]をクリックで完了。

[WordPress] 画像の挿入方法
いくみ
いくみ

緑枠の情報は、入力しなくても大丈夫なのですが、SEO的には、「代替テキスト」は入れる方が良いらしいです。視覚情報を見られない方々に画像情報を伝えることができるので利用したいですね。

「タイトル」もSEOに良いというサイトもちょっとありました。一般的には「代替テキスト」に比べたら重要ではないとされているようです。

「キャプション」は投稿画面から情報を入れるほうが便利だと思います。

「説明」は自分用のメモです。

項目についてもう少し後述しています。

画像に追加できる情報・リンク設定・サイズ調整・位置調整

いくみ
いくみ

何もしなくても挿入さえすれば画像は表示されますので設定しなくても大丈夫です。「こういう事ができるのか~」と知っておくのは良いと思います。

投稿画面で追加できる情報とリンク設定、サイズ調整オプション

どの方法を使ったにしても、挿入した画像を投稿画面でクリックしてみてください。右サイドに以下のように様々な情報がでます↓。

画像に追加できる情報

[Altテキスト(代替テキスト)]は大切ですね。これから設定するようにしたいと思います。

[画像サイズ]のドロップダウンメニューと[画像の寸法]の%表示のボタンでサイズを調整できます。

いくみ
いくみ

クリックして動きを確認してみてくださいね。ただし「画像の自動生成」を無効にしていると、[画像サイズ]機能の方は使えません

画像の自動生成については、記事を書く前に知っておきたかったこと3つの目次の2番をご参照ください。

スクロールすると画像につけられる[リンク設定]があります。初期設定は[なし]です。その場合、読者が画像をクリックしても何も起こりません。

WordPress画像に追加できる情報

[メディアファイル]を設定してある画像を読者がクリックしたときの見え方

WordPRess画像に追加できる情報

黒い背景で画像のみ表示されます。

[添付ファイルのページ]を設定してある画像を読者がクリックしたときの見え方

WordPress画像に追加できる情報

ブログの投稿画面に画像が表示されます。(読者目線で考えるとやや不便に感じました。上の[メディアファイル]だと、閉じたいときに×をクリックすればいいだけなので簡単。でもこのオプションだと、[戻る]ボタンを使うことになります。)

[カスタムURL]を選ぶ場合は、すぐ下の[リンクURL]ボックスに表示させたいサイトのリンクを入力します。

WordPress画像に追加できるリンク設定

これを設定すると、読者がその画像をクリックしたときに、指定したURLに飛びます。

[リンク先]を[なし]以外にすると以下のように、更に他の設定項目が表示されますね。

WordPress画像に追加できるリンク設定

[リンクURL]:[カスタムURL]とセットで指定します。他のオプションのときはそのままで大丈夫です。

[新しいタブで開く]:文字通りですね、オン・オフの設定ができます。

いくみ
いくみ

後の2つは難しかった・・・。引用させていただきます。

リンク CSS クラス: HTML link に CSS クラスを追加します。カスタム CSS プラグインや子テーマを使用してリンクにスタイルを設定できます。

リンク rel: HTML link の rel 属性、または リンクタイプ を設定します。

引用元サイト http://wpdocs.osdn.jp/投稿・ページヘのメディア挿入
いくみ
いくみ

えぇっと・・・。

コードで、例えば画像の周りに枠線などのスタイルをつけられるそうです。私はまだ使ったことが無く、当分使わないと思います。

学びたい方は、ぜひ、以下のサルワカさんのページを読んでみてくださいね。

手動でサイズ調整する方法・キャプションを入れる方法

手動のサイズ調整

挿入した画像をクリックすると、青い丸が3か所に表示されます。
ドラッグしてサイズ調整できます。

WordPress画像のサイズ調整

キャプション

画像下に表示する、画像の説明となるラベルや文を入力できます。

メディアライブラリ画面で追加できる情報

いくみ
いくみ

[メディアライブラリ]画面からも情報を追加できます。内容はほぼ同じですが、[タイトル]と[説明]の2項目が投稿画面とは違います。

1.[メディアライブラリ]画面でリストされている画像ファイルにマウスを近づけると、ファイル名の下に[編集]というオプションがでるのでクリック。

WordPress画像に追加できる情報(メディアライブラリから)

2.以下のような画面になります。

WordPress画像に追加できる情報

[タイトル]:画像ファイル名とは別に付けられる、画像のタイトルです。SEOにも良いというサイトもあったので、「完全画像最適化」を目指す場合は利用してみると良いかもしれません。でも「関係ない」という情報のがチョット優勢でした。本当の所は私には分かりません。

また、この[タイトル]の情報は、メディアライブラリ内で自分が画像検索するときに参照される情報です。つまり、ここにキーワードや記事タイトルを入力しておくと、後でその文言で画像検索ができます。

[画像を編集]ボタンはあんまりおススメしません。自分のパソコンで編集するほうが簡単だと私は思います。

[代替テキスト][キャプション]は、[投稿]画面で入力するほうが便利だと思います。文脈を見ながら設定できますね。

[説明]は自分用のメモです。これも、[タイトル]と同じく、「あの画像はどこだっけ・・・」となって、メディアライブラリ内を検索するときに参照される情報です。例えば[説明]に「画像の挿入」などのキーワードや記事タイトルを入れておけば、後でその文言で自分が検索できます。

いくみ
いくみ

[タイトル]と[説明]がメディアライブラリ内の検索用文字列にできる、というのは結構便利。メディアライブラリの「絞り込み機能」はあんまり多機能ではないです。でもこの2項目を工夫して管理すれば、「特定の記事で使った画像のみ」を表示させられますよね。私は今後[説明]には記事タイトルを入れようかなと思っています。

いくみ
いくみ

以下のサイトでは、Googleのクロールについてや画像検索について説明されています。とても勉強になりますのでおススメです。知らないことだらけでした・・・!

いくみ
いくみ

以下のサイトは、SEO対策的には1番大事な「代替テキスト」を設定するときのコツが書いてあり、非常に参考になります。

位置調整

挿入した画像をクリック選択すると、左上に位置を調整する選択肢がでます。お好みで使いましょう。

WordPress画像の位置調整(中央揃えなど)

[左寄せ][中央揃え][右寄せ]が、メインカラム内での画像の位置です。

[幅広][全幅]は、位置&サイズという感じですね。この機能を2つのサイズで試したのですが、画像サイズによっては違いが出ないのと、どんな時にこれらを使うと効果的なのかも分からないため、私は使っていません。ちょっと試して、使いたい機能かどうか見てみてくださいね。

画像表示オプション ~ 複数画像を並べる・文章を横にそえる・カバー機能

いくみ
いくみ

更に、画像の表示方法を変化させられるオプションがあります!3つご紹介します。最初の2ステップはすべてに共通です。

最初の共通ステップ

1.[投稿]画面で、画像を挿入したいブロックをクリックして、1番左側のプラスサインアイコンをクリック。

WordPressブロックの追加アイコン

2.表示されるメニューから、[画像]アイコンをクリック。[よく使うもの]に含まれていると思います。無ければスクロールして、[一般ブロック]から[画像]アイコンをクリック。

WordPress一般ブロックのメニュー、画像アイコン

2.一番左端の、[ブロックタイプまたはスタイルを変更]というアイコンをクリック。

WordPress画像表示オプション

複数画像を並べる方法 ~ ギャラリーの使用手順

3.[ギャラリー]をクリック。

WordPress複数画像を並べる方法

3.画像をドラッグするか、[アップロード]ボタンから新規でアップロードするか、[メディアライブラリ]ボタンでアップロード済みの画像を選択。

WordPress複数画像を並べる方法(ギャラリー)

4.複数選んで並べてみました!

順番や枚数を変更したいとき:

できあがったギャラリーの画像をクリックすると左上に鉛筆マークのアイコンが表示されます。

WordPress画像ギャラリー編集方法

鉛筆アイコンをクリックすると編集画面になり、枚数を増やしたり減らしたり、キャプションをつけたり、並び順を変えたりできます。([メディアライブラリ]から画像を選ぶ場合は、最初にこの画面になります。)

WordPress画像ギャラリー編集方法

カラム数を変更したいとき:

できあがったギャラリーの画像をクリックすると、右サイドに[ギャラリーの設定]が表示されます。[カラム]の数字を変えれば、何列で並べるかを設定できます。

WordPress画像ギャラリー編集方法
いくみ
いくみ

ギャラリーの画像にリンク設定の[カスタムURL]があると便利!と思いましたが、その選択肢は出てきませんでした。残念。

画像の横に文章を書く方法 ~ メディアと文章を使用

3.[メディアと文章]をクリック。

メディアと文章 - 画像と文章を並べる

4.[コンテンツ]という部分に文章を入力できます。

上にアイコンが4つあります。左から、[幅広][全幅][メディアを左に表示][メディアを右に表示]です。お好みで選択しましょう。

メディアと文章 - 画像と文章を並べる

使用例

ここに入力する文章も、「タイトル」や「リスト」にできます。

カバー機能のご紹介

使用例です↓。

「カバー」機能を使うと、投稿画面で画像を背景にして文字を入力できます。

投稿画面で画像に入れる文字を編集できるんですね。でもうす暗くなってしまうんですね。

ステップ1・2は今までと同じです。

3.以下で[カバー]をクリック。

WordPressカバー機能 画像に文字を入れる

4.お好みの方法で画像をアップロード。以下のようになります。カーソルが出るので文字を入力します。

WordPressカバー機能 画像に文字を入れる

アイキャッチ画像の挿入手順 (記事トップ)

いくみ
いくみ

スタート地点が違うだけで、基本は同じです!

1.[投稿]画面の右サイドにある[文書]タブをクリック。(サイドに何もない!と思ったら、[公開する]ボタンの横にあるお花のアイコンをクリックしてください。)

アイキャッチ画像の挿入手順

2.少しスクロールすると、[アイキャッチ画像を設定]というボタンがあります。クリック。

アイキャッチ画像の挿入手順
31[WordPress] 画像の挿入方法・画像に追加できる情報・表示機能

3.画像ファイルを新規でアップロードする場合は[ファイルを選択]をクリック。ドラッグ&ドロップも可能です。

画像がアップロード済みだったら、[メディアライブラリ]タブをクリックして画像を選択します。

アイキャッチ画像の挿入手順

4.いずれの方法でも、画像を選んで、[代替テキスト]などの情報をお好みで入力します。[選択]をクリックで完了です。

おわりに

画像の挿入は、最初から簡単にできてしまった分、逆に何も学んでいなかったことが分かりました。

いくみ
いくみ

画像が多いため「最適化」していく作業も大変ですが、少しずつ更新していこうと思います。

奥が深いですねぇ・・・。

画像挿入方法は、2000文字くらいで書けるかなと思ったのですが、全然無理でした★。

4倍になるとは・・・。

でも1番勉強になった記事でもありました。

日々これ精進
congerdesignによるPixabayからの画像

コメント

タイトルとURLをコピーしました