子連れサーフトリップ
楽しいことを求めて
WordPress講座

WordPress 基礎から分かる!投稿記事の本文に画像を挿入する方法 ⑦

WordPressの記事に画像を挿入する方法

記事の本文には、画像を挿入することができます。

本文に画像を挿入する

STEP1 画像をアップロードする

(メディア追加の画像)

①記事の編集画面を表示すし、挿入する場所にカーソルを表示
②「メディアを追加」をクリック

(ファイルをアップロードの画像)
③「ファイルをアップロード」をタブをクリック
④「ファイルを選択」をクリック

(ファイルの選択の画像)
⑤挿入する画像を選択して「開く」をクリック→「メディアライブラリ」タブに切り替わり、画像がアップロードされます。

(挿入の画像)
⑥メディアライブラリから、使用したい画像を選択し、各種設定(※次の項目で詳しく説明します)を行った後、「投稿に挿入」をクリックすることで記事に画像を挿入することができます。

「メディアライブラリ」タブには、これまでにアップロードした画像が一覧で表示されます。ここから画像を挿入することもできますよ。

STEP2 画像の情報を入力する

(メディアライブラリの画像)

①画像を選択
②「タイトル」を編集

使用したいが画像の特徴や意味するもので、「英数字」「ハイフン」等の文字に変更しましょう。「検索エンジン」は、画像のタイトルも見ているので、画像に関連するタイトルをつけるように心掛けてましょう。

③「代替テキスト」を入力

使用する画像の意味する言葉(日本語でもOK)を入力しましょう。検索エンジンは代替えテキストの内容も見ているので、画像に関連のある言葉にしましょう。
「代替テキスト」とは、インターネットの環境などで画像が表示されない時に表示される文字や、視覚障害を持っている方が閲覧する際に音声読み上げソフトで読み上げられるテキストになります。

「画像タイトル」や「代替テキスト」は、検索エンジンに見られていることを意識して適切な内容を入れるようにしましょう。入力しなくても画像は挿入できますが、検索結果を上位に表示させる為にも入力しておいた方がいいでしょう。

④キャプション

「キャプション」に文字が入っていると枠組みができ、画像の下に文字が入るようになります。これは一般的ではないので、指示が無い限り「キャプション」は空にしておくようにしましょう。

⑤配置

画像をどのように配置するかを設定します。
配置は「左」「右」「中央」「なし」があります。「中央」「なし」の時は文字が上下に入ります。「左」「右」は、画像の横に文字を入れる場合に使います。

文字の横に画像を配置するレイアウトは、スマートフォンで表示した際に崩れてしまうことがあるので、初心者にはあまりおススメできません。
画像の配置は「中央」か「なし」にし、文章は画像の下に入れるのが良いでしょう

 

⑥リンク先

画像をクリックした際のリンク先を設定します。

●なし………………………リンクを設定しない
●メディアファイル………その画像だけのぺージを表示する
●添付ファイルのぺージ…その画像が貼られているぺージを表示する
●カスタムURL……………指定したURLのぺージを表示する

リンク先は、WordPressの標準では「メディアファイル」となっています。「メディアファイル」は画像をクリックすると、画像のみが1ぺージ表示される設定です。「メディアファイル」の画像リンクは嫌われる場合もあるので、「リンク先なし」にするという場合もあります。

⑦サイズ

画像のサイズを設定します。
サイズには、「サムネイル」(※1)「中」「大サイズ」「フルサイズ」があります。
WordPressは、画像をアップロードする際に、「フルサイズ」以外の「大」「中」「サムネイル」の3種類が自動的に作成されます。
「フルサイズ」はカメラで撮った場合などは、画像サイズがおおきく読み込みに時間がかかります。特にスマホでは表示されるまでに時間がかかる事があるので、要注意です。

WordPressでアップする前にサイズをある程度小さくしておくこともおすすめです。
画像を追加後編集することで、「カスタムサイズ」を設定することができます。カスタムサイズで、自分でサイズを指定することも可能です。幅や高さを変えると、連動して片方がかわります。比率を変えない様にサイズを変更できます。
カスタムサイズにした場合、同じ幅にするなど統一感を持たせるといいでしょう。

※1:「サムネイル」は一番小さく、一覧画像でアイキャッチ画像が出る時に使われるサイズです。標準の場合は、サムネイル画像は正方形です。

フルサイズは、画像が大きくなりすぎて読み込みに時間がかかる場合があります。「中」または「大」がおススメです。
また、記事内の画像表示サイズがバラバラだと見栄えが悪いので、サイズは統一するようにしましょう。

STEP3 画像を挿入する

(画像挿入の画像)と(挿入されたイメージ画像)

「投稿に挿入」をクリックすると、本文に画像が挿入されます。

(画像編集の画像)

記事に挿入した画像を選択するとメニューが表示されます。このメニューから画像の削除や情報の編集ができます。
①配置の変更
②情報の編集
③削除