WordPress初心者にも扱いやすいレンタルサーバー heteml
Post Image

WordPress ビジュアルエディター(TinyMCE)で画像を挿入する方法

WordPressの投稿記事に写真などの画像を挿入することはよくあります。WordPressの初心者を対象に投稿記事に画像を挿入する方法を解説します。ビジュアルエディター(TinyMCE)で投稿記事を作成する際の画像を挿入する手順と、テキストと画像の位置関係の決め方を説明します。

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

ブログに新規投稿を追加する基本的な手順を知りたい場合は下記の記事を参照してください。

写真などの画像をテキスト内に挿入するには、まず、入力エリア内で画像を挿入したい場所をクリックしてカーソルを移動します。

画像を右か左に配して、その横にテキストを回り込ませる場合は、回り込むテキストの前にカーソルを移動します。

次に「画像を追加」ボタンをクリックします。

画像を挿入1

設定画面が表示されたら「ファイルを選択」ボタンをクリックします。お使いのコンピューターから挿入したい画像を選択して開きます。

画像を挿入2

挿入する画像の属性を設定する

画像のアップロードが開始されます。アップロードが完了したら各項目を設定します。

画像を挿入3

1. タイトル

画像のタイトルになります。ブラウザーによってはカーソルを画像の上に重ねたときに表示されます。画像のファイル名があらかじめ入力されています。

2. キャプション

画像に添えるテキストです。入力した場合、通常は画像の下に小文字で表示されます。

3. 説明

この画像に関するメモです。投稿には表示されませんが、管理画面で利用されます。

4. リンクURL

挿入される画像にリンクをするか決めます。リンク先を設定した場合は、画像をクリックするとリンク先が表示されます。

  1. 直接入力:リンク先のURLがわかっている場合は直接入力します。
  2. なし:画像に対してリンクをしません。入力フィールドは空欄です。
  3. ファイルのURL:画像のオリジナルにリンクされます。サムネイルなど、オリジナルより小さいサイズに対して使用します。
  4. 投稿のURL:画像のオリジナルを表示するブログの投稿にリンクします。「ファイルのURL」の場合は、オリジナル画像だけが表示されるのに対し、「投稿のURL」は投稿記事の体裁で表示されます。通常は「ファイルのURL」が使われます。

5. 配置

画像とテキストの位置関係を設定します。WordPressのテーマ(デザイテンプレート)によってはテキストの回り込みに対応していない場合があります。

A. なし

テキストの回り込みはありません。画像とテキストが同じ段落内にある場合は画像の底辺がテキストのベースラインと同じになります。

B. 左

配置1

画像は左に配置され、画像より後ろにあるテキストは画像の右に回り込みます。

C. 中央

配置2

画像は段落の中央に配置されます。テキストの回り込みはありません。

D. 右

配置3

画像は右に配置され、画像より後ろにあるテキストは画像の左に回り込みます。

6. サイズ

投稿に挿入する画像をオリジナルではなく縮小したサイズの画像にすることが出来ます。オリジナルが大きな写真の場合、投稿にはサムネイルを挿入して、オリジナルの写真にリンクしておくと投稿も読みやすくなります。

サムネイル、中サイズ、大サイズの大きさは、設定で変更できます。左メニューの「設定」>「メディア」で変更します。

設定が完了したら「投稿に挿入」ボタンを押します。

2 コメント/トラックバック

この記事に対してのコメントがありましたらコメントフォームから送信してください。

Trackbacks

  1. WordPress 初心者向け解説「新規投稿を追加するまで」 | フリッヂデザイン

    [...] WordPress ビジュアルエディター(TinyMCE)で画像を挿入する方法 [...]

  2. WordPressの知られざる機能「ギャラリー」 | フリッヂデザイン

    [...] 画像の挿入に関しては以下の記事を参照してください。 WordPress ビジュアルエディター(TinyMCE)で画像を挿入する方法 タグ: 初心者 [...]

コメントフォーム