• HOME > 
  • WordPress > 
  • ワードプレスで画像挿入を行う方法【初心者にもわかりやすく解説...

ワードプレスで画像挿入を行う方法【初心者にもわかりやすく解説】

投稿日:

ワードプレスでページに画像を表示させるには?

個人のブログでも企業のコーポレートサイトでも文字だけのWEBサイトなどほとんどなく、写真をはじめイラストなど画像の表示は必要不可欠です。

WEBサイトで画像を表示させるにはHTMLのimgタグを用いる必要がありますが、ワードプレスではそういったHTMLの知識を持たない方でもエディターに備わっている機能を使うことで簡単に画像の挿入が可能になっています。

このページでは、ワードプレスでページを作成する際に写真などの画像データを挿入しサイトで表示させる方法を説明します。

リンク先のサムネイル
ワードプレスのエディターの使い方

ワードプレスで投稿ページや固定ページを新規作成し公開するために必要な編集画面でのエディターの使用方法や設定、一覧画面でのページ管理の仕方を説明します。...【もっと読む】

ビジュアルエディターを使う方法

ワードプレスにはHTMLの知識がなくても直感的に画像を挿入できるビジュアルエディターという機能が用意されています。

ビジュアルエディターでは画像やテキストはブロックと呼ばれるパーツとなっており、いろいろなブロックを組み合わせていくことでページを作り上げていきます。

ただ挿入するだけでなく、配置方法などこまかい指定もボタン一つで行うことができます。

画像を挿入する

新たにアップロードして挿入したり、事前にメディアライブラリに保存してあるものを選んで挿入することができます。

固定ページ(もしくは投稿ページ)を開いたら、エディター左上の「+」ボタンをクリックします。

エディター左上

左側のブロック一覧から追加したいブロックを選びます。「画像ブロック」をクリックしてください。

画像ブロック

エディター内に画像ブロックが表示されます。「アップロード」「メディアライブラリ」「URLから挿入」のいづれかの方法で画像を指定します。

画像ブロックが表示

アップロードする場合

クリックするとWindowsであればエクスプローラーが開くのでPC内に保存してある画像を選択します。

メディアライブラリから挿入する場合

クリックするとワードプレスのメディアライブラリが開くので、アップロードしてある画像の中から選択します。

URLから挿入する場合

ファイルパスを記述して画像を指定することができます。

ファイルパスを記述

ワードプレスのメディアを経由せず、FTPなどでサーバーに直接アップロードした画像を使いたい場合はこの方法で行います。

画像が挿入されるとエディター内は次のようになります。

画像が挿入される

サイズを変更する

挿入した画像のフチに表示されている丸いボタンをドラッグするだけで大きさを調整できます。

サイズを変更

画像編集を行う

回転させたり、一部分にズームしたりできます。

ブロックの上のメニューから「切り抜き」をクリックしてください。

編集

続いて「回転」を押すたびに90度づつ回転させることができます。

回転

「虫めがね」ボタンを押すと、画像をズームすることができます。ゲージで拡大率を調整し、画像をドラッグして表示位置を調整します。

ズーム

編集後は「適用」ボタンを押して保存します。編集した画像は別画像としてライブラリに新たに保存されます。

画像はスタイルを変更できる

元データのまま以外に、角を丸めて表示することもできます。

ブロックメニューの左端のボタンをクリックします。

左端のボタン

スタイルの内、「角丸」を選択します。

角丸

挿入後に後述するレイアウト形式へブロックを変換することも可能です。

画像にリンクを貼る

画像をクリックしたら別のサイトやページに遷移するようにリンクを貼ることも簡単にできます。

ブロックメニューから「リンクを挿入」をクリックします。

リンクを挿入

URLを入力すればリンクを貼りことができます。作成済のページであれば候補として表示されるのでそれを選択するだけでOKです。

リンクを挿入

画像を拡大表示させることもできる

リンクの挿入時に「メディアファイル」を選択すると、画像をクリックした際にその画像を拡大表示させることが可能です。

画像を拡大

画像と文章を並べて挿入する

先程の「画像ブロック」では単に画像をページ内に挿入する事しかできずレイアウトは単調なものとなってしまいます。

実際にページを作る時には、画像と文章を並べるといったレイアウトにしたい場面が出てきます。

そういったときには、「メディアと文章ブロック」を使用します。

ブロックメニューから「メディアと文章」を選択します。

メディアと文章

2分割されたブロックが挿入されました。

メディアと文章

画像の方は先程同様に新規アップロードもしくはライブラリから画像を選択、文章の方はテキストブロックと同じように太字などの指定もできます。

メディアと文章

左右の配置を変更できる

ブロックメニューで画像を右に配置するか左に配置するかをボタン一つで切り替えることが可能です。

「メディアを左に表示」「メディアを右に表示」のいづれかをクリックして切り替えます。

左右の配置

垂直配置も選べる

前述の左右の切替ボタンの右隣にある「垂直配置を変更」を押すと、「縦位置を上揃え」「縦位置を中央揃え」「縦位置を下揃え」の3種類から選択することができます。

垂直配置

ギャラリーとして挿入する

複数枚の画像をまとめたうえで並べて配置することができます。

画像と文章を横並びにするときには前述の「メディアと文章」を使いましたが、画像を2つ以上横に並べたい時には「ギャラリーブロック」を使用します。

ギャラリー

配置すると最初は以下のように画像ブロックと同じ表示が出て、アップロードもしくはライブラリから選択を行います。

ギャラリー

このときライブラリでは複数の画像を選択できるようになっています。

ギャラリー

画像を選んで挿入すれば次のように並んで表示されます。

ギャラリー

枚数に応じて自動で並べてくれる

5枚の画像でギャラリーを作成した場合は次のようになります。

自動で並べ

ブロック内で並び替えや削除も可能

各画像をクリックするとボタンが表示され、一枚づつ順番を移動させたり別の画像に置き換えたり、削除を行うことができます。

並び替えや削除

クラシックエディターを使う場合

固定ページ(もしくは投稿ページ)のクラシックエディターではHTMLを直接記述することが可能です。

リンク先のサムネイル
ワードプレスのエディターの使い方

ワードプレスで投稿ページや固定ページを新規作成し公開するために必要な編集画面でのエディターの使用方法や設定、一覧画面でのページ管理の仕方を説明します。...【もっと読む】

HTMLでの画像の表示はimgタグを使用し、タグ内にパスを記述することで画像を指定します。

画像を正しく表示できなかった場合に備えてaltに代替テキストを入力しておきましょう。代替テキストはSEO対策の観点からも入力しておくことが推奨されています。

CSS

<img src="画像のファイルパス" alt="画像の代替テキスト">

ファイルパスの記述間違いに注意

ファイルパスの指定を誤ると画像が正しく表示されませんのでご注意ください。

ワードプレスのメディアにアップロードしてある場合のパスは以下のようになります。

CSS

<img src="http://ドメイン/wp-content/uploads/20XX/01/画像のファイル名" alt="画像の代替テキスト">

カスタマイズはCSSを使って行う

先程のように並べて表示させる場合など調整はCSSで行います。

表示方法などを自由に決められますが、HTMLやCSSの理解が必要になります。

まとめ

以上がワードプレスで画像を挿入する手順です。ビジュアルエディターは、ただ画像を挿入するだけでなくちょっとした加工やレイアウトまで調整できてしまうという優れものです。

クリックしていくだけでページができあがるので、その分記事の内容に時間を割けるのではないでしょうか?

関連する記事

サムネイル

Elementor(エレメンター)の使い方を徹底解説【ページ……

2023年03月09日
最終更新日:2023年03月10日
Elementorは直感操作でワードプレスのサイトを構築できるページビルダープラグインです。ウィジェットをドラッグアンドドロップしていくだけでページのレイアウトを作成することが可能です。
サムネイル

ワードプレスのログイン画面をカスタマイズする方法【プラグイン……

2023年03月07日
最終更新日:2023年03月10日
ワードプレスのログイン画面はカスタマイズしてロゴや背景を変更することができます。ログイン画面のカスタマイズはプラグインを使うかfunctions.phpを編集して行います。
サムネイル

ワードプレスのコンタクトフォーム7で自動返信メールを設定する……

2023年02月28日
最終更新日:2023年03月10日
ワードプレスのContact Form 7プラグインを使って自動返信メールを設定する手順を解説します。フォームの編集画面で「メール(2)を使用」にチェックを入れると、設定項目が表示されて自動返信ができるようになります。
サムネイル

ワードプレスでログイン履歴を確認する方法【SiteGuard……

2023年01月26日
最終更新日:2023年03月10日
多くのセキュリティ対策プラグイン「SiteGuard WP Plugin」を使ってログイン履歴を確認する方法について解説します。
サムネイル

ワードプレスで文字数のカウントを行う方法【エディター搭載の便……

2023年01月26日
最終更新日:2023年03月10日
ワードプレスにはページエディターに標準的に文字数カウントが搭載されています。外部のWebサイトを利用する必要なく、ダイレクトにチェックすることができるので是非活用してみてください。
サムネイル

ワードプレスでnoindexを設定する方法【サイト全体や特定……

2023年01月17日
最終更新日:2023年01月24日
ワードプレスのサイト全体(すべてのページ)にnoindexを設定する方法はとても簡単で、管理画面の「表示設定」にある「検索エンジンでの表示」にチェックを入れるだけです。
サムネイル

ワードプレスでリダイレクトを設定する手順【.htaccess……

2022年10月28日
最終更新日:2023年01月24日
ワードプレスで制作したページにリダイレクトによる転送処理を設定するには、.htaccessを使う方法とプラグインを使う方法の2通りがあります。