WordPressサイトの記事に
画像を挿入する方法を紹介します。

また、画像サイズを変更するhtmlコードや
画像をクリックするとリンク先を開くようにするhtmlコード、
リンクタグの使い方を紹介します。

WordPressの画像挿入方法

今回は以下の画像を例にして、
WordPressの記事に画像を挿入する方法を紹介します。

※画像に特に意味はありません
 

ダッシュボードの「投稿」
→「新規追加」で記事の作成を行います。

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

 

「メディアを挿入」画面が開きますので、
「ファイルをアップロード」タブをクリックします。

 

「ファイルを選択」をクリックします。

※下の画像に記載してあるように、
　画像ファイルをドラッグ＆ドロップする
　ことによってもアップロードできます。

 

挿入したい画像を選択し、「開く」をクリックします。

 

画像がサーバーへアップロードされ、
メディアライブラリに画像が表示されます。

 

メディアライブラリで以下のように
検索窓にキーワードを入力すると、

タイトルにキーワードが
入っている画像が抽出されます。

※過去の画像を検索する場合に便利です。

 

挿入したい画像を選択し、
画面右の「添付ファイルの詳細」を確認します。

 

タイトル：画像のtitle属性。

ファイル名の拡張子の前の文字が自動的に入力されます。

使用するのは画像検索時くらいです。
 

キャプション：画像の説明文(HTMLに表現される)。

使用しません。
 

代替テキスト：画像のalt属性。

検索エンジンに何の画像を表示しているのか伝える役割があります。

入力する文字は「記事のメインキーワード」と
「メインキーワードの関連キーワード」を
使って画像を表現します。

そうするとSEO効果も期待できます。
 

説明：画像の説明文(HTMLに表現されない)。

使用しません。
 

次に「添付ファイルの表示設定」です。

 

配置：以下の4つの選択肢があります。

　左：画像を左に配置し、文字は画像の右側に回り込む。
中央：画像を中央に配置し、文字の回り込みはなし。
　右：画像を右に配置し、文字は画像の左側に回り込む。
なし：画像を左に配置し、文字の回り込みはなし。
 

リンク先：以下の4つの選択肢があります。

「メディアファイル」
「添付ファイルのページ」
「カスタムURL」
「なし」

メディアファイル：画像ファイルを開きます
添付ファイルのページ：添付ファイルのみの記事ページを開きます。
カスタムURL：画像をクリックした時にどのURLを開くか指定できます。
なし：画像をクリック出来ない状態にします。

画像挿入時は基本的に「なし」にします。

画像をクリックできるようにすると、
広告のクリック率が下がってしまうからです。
 

サイズ：添付画像のサイズを選択できます。
 

以上の設定が終わったら、
「投稿に挿入」をクリックします。

すると、以下のように画像挿入タグが入力されます。

 

実際の記事でどのように表示されるか確認するために
「プレビュー」をクリックします。

 

以下のように表示されます。

 

以上が、WordPressサイトの記事に
画像を挿入する基本的な方法です。

WordPressの画像サイズ変更方法とリンクタグなどの使い方

基本的な画像挿入方法は上で紹介しましたが、
ここからはWordPressに限らず、
どのサイトでも使えるHTMLを使った
画像挿入方法を紹介します。

もちろんWordPressサイトでも使える方法です。

HTMLのお勉強ということで確認しておいてください。
 

画像を挿入するHTMLタグは

です。

「画像URL」は上の説明で出てきた
「添付ファイルの詳細」画面で確認することができます。

画像サイズの変更方法

では、サイズ変更方法を紹介します。

WordPressでは画像をアップロードした際、
サイズが異なる画像が自動的に生成されます。

そのおかげでサイズを
「サムネイル」「中」「大」「フルサイズ」
など選択できるようになっています。
 

サイズが異なる画像ができている証拠として、

例えば、サイズ「中」の画像を挿入した時は
「画像URL」が「・・・-300×300.jpg」などに
なっているはずです。

また、別の方法として
HTMLタグでサイズを以下のように
指定することができます。

これで、画像ファイルのサイズを
自由に指定することができます。

※ただし、元画像のサイズが大きいものを
　表示上小さくする場合はデータ容量は
　大きいままになります。

画像リンクの指定方法

次に画像をクリックした時に
どのようなアクションを起こすのかを
指定するHTMLタグを紹介します。

画像を拡大したページを開きたい場合は
「URL」に「画像URL」を入力します。

これが先程上で説明した
「リンク先」を「メディアファイル」
に設定した状態です。
 

指定のページを開くようにしたい場合は
「URL」に「そのページのURL」を入力します。

これが先程上で説明した
「リンク先」を「カスタムURL」に設定した状態です。

リンクの貼り方に関しては
以下の記事で詳細を説明していますので
参考にしてください。

関連記事→ リンクの貼り方！HTMLタグやアンカー？新しいタブ(別ウィンドウ)で開きたい！
 

以上、WordPressでの画像挿入方法と
画像挿入に関するHTMLタグに関して紹介しました。

HTMLタグに関してはインターネットで検索すれば、
詳しい説明が書かれているサイトが
たくさんありますので非常に便利です。

初心者の方は少しずつ
HTMLタグの使い方に慣れていってください。

～～～　WordPress画像挿入の関連記事　～～～

画像に関しては以下の記事も確認しておいてください。

関連記事その1
→ 複数画像を一括で圧縮するサイト

関連記事その2
→ 画像挿入時の「リンク先」を「なし」にデフォルト設定する方法

関連記事その3
→ WordPress画像貼り付け時に自動挿入されるclass・width・heighの削除方法！