【WordPress】画像やアイキャッチを挿入する方法【固定ページ・投稿共通】

【WordPress】画像やアイキャッチを挿入する方法【固定ページ・投稿共通】WordPress

WordPressの固定ページ、投稿で画像やアイキャッチを挿入する方法をお探しの方向け。

WordPressでは、画像をアップロードして固定ページや投稿のページ中に画像を挿入したり、アイキャッチを挿入することができます。

この記事では、画像やアイキャッチを追加する方法を解説します。

画像を挿入する方法は、固定ページ・投稿いずれも手順は同じです。
スポンサーリンク

WordPressのページ中に画像を挿入する方法

  • 画像をアップロードする方法
  • 画像挿入時の設定
  • 【サイズ別】画像を追加した時の表示例

上記のとおりです。

画像をアップロードする方法

最初に、WordPressに画像をアップロードする方法を解説します。

画像を挿入したい段落にカーソルを合わせ、「メディアを追加」をクリックします。

「メディアを追加」という画面が表示されますので、以下いずれかの方法で画像をアップロードします。

  • 挿入したい画像を下記画面に直接ドラッグする
  • 「ファイルをアップロード」をクリックして、アップロードしたい画像を選択する
ドラッグした方が楽です。

画像ファイルがアップロードされたら、挿入したい画像にチェックをいれ、「投稿に挿入」ボタンをクリックします。

ページ中に画像を挿入することができました。

画像挿入時の設定

先程の例では画像をアップロードしてそのままページに挿入しましたが、WordPressではページ中に画像を挿入する際、画像の大きさや画像の配置、リンクの有無やタイトル設定等、色々と設定する事ができます。

各項目の設定方法について解説します。

  1. URL
  2. タイトル
  3. キャプション
  4. 代替テキスト
  5. 説明
  6. 配置
  7. リンク先
  8. サイズ

①URL

画像の保存先のURLです(これは設定ではありません。画像の保存先を表示しているに過ぎません)。

②タイトル

タイトルは「img要素(imgタグ)内のtitle属性」に入る文字列となります。

このtitle属性に入力された文字列は、マウスに画像を合わせた際にツールチップとして表示される文字列でもあります。

③キャプション

キャプションは英語のCaption本来の意味どおり「写真・画像の説明文」という役割を持っています。

キャプションに文字列を設定すると、投稿画面では、以下のようにaタグ・imgタグを囲む形で、WordPressのショートコードであるcaptionタグが追加されます。

④代替テキスト

画像を文章で説明します。

もし画像が表示できない等のエラーが起こった際、ここに入力した文章が表示されます。

また、SEO的に検索エンジンがこの画像がどのような写真なのかを説明する際に重要だと言われています。

無理に入力する必要はありませんが、画像のSEO対策を施しておきたいという方は、設定しておきましょう。

画像のSEOの詳しい解説は「画像のSEO対策「代替テキスト(alt属性)」とは?設定の意味・方法を解説」をどうぞ。

⑤説明

「説明」蘭は、画像に関する覚書・メモのようなものであり、ここに記入した項目がWebサイトに表示される事は一切ありません。

Webサイトの管理者が画像を管理し易くするためのものです。

⑥配置

「配置」は、写真を左右真ん中、どこに入れたいのかを選択します。

画像が左によって、右側にあいた空間に文字や他の写真が入ります
中央写真が中央に入り、空間があいていても文字や他の写真は入りません
画像が右によって、右側にあいた空間に文字や他の写真が入ります
なし画像は文字と同じように左により、右側にあいた空間に文字や他の写真は入りません

⑦リンク先

通常は「なし」を選択しておけば良いかと思います。

なし画像をクリックしても何も起こりません(リンクなし)
メディアファイル画像をクリックすると、アップロードした画像が表示されます。
添付ファイルのページ

画像をクリックすると、アップロードしたファイルを表示するために自動で作成されたページが表示されます。

※理由がないかぎりこのリンク先を指定しないほうが良いと思います。

カスタムURL「カスタムURL」を選択すると、リンク先のURLを設定するためのテキストボックスが表示され、任意のURLを入力すると、画像をクリックした際にリンク先へ移動します。

⑧サイズ

ページ中に挿入する画像のサイズを選びます。

サイズは設定やテーマによって変わります。
サムネイル150px×150px
幅の上限・高さの上限 300px
フルサイズ

幅の上限・高さの上限 なし(ただし、このテーマのページ幅は728pxに設定しているため、フルサイズで画像を挿入しても幅728pxに縮小されて表示されます)

挿入方法選択のまとめ

8つの項目を解説しましたが、ページ中に画像を挿入するうえで、メインで使用するのは⑥~⑧の3項目で、①~⑤については殆ど使わないと思います。

【サイズ別】画像を追加した時の表示例

画像を追加した時の表示例をサイズ別に紹介します。

  • 画像サイズ:サムネイル
  • 画像サイズ:中(300×200)
  • フルサイズ

順番に紹介します。

画像サイズ:サムネイル

配置:左
リンク先:メディアファイル
サイズ:サムネイル

 

画像サイズ:中(300×200)

配置:左
リンク先:添付ファイルのページ
サイズ:中(300×200)

 

 

フルサイズ

配置:なし
リンク先:なし
サイズ:フルサイズ

当サイトのテーマの記事幅は728pxに設定しておりますので、、幅728px以上の画像を挿入しても728pxに縮小されて表示されます。

 

WordPressにアイキャッチ画像を設定する方法

  • アイキャッチ画像とは
  • アイキャッチ画像の挿入方法

上記のとおりです。

アイキャッチ画像とは

アイキャッチとは人目を引くといった意味があります。

WordPressの「アイキャッチ画像」とは、記事単位にアイキャッチ用の画像を設定できる機能のことをいいます。

具体的には、下図のようなイメージです。

テーマによってはアイキャッチ画像を出力しないものもありますが、最近のテーマは殆ど表示されるようになっています。

アイキャッチ画像の設定方法

アイキャッチ画像の設定方法について解説します。

固定ページ・投稿の編集画面の右下に「アイキャッチ画像」というメニューがありますので、ここの「アイキャッチ画像を設定」をクリックします。

既にアップロード済みの画像を挿入する場合、画像を選んで「アイキャッチ画像を入れる」ボタンをクリックするだけでアイキャッチを設定できます。

新しい画像をアップしたい場合は、本記事の「画像をアップロードする方法」の手順と同じ、画像をドラッグするか、「ファイルをアップロード」を選択して、「ファイルを追加」ボタンからアップロードして下さい。

画像をアップロードすると、管理画面にアイキャッチ画像が入ります。

この状態で記事更新ボタンをクリックすると、トップページ等の記事一覧やサイドバーウィジェット(サムネイルを出力できるウィジェット)にアイキャッチ画像が表示されます。

以上でアイキャッチ画像の設定方法は完了です。

 

なお、アイキャッチで使用する画像素材は「全て無料で使える!写真&画像素材サイト11選【商用利用OK】」で紹介しているサイトなら無料で使えるのでおすすめです。

 

また、取得した画像のサイズ調整や文字入れが必要な方は、以下の記事で画像加工ツールを紹介していますので、こちらも参考にして下さい。

 

まとめ

WordPressで記事中に画像やアイキャッチを追加する方法について解説しました。

おわり。

 

 

人気記事【無料あり】オンラインプログラミングスクールおすすめ3選【通学不要】

トップへ戻る
タイトルとURLをコピーしました