WordPressで記事やサイトを作成している中で、「画像を挿入したいけどHTMLの書き方がよく分からない」「なぜか画像がうまく表示されない」と悩んだ経験はありませんか。
とくにHTMLでの画像挿入方法や適切なタグの書き方、パスの指定ミスなど、初心者はつまずきやすいポイントが多くあります。
そこで本記事では、WordPressで画像を挿入するためのHTML記述方法や効率的な活用術、よくあるエラーとその対策までわかりやすく解説します。
画像挿入のHTMLに関する疑問や不安を解消し、より快適なWordPress運用を目指しましょう。
WordPressで画像を挿入するためのHTML記述方法
WordPressの記事や固定ページに画像を挿入する際は、HTMLのimgタグを活用することで、自由度の高いデザインや装飾が可能になります。
画像のパスや属性指定、サイズ調整、キャプション追加など、細かな設定もHTMLを使えば柔軟に対応できます。
画像挿入に使うHTMLタグ
画像を表示する際はimgタグを使用します。
imgタグは自己閉じタグで、画像のURLや説明文などを属性として指定します。
画像の装飾やリンクを付与したい場合は、他のHTMLタグと組み合わせて使うこともできます。
WordPress投稿・固定ページでのimgタグの記述例
WordPressの投稿や固定ページで直接HTMLを編集する場合、次のようにimgタグを使います。
- <img src=”画像のURL” alt=”画像の説明”> 基本の記述例
- <img src=”画像のURL” alt=”説明” width=”300″ height=”200″> サイズ指定つき
- <a href=”リンク先URL”><img src=”画像のURL” alt=”説明”></a> リンク付き
ビジュアルエディタで「カスタムHTML」ブロックやテキストエディタに直接記入することで設定できます。
画像のパス指定（絶対パスと相対パス）
画像ファイルの位置を指定する方法には絶対パスと相対パスがあります。
| パスの種類 | 記述例 | 特徴 |
|---|---|---|
| 絶対パス | https://example.com/wp-content/uploads/sample.jpg | 常に同じURLで画像にアクセスできる |
| 相対パス | /wp-content/uploads/sample.jpg | サイト内でディレクトリ構成が変わらなければ有効 |
WordPressでは絶対パスの利用が推奨されますが、用途に応じて使い分けましょう。
alt属性・タイトル属性の設定
alt属性は画像が表示できない場合に代わりに表示されるテキストを指定する属性です。
また視覚障害者用の読み上げソフトにも利用されるため、画像の内容を的確に記述します。
title属性は、画像にカーソルを合わせた際に表示される補足情報を指定します。
SEOやユーザビリティの観点からも、alt属性は特に重要な役割を持っています。
画像のサイズ指定（width・height属性）
imgタグにはwidth属性やheight属性を使って表示サイズを指定できます。
画像の高さや横幅をピクセル単位、もしくはパーセント指定で調整可能です。
例：<img src=”画像のURL” alt=”説明” width=”300″ height=”200″>のように数値をいれることで、大きさを簡単に調整できます。
サイズ指定がない場合、元画像の大きさで表示されるため、デザインバランスに注意しましょう。
リンク付き画像のHTML記述
画像をクリックすると別ページやファイルへ移動させたい場合は、imgタグをaタグで囲みます。
例：<a href=”リンク先URL”><img src=”画像のURL” alt=”説明”></a>のように記述します。
同一ウィンドウだけでなく、target=”_blank”属性を追加すれば新しいタブで開くリンク作成もできます。
画像にキャプションを入れる方法
画像の説明や著作権表記などを入れたい時は、figcaptionタグを利用すると便利です。
imgタグとセットでfigureタグ・figcaptionタグを使うと、画像に補足テキストをつけられます。
例：<figure><img src=”画像のURL” alt=”説明”><figcaption>キャプションの文言</figcaption></figure>のように記述します。
WordPressの「キャプション」入力欄を活用しても、同じような効果が得られます。
WordPressエディターでHTMLを使って画像を挿入する手順
WordPressでHTMLを用いて画像を挿入することで、細かい表示調整や独自のカスタマイズが可能になります。
標準の画像ブロックやメディア挿入ではできないレイアウトやタグの追加も、HTMLを使えば柔軟に対応できます。
ここでは、実際の使い方や手順についてわかりやすく解説します。
ブロックエディター（Gutenberg）のカスタムHTMLブロック
WordPressのブロックエディター（Gutenberg）では、「カスタムHTML」ブロックを使ってHTMLで画像を直接挿入できます。
手順は以下の通りです。
- 投稿や固定ページの編集画面を開く
- 「＋」ボタンから「カスタムHTML」ブロックを選択
- <img src=”画像のURL” alt=”説明文”> の形式でHTMLタグを入力
- 「プレビュー」で画像が表示されているか確認
画像サイズや配置のカスタマイズもstyle属性で柔軟に行えます。
例えば、画像の大きさを指定したい場合は、<img src=”画像URL” alt=”説明文” width=”300″> のように幅を入力します。
クラシックエディターでのHTML編集
クラシックエディター（旧エディター）を利用している場合、「テキスト」タブで直接HTMLを書き込むことで画像挿入が可能です。
具体的な入力例を下記の表でご説明します。
| タグの記述例 | 解説 |
|---|---|
| <img src=”画像URL” alt=”画像の説明”> | 画像の基本的な挿入方法 |
| <img src=”画像URL” alt=”画像の説明” width=”200″> | 幅を200pxに指定 |
| <a href=”リンク先URL”><img src=”画像URL” alt=”説明”></a> | 画像にリンクを設定する |
記述したHTMLを保存すると、そのまま画像付きで表示されます。
画像URLの取得方法
画像をHTMLで挿入するには、正しい画像URL（アドレス）が必要です。
画像URLの取得方法を簡単にご紹介します。
- WordPressの管理画面から「メディア」を開く
- 挿入したい画像をクリックして詳細画面を表示
- 「URL」欄に表示されているアドレスをコピー
このURLをimgタグのsrc属性部分に貼り付けて使います。
画像の公開範囲やパスが間違っていないかも合わせて確認しておきましょう。
テーマファイルやウィジェットでHTMLを使って画像を挿入する
WordPressでは、投稿や固定ページ以外にも、テーマファイルやウィジェット部分で画像を表示したい場面がよくあります。
こうしたケースでは、HTMLタグを活用することで思い通りの場所やレイアウトで画像を挿入することができます。
ここでは、header.phpやfooter.phpなどテーマファイル、ウィジェット、functions.phpそれぞれの方法について紹介します。
header.php・footer.phpで画像を追加
テーマファイルのheader.phpやfooter.phpなどに直接画像を挿入したい場合、HTMLのimgタグを利用します。
WordPressのテーマファイルに画像を追加する最もシンプルな方法は、以下のようにHTMLを書き込むことです。
- テーマファイルを編集できるエディタで開く
- 挿入したい位置にimgタグを記述する
- 画像ファイルのパスを正しく入力する
例えば、テーマのimagesフォルダにlogo.pngを格納している場合は、次のように記述します。
<img src=”/images/logo.png” alt=”サイトロゴ”>
WordPressではテーマフォルダのパスを直接記述せず、get_template_directory_uri()という関数でパスを取得することで、テーマの場所が変わった時にも画像の表示崩れが起こりにくくなります。
ウィジェットへの画像HTML挿入
ウィジェットに画像を表示したい場合は、「カスタムHTMLウィジェット」を活用するのが便利です。
管理画面から「外観」→「ウィジェット」を開き、「カスタムHTML」を表示したいウィジェットエリアに追加します。
そして本文欄に、表示したい画像のimgタグをHTMLで記入します。
画像の挿入イメージは下記の表を参考にしてください。
| 例 | 記述内容 |
|---|---|
| メディアから取得 | <img src=”アップロードした画像のURL” alt=”説明文”> |
| 外部URL | <img src=”https://example.com/sample.jpg” alt=”外部画像”> |
imgタグにはalt属性を設定することで検索エンジンへのSEO対策や、視覚的に分かりやすいページ作りに役立ちます。
また、レスポンシブ対応したい場合は、style属性やclass属性を追加して調整すると良いでしょう。
functions.phpで画像を読み込む場合
テンプレートタグやショートコードを使って、functions.phpから画像を表示するカスタマイズ方法もあります。
例えば、管理画面からアップロードした画像をウィジェットや記事内に簡単に呼び出したい場合、ショートコードを自作するのは便利な手法です。
以下は、画像のパスとaltテキストを指定できるシンプルなショートコードの実装例です。
- functions.phpに次のコードを追加する
- [myimg src=”画像のURL” alt=”説明文”]のように投稿やウィジェットで呼び出す
function myimg_shortcode($atts) {
$atts = shortcode_atts(
array(
‘src’ => ”,
‘alt’ => ”,
),
$atts,
‘myimg’
);
return ‘<img src=”‘ . esc_url($atts[‘src’]) . ‘” alt=”‘ . esc_attr($atts[‘alt’]) . ‘”>’;
}
add_shortcode(‘myimg’, ‘myimg_shortcode’);
このようにfunctions.phpを活用することで、管理しやすく柔軟に画像をHTMLで挿入できます。
ショートコードで画像を挿入すれば、複数の場所に共通の画像を表示したい場合にも再利用が簡単です。
WordPressで画像挿入時に起こりがちなHTMLのトラブルと対策
WordPressの投稿編集画面で画像を挿入すると、通常は自動でHTMLのimgタグが生成されます。
しかし、細かいカスタマイズや手動入力をする際に、HTMLの記述ミスなどのトラブルが起きることもあります。
この章では、よくある画像挿入時のHTMLトラブルとその対策について説明します。
画像が表示されない場合のHTML確認ポイント
画像が投稿内でうまく表示されない場合、まずHTMLソースが正しく記述されているかをチェックしましょう。
特に以下のポイントを確認すると改善が見込めます。
- imgタグのsrc属性が正しく設定されているかを確認
- src属性のURLのスペルミスや不要な空白がないかを見直す
- imgタグがHTMLの閉じタグ（> または />）で正しく終了しているかもチェック
- alt属性などに不適切な引用符や特殊文字が使われていないか注意
HTMLエディタで上記のポイントを意識し、不備があれば修正しましょう。
パスミスによる画像非表示の典型パターン
画像が正しく表示されない原因の一つにパスの指定ミス（パスミス）があります。
よくあるパスミスのパターンと例を以下の表でまとめます。
| 現象 | 記述例 | 問題点 |
|---|---|---|
| ドメインが抜けている | <img src=”/wp-content/uploads/sample.jpg”> | 絶対パスでない場合、表示されないことがある |
| ”http:”や”https:”が不足 | <img src=”//example.com/image.jpg”> | 一部の環境でプロトコル省略が原因となる |
| ファイル名の綴りミス | <img src=”sample_imgae.jpg”> | 正しいファイルと一致しない |
| アップロードミス | <img src=”not_exist.jpg”> | そもそも画像がサーバーに存在しない |
上記のようなミスがないかもう一度確認してみると良いでしょう。
画像サイズ・比率崩れの解消
画像がうまく表示されていても、サイズや比率が崩れて見えることもよくあります。
このような場合は、HTMLやCSSで画像の幅（width）や高さ（height）を適切に設定しましょう。
imgタグにwidthやheight属性を明示的に記述することで、ブラウザ側がレイアウトを正しく処理しやすくなります。
また、WordPressテーマやプラグインが独自でCSSを適用している場合、widthやheightの指定が上書きされることもあるため注意しましょう。
画像の比率を保ったままリサイズしたい場合は、横幅（width）のみ指定し、高さ（height）を自動にする方法もおすすめです。
スタイルシート上でmax-width:100%などを指定しておくと、スマホなどの小さな画面にもきれいに対応できます。
画像挿入用のHTML記述を効率化する便利プラグイン
WordPressで画像をHTMLと組み合わせて表示する際、効率化のために便利なプラグインを活用すると作業時間を大幅に短縮できます。
直接HTMLを編集する手間を減らし、初心者でも直感的にカスタマイズや管理ができるのが、プラグインの大きな魅力です。
ここでは、画像挿入用HTMLソースの記述や管理をサポートしてくれる、おすすめのプラグインについて紹介します。
カスタムHTMLブロック支援プラグイン
カスタムHTMLブロックをよりスマートに扱えるプラグインは、WordPressの投稿や固定ページでの画像挿入を一層便利にします。
特に複雑なHTMLや属性を毎回手作業で入力する必要がなく、テンプレート化や一括管理も容易です。
人気のカスタムHTML支援プラグインには以下のような特徴があります。
- ショートコードでも再利用可能なHTMLブロックを作成
- 画像のalt属性やクラス指定も簡単に挿入
- ブロックエディターとクラシックエディターの両方でサポート
代表的なプラグインとしては「Reusable Blocks Extended」や「Advanced Custom Fields」などがあります。
画像最適化プラグインとHTMLの関係
画像最適化プラグインは、表示速度やSEO対策で非常に有用ですが、HTMLで画像タグを挿入する場合にも相性を考慮することが大切です。
最適化プラグインの多くは自動で画像サイズを圧縮し、Webに最適な形式へ変換してくれます。
| プラグイン名 | 主な機能 | HTMLへの影響 |
|---|---|---|
| Imagify | 画像圧縮・WebP化・一括最適化 | 自動で画像srcを書き換え |
| ShortPixel | 画像圧縮・サイズ変換 | HTMLの |
| EWWW Image Optimizer | 多機能な画像最適化 | srcset属性やレスポンシブ対応 |
プラグインによってはHTMLのimgタグ属性（srcsetやサイズ指定など）を自動で追加するものもあるため、事前に仕様を確認して使いましょう。
ギャラリー作成支援プラグイン
複数画像を組み合わせてギャラリー表示をしたい場合、専用のプラグインを利用するのが効率的です。
HTMLでギャラリーを一つひとつコーディングするのは手間ですが、プラグインなら写真の選択・順番・レイアウトなどもワンクリックで調整できます。
主なギャラリープラグインのおすすめ機能は以下の通りです。
- ドラッグ＆ドロップ操作で画像の順序を変更
- レスポンシブ対応した美しいレイアウトを自動生成
- クリックで拡大表示やスライドショー化が可能
有名なプラグインには「NextGEN Gallery」「FooGallery」「Envira Gallery」などがあり、どれもHTML知識が不要で直感的に利用できます。
ギャラリープラグインはテーマとの相性も確認しながら選ぶのがおすすめです。
WordPressで画像を挿入するHTML記述の応用例
WordPressの投稿や固定ページに画像を挿入する際、HTMLを活用するとさらに自由なレイアウトやデザインが可能になります。
ここでは、代表的な応用例をいくつか紹介します。
複数画像の横並び表示
複数の画像を同じ行に横並びで配置したい場合は、HTMLとCSSを組み合わせて実現します。
代表的な方法をご紹介します。
- 画像をspanやdivで囲み、display:inline-block;を指定する
- CSSのflexboxを使い、行横に並べて表示する
例えば、以下のようなコードになります。
<div style=”display:flex;”>
<img src=”画像URL1″ alt=”画像1″ style=”width:100px;margin-right:10px;”>
<img src=”画像URL2″ alt=”画像2″ style=”width:100px;”>
</div>
この方法を使うと、画像がきれいに横並びになり、スペース調整も簡単です。
レスポンシブ対応の画像表示
スマートフォンやタブレットなど、さまざまな画面サイズに対応して画像を美しく表示したい時はレスポンシブ対応が欠かせません。
レスポンシブ対応を実現するには、CSSのmax-widthプロパティなどがポイントです。
| 方法 | コード例 | ポイント |
|---|---|---|
| max-width指定 | <img src=”画像URL” style=”max-width:100%;height:auto;”> | 親要素の幅に合わせて自動で縮小される |
| pictureタグ利用 | <picture>…</picture> | サイズ違いの画像を画面幅によって出し分けできる |
特にmax-widthとheight:autoの組み合わせは、画像をどのデバイスでも崩れず表示できるのでおすすめです。
画像にスタイルを追加する
画像を挿入する際、枠線や影をつけたり、角を丸くしたい場合はCSSでスタイルを追加できます。
以下はよく使われるスタイルの例です。
- 枠線をつける：border:1px solid #ccc;
- 角を丸くする：border-radius:8px;
- 影をつける：box-shadow:0 2px 8px rgba(0,0,0,0.2);
たとえば、<img src=”画像URL” style=”border:1px solid #ccc; border-radius:8px;”>のようにstyle属性に追記します。
スタイルを活用することで、挿入した画像の印象や見栄えを自由に調整できるので、デザイン性を高めたい場合に便利です。
WordPress画像挿入のHTML記述で押さえておきたいポイント
これまでWordPressで画像挿入の基本やカスタマイズ方法などを解説してきましたが、最後にHTML記述の際に注意するべきポイントをまとめます。
画像挿入は記事の見やすさやユーザー体験に大きく影響する要素です。
画像にalt属性を設定することは、SEO対策や視覚障がいのある方にも配慮したサイト作りに重要です。
また、画像サイズやファイル名を適切に扱うことで、ページ表示速度の低下を防げます。
これらの基本を心がけておけば、WordPressの記事制作もよりスムーズになります。
ご紹介した内容をもとに、自分のブログやサイトの画像挿入をぜひ見直してみてください。