記事に画像を挿入

記事を作成する時に、記事の中に画像などメディアを挿入する方法を確認します。画像を挿入する場合は画像へのリンクやサイズ、配置方法などを指定することができます。それぞれ指定した場合にどのようになるのかも合わせて確認します。

1.画像の挿入手順
2.画像の配置

画像の挿入手順

管理画面にログインし、左側メニューの中の「投稿」メニューの中にある「新規追加」メニューをクリックして下さい。

p3-1

「新規投稿を追加」画面が表示されます。

p3-2

記事のタイトルや本文などを入力した上で、画像を挿入したい位置にカーソルを置き、次の位置にある「アップロード/挿入」と書かれた箇所をクリックして下さい。

p3-3

メディアの追加画面が表示されます。

p3-4

追加する方法として(1)コンピュータから、(2)URLから、(3)メディアライブラリ、の3つがあります。

(1)のコンピュータからの場合はメディアのアップロードの場合と同じです。(2)については別のページで解説します。今回は事前にアップロード済みの(3)メディアライブラリを使って画像を挿入します。では「メディアライブラリ」と書かれたタブをクリックして下さい。

p3-5

アップロード済みのメディアが一覧で表示されます。使用するメディアの右端に表示されている「表示する」と書かれたリンクをクリックして下さい。

p3-6

「タイトル」や「代替テキスト」についてもこの画面で編集が可能です。他に「リンクURL」「配置」「サイズ」を設定します。

p3-7

「リンクURL」は画像に対してリンクを貼るかどうか、貼る場合はリンク先のURLを指定します。テキストボックスにはデフォルトの値として画像が保存されているURLが入力されています。URLを直接手で編集されてもいいですし、テキストボックスの下に表示されている「なし」「ファイルのURL」「添付ファイル投稿URL」のいずれかのボタンを押して頂いても構いません。

「配置」は画像の配置方法です。「なし」「左」「中央」「右」から選択します。「なし」以外を選んだ場合は画像の回り込みが行なわれます。

「サイズ」は画像のサイズです。「サムネイル」「中」「大」「フルサイズ」から選択します。「フルサイズ」のところに表示されている1600×1200は元画像のサイズを表しています。よって「フルサイズ」を選択すると画像のサイズ変更は行われずに表示されます。「フルサイズ」以外を選んだ場合は画像のサイズ調整が自動的に行なわれます。

今回はサイズを「中」に、それ以外はデフォルトのままとしました。設定が終わりましたら「投稿に挿入」ボタンを押して下さい。

p3-8

エディタのカーソルがあった位置に画像が指定したフォーマットで挿入されます。

p3-9

HTMLエディタに切り替えると画像は次のように挿入されていることが確認できます。

<a href="http://localhost/wordpress/wp-content/uploads/2012/01/river.jpg">
<img class="alignleft size-medium wp-image-212" title="清流"
  src="http://localhost/wordpress/wp-content/uploads/2012/01/river-300x225.jpg"
  alt="" width="300" height="225" />
</a>

src属性の値に指定されている画像ファイルは"river-300x225.jpg"となっています。この画像ファイルは元画像である"river.jpg"ファイルをアップロードした時に自動で作成された画像ファイルの一つです。

このように挿入時に画像のサイズをフルサイズ以外のサイズを指定された場合には元の画像を貼り付けておいてwidthやheightの指定で大きさを調整するのではなく、アップロード時に自動で作成された画像の中で指定したサイズの画像ファイルが貼り付けられます。一応覚えておいて下さい。

では「公開」ボタンを押して記事を投稿して下さい。その後でブログを表示して投稿した記事を見てみます。

p3-10