ワードプレス

WordPressで、記事のなかに「画像」を挿入する手順【記事作成の超基本】

WordPress_記事中への画像の挿入_アイキャッチ



あずきです🐥

WordPressブログにおける…

「画像」を記事に貼る手順

について、初心者さん向けに1から解説していきます♪

この「画像の挿入」については、手順そのものはいたって簡単

ただ、押さえておくべき注意ポイントもいくつかあるので、あわせて解説していきますね

それではさっそく見ていきましょー🐥

プラグインの種類によっては、導入済みのテーマや他のプラグインとの干渉などでWordPressに不具合が発生する可能性があります。 プラグインのご利用にあたっては、あらかじめのバックアップをおすすめします

関連:WordPressプラグイン「BackWPup」の基本的な設定方法【ブログに必須なバックアップ】

このブログのWordPress環境

このブログで使用中のワードプレステーマ

本気でブログ収益化するなら /

WING AFFINGER5 バナー01

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

著者

azuki_01

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

WordPressブログにおける、「画像」の記事中への挿入方法

ステップ1:画像の挿入は、「メディアを追加」から

ブログガイド_見出し_01

編集画面を開いたら、まずは…

WordPress_記事中への画像の挿入_1-01

↑ 本文内の画像を入れたい場所で、一度クリックをして…

WordPress_記事中への画像の挿入_1-02

↑ 画面上部の「メディアを追加」をクリックすると…

WordPress_記事中への画像の挿入_1-03

↑ 画像を選択するための画面になります

ここからは、画像を選択するステップとして…

  • 【パターン①】初めてWordPressにアップロードする画像の場合
  • 【パターン②】すでにアップロードしたことのある画像を使う場合

この2パターンで、手順が若干変わってきます

順に見ていきますね🐥

「なんのことかサッパリ…」という方は、【パターン①】の手順を見てもらえればOK!

このブログで使用中のワードプレステーマ

本気でブログ収益化するなら /

WING AFFINGER5 バナー01

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

ステップ2:画像を選択する【2つのパターン】

ブログガイド_見出し_02

【パターン①】初めてWordPressにアップロードする画像の場合 →「ファイルを選択」から!

さきほどのステップで「メディアを追加」をクリックしたら…

WordPress_記事中への画像の挿入_2-1-01

↑画面中央の「ファイルを選択」をクリックして…

WordPress_記事中への画像の挿入_2-1-02

↑ 自身のPCデータ内から、挿入したい画像を選択しましょう

選んだら、右下の「開く」を選択すると…

WordPress_記事中への画像の挿入_2-1-03

↑ WordPress上に、画像がアップロードされます

正確には、契約してる「レンタルサーバー」のなかにストックされるよ!

ちなみに、一度アップロードした画像を次回また使うときには、次にご紹介する【パターン②】の方法を使いましょう

このブログで使用中のワードプレステーマ

本気でブログ収益化するなら /

WING AFFINGER5 バナー01

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

【パターン②】すでにアップロードしたことのある画像を使う場合 →「メディアライブラリ」から!

同じく最初のステップで「メディアを追加」をクリックしたら…

WordPress_記事中への画像の挿入_2-2-01

↑ この画面で、上部の「メディアライブラリ」タブをクリックしましょう

すると…

WordPress_記事中への画像の挿入_2-2-02

↑ アップロードしたことのある画像が一覧で表示されるので、使いたい画像をクリックすると…

WordPress_記事中への画像の挿入_2-2-03

↑ さきほどの【パターン①】と同じ、画像を選択した状態にもっていけます

同じ画像を何度も新規でアップロードしてしまうと、それだけ「サーバー容量」のムダ遣いになりますよね

サーバーの容量には限度がある!

なので結論…

  • 一度アップロードした画像は、次回以降は「メディアライブラリ」から挿入!

これが基本になります

つづいて、選択した画像の「情報」を設定していきましょう🐥

このブログで使用中のワードプレステーマ

本気でブログ収益化するなら /

WING AFFINGER5 バナー01

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

ステップ3:画像の「情報」を設定して挿入【代替テキスト&画像サイズ】

ブログガイド_見出し_03

上記の【パターン①】or【パターン②】いずれかの手順で、画像を選択できたら…

WordPress_記事中への画像の挿入_3-01

↑ こちらの項目で、挿入する画像の「情報」を入力していきます

拡大すると…

WordPress_記事中への画像の挿入_3-02

↑ ここです

ここの設定は、意外と重要!

まずは、右上の…

WordPress_記事中への画像の挿入_3-03

↑ この「代替テキスト」という欄に…

  • その画像の内容をシンプルに示すワード

を入力しましょう

今回は例として…

WordPress_記事中への画像の挿入_3-04

↑ このように入力してみます

この「代替えテキスト」は、基本的に未入力のままにはせず、毎回ちゃんと設定するようにしましょう

画像を挿入したあとでも、設定とか修正はできるよ!

「代替テキスト」の詳細は、↓ をどうぞ♪

WordPress_画像の代替テキストについて_アイキャッチ
ブログ画像の「代替テキスト」とは?設定手順と注意ポイント【alt属性】

続きを見る

つづいて、画面右下の…

WordPress_記事中への画像の挿入_3-05

↑ この「サイズ」という欄で、任意の表示サイズを選びます

ここは初心者の方でしたら、基本的には…

WordPress_記事中への画像の挿入_3-06

↑ この「フルサイズ」を選んでおけば、まずOK

ただし!

ここの「表示サイズ」うんぬんの前に、そもそもWordPressにアップロードする画像については、画像の…

  • サイズ(ピクセル数)
  • 容量
  • ファイル形式

この3つについて、最低限ちゃんと理解しておきましょう

この、ブログに使う画像の「サイズ・容量・ファイル形式」の注意点については ↓ から♪

※作成中です…

ということで、「サイズ」まで選択できたら…

WordPress_記事中への画像の挿入_3-07

↑ 1番下の 投稿に挿入 をクリックすれば、挿入は完了です

編集画面上に…

WordPress_記事中への画像の挿入_3-08

↑ 画像が表示されました

おしまい♪

あずき🐥

このブログで使用中のワードプレステーマ

本気でブログ収益化するなら /

WING AFFINGER5 バナー01

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

著者

azuki_01

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

-ワードプレス

© 2020 あずきのぶろぐ。