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

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

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像

本記事は執筆時点(2021年02月09日)の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。

広告
広告

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

個人のブログでも企業のコーポレートサイトでも文字だけの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の理解が必要になります。

まとめ

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

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

広告
広告

関連する記事

サムネイル

WPでカスタム投稿に対してカスタムフィールドを設置する【プラ……

2024年12月06日
WPのカスタム投稿の編集画面にプラグインを使わずにカスタムフィールドを設置する方法について学んだので備忘録として残しておきます。 カスタムフィールドとは? Wo […]
サムネイル

WPのカテゴリー内の項目(ターム)の表示順を変更【プラグイン……

2024年12月03日
WordPressにおいてカテゴリーの項目(ターム)を一覧表示させたときの表示順をプラグインを使わずに変更する方法を学んだので備忘録として残しておきます。 ター […]
サムネイル

WPのカスタム投稿一覧表への列(カラム)の追加と並び替え【プ……

2024年12月03日
最終更新日:2024年12月05日
WPのカスタム投稿タイプを作ってサイトを構築していく中で、管理画面上での一覧ページに任意の列(カラム)を追加したり、表示順を並び替える方法を学んだので備忘録とし […]
サムネイル

WPのカスタム投稿タイプでカテゴリーやタグを設定できるように……

2024年12月03日
WordPressのカスタムタクソノミーを使ってカスタム投稿タイプにカテゴリーを設定する方法について学んだので備忘録としてまとめます。 カスタムタクソノミーとは […]
サムネイル

WPでカスタム投稿タイプを追加してページを分類する方法

2024年12月03日
WordPressのカスタム投稿機能を使ってぺージを分類する方法について学んだので備忘録としてまとめます。 カスタム投稿タイプとは? WordPressでは、標 […]
サムネイル

WPで下書きページを第三者と共有できるプラグイン【Publi……

2024年11月07日
WordPressにおける下書き状態のページは非ログイン状態では閲覧することができないので、新規追加予定ページをクライアントにチェックしてもらう時の良い方法を探 […]
サムネイル

WordPressの予約語とは?【カスタム投稿タイプ・カスタ……

2024年11月07日
WordPressのカスタム投稿タイプやカスタムタクソノミーを扱うにあたり、予約語について学んだので備忘録としてまとめます。 予約語とは? WordPressで […]