Web集客無料メール講座

ウェブ集客に関するメール講座を期間限定で無料購読できます。

詳細はこちら

WordPressで記事に画像やアイキャッチを追加する方法(固定ページ・投稿共通)

サイトの骨格を作る

固定ページ・投稿で記事の中に画像を挿入したり、アイキャッチを挿入する方法について解説していきます。

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

WordPressに画像をアップロードする

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

「メディアを追加」という画面が表示されますので、①挿入したい画像を下記画面に直接ドラッグするか、②「ファイルをアップロード」をクリックして、アップロードしたい画像を選択して画像ファイルをアップロードします。

※下記「メディア追加」画面に直接ドラッグした方が楽です。

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

文中に画像が挿入できました。

 

画像の挿入方法を選択する

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

それでは、各設定方法について解説していきます。

1. URL

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

2. タイトル

タイトルは「img要素(imgタグ)内のtitle属性」に入る文字列となります。このtitle属性に入力された文字列は、マウスに画像を合わせた際にツールチップとして表示される文字列でもあります。

3. キャプション

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

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

4. 代替テキスト

画像を文章で説明します。もし画像が表示できない等のエラーが起こった際、ここに入力した文章が表示されます。また、SEO的に、検索エンジンがこの画像がどのような写真なのかを説明する際に重要だと言われています。

※無理して入力する必要はありません。

5. 説明

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

6. 配置

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

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

7. リンク先

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

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

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

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

8. サイズ

入れたい写真のサイズを選びます。(このサイズは設定やテーマによって変わります)

サムネイル150px×150px
幅の上限・高さの上限 300px
フルサイズ幅の上限・高さの上限 なし(ただし、このテーマの記事幅は750pxなので、フルサイズで入れても幅750pxに縮小されて表示されます)

挿入方法選択のまとめ

①~⑧まで解説しましたが、本文中に画像を挿入するうえで、メインで使用するのは⑥~⑧の3項目で、①~⑤についてはあまり使う事は無いかもしれません。

※私は普段⑥と⑧しか使用してません。

 

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

画像サイズ:サムネイル

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

 

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

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

 

 

 

フルサイズ

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

※このテーマの記事幅は750pxですので、幅750px以上の画像を挿入しても幅750pxに縮小されて表示されます。

 

アイキャッチ画像の追加方法

アイキャッチ画像とは

アイキャッチとは人目を引くといった意味があります。WordPressの「アイキャッチ画像」とは、記事単位にアイキャッチ用の画像を設定できる機能を指します。

「Lightning」テーマでは、プラグインの機能で記事のトップにアイキャッチ画像を自動挿入する事が出来ます。
(アイキャッチ画像がどこでどんな風に表示されるかは、そのテーマによって異なります)

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

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

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

今から新しい画像をアップしたい場合は、先ほどの「WordPressに画像をアップする」の手順と同じく、「ファイルをアップロード」を選択して、「ファイルを追加」ボタンからアップロードして下さい。


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

これでアイキャッチ画像の追加方法は終了です。

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
無料メール講座
集客に強いWordPressを活用してあなたのファンを引き寄せる「Web集客無料メール講座」

今なら無料で下記ノウハウが手に入ります。

WordPressでビジネスサイトを構築するマニュアル
売り込まなくても楽に売れるWeb集客ノウハウ
あなたの商品・サービスを必要としている人に届ける方法

期間限定2大プレゼント「WordPressでビジネスサイトを構築するマニュアル」&「Web集客無料メール講座」

PROFILE
この記事を書いた人
瀬間 隆司

上野を拠点に中小企業の資金繰り・事業再生コンサルタントとして活動しています。
最近は自分でウェブサイトを作りたいという企業や、独立された方、独立を考えている方等にWordPressを活用したウェブサイト作り方をレクチャーしています。

他にも、チャットボットを作ったり、業務効率化のためにRPAを研究したり、目新しいものに飛びつく傾向があります。

フォローする
サイトの骨格を作る
クリエイトエクスプレス