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

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

• WordPress 初心者向け解説「新規投稿を追加するまで」

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

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

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

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

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

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

1. タイトル

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

2. キャプション

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

3. 説明

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

4. リンクURL

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

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

5. 配置

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

A. なし

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

B. 左

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

C. 中央

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

D. 右

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

6. サイズ

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

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

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

テーブル関係のツールアイコン一覧

アイコン	機能	解 説
	表を挿入	カーソルのある位置に表を挿入し、属性を設定する。
	行のプロパティ	カーソルのある行、またはすべての行の属性を設定する。
	セルのプロパティ	カーソルのあるセル、またはすべてのセルの属性を設定する。
	行を上に挿入	カーソルのある行の上に行を追加する。
	行を下に挿入	カーソルのある行の下に行を追加する。
	行を削除	カーソルのある行を削除する。
	列を左に挿入	カーソルのある列の左に列を挿入する。
	列を右に挿入	カーソルのある列の右に列を挿入する。
	列を削除	カーソルのある列を削除する。
	セルの結合を解除	結合したセルを解除して元に戻す。
	セルの結合	複数のセルを結合して一つのセルにする。

表組み（テーブル）の基本

テーブルは一般に表形式のデータを表示するのに使われます。テーブルは縦横に複数のマスで構成されています。1マスを「セル」といい、横のセルの集合を「行」、縦のセルの集合を「列」といいます。

セルには、データを記入するデータセルと、見出しを記入するヘッダセルの2種類があります。

表組み（テーブル）の作成方法

1. テーブルを挿入したい場所にカーソルを移動し、（ 表を挿入 ）をクリックします。
   ご注意：Firefoxをお使いの場合、作成したテーブルの後に段落がないとテーブルからカーソルが抜けなくなるバグがあります。あらかじめ、文字を入力した段落と段落の間にテーブルを挿入するようにしてください。
2. 設定ボックスが表示されますので、テーブルの属性を指定します。
   「一般」タブ
   1. 「列」と「行」の数を設定する。
   2. 「Cellpadding」「Cellspaceing」の値を0にする。
   3. 表に外枠が必要な場合は「枠線」に1以上の数値を入力。数値が大きいほど線の幅が太くなる。枠線が必要ない場合は0にする。
   4. 「幅」と「高さ」を設定する（整数を入力）。空欄にすると自動的にデータの文字数に合わせる。
   5. 表の上にタイトルを付けたい場合は「表に見出しを付ける」にチェックを入れる。
   
   「上級者向け」タブ
   1. 「スタイル」に数値が入力されている場合はそのままにしておく。
   2. 表に外枠を設定したい場合は「枠線の色」のカラーをクリックして色を選択する。
   3. 設定が完了したら「挿入」ボタンをクリックする。
   
3. 表に外枠を設定した場合、Firefoxでは内枠も表示されますが、InternetExplorerの場合は内枠は表示されません。内枠を設定する場合はセルを選択して、（セルのプロパティ）をクリックします。設定ボックスが表示されたら、「上級者向け」タブをクリックします。
   1. 「枠線の色」のカラーをクリックして色を選択する。
   2. 「全てのセルの更新」を選択する。
   3. 設定が完了したら「更新」ボタンをクリックする。
   

「行」「セル」の編集

背景色を設定する

「行」単位で背景色を設定したい場合は、設定したい行にカーソルを移動させて、（行のプロパティ）ツールをクリックします。設定ボックスが表示されたら、「上級者向け」タブをクリックします。

1. 「背景色」のカラーをクリックして色を選択する。
2. 「選択行の更新」になっていることを確認する。
3. 設定が完了したら「更新」ボタンをクリックする。

「セル」単位で背景色を設定したい場合は、設定したいセルにカーソルを移動させて、（セルのプロパティ）ツールをクリックします。設定ボックスが表示されたら、「上級者向け」タブをクリックします。

1. 「背景色」のカラーをクリックして色を選択する。
2. 「選択セルの更新」になっていることを確認する。
3. 設定が完了したら「更新」ボタンをクリックする。

属性（プロパティ）を設定する

背景色と同じようにしてセルや行の属性を設定できます。主な項目は以下のとおりです。

設定した属性を適用する際、適用する範囲を選べます。選択セル、選択行、行内のセル、奇数行、偶数行、全てのセル、全ての行などが選べます。

列、行の追加・削除、セルの結合

列、行の追加・削除

カーソルがある位置の行の下に新たな行を追加したい場合は、（行を下に挿入）をクリックします。同様に、上に挿入したい場合は、（行を上に挿入）削除したい場合は、（行を削除）をクリックします。

カーソルがある位置の列の左に新たな列を追加したい場合は、（列を左に挿入）をクリックします。同様に、右に挿入したい場合は、（列を右に挿入）削除したい場合は、（列を削除）をクリックします。

セルの結合

複数のセルを結合して一つのセルにすることが出来ます。

1. 結合したいセルの中で基準となるセルをクリックする。列方向の場合は、一番上のセル、行方向の場合は一番左のセルが基準になる。
2. （セルの結合）をクリックする。設定ボックスが表示される。
3. 列方向に結合したい場合は「行」に結合するセルの数を、行方向に結合したい場合は「列」に結合するセルの数を入力する。
4. 設定したら「更新」ボタンをクリックする。
5. 結合したセルを解除して元に戻す場合は解除したいセルにカーソルを移動して、（セルの結合の解除）をクリックする。

tinyMCE Advancedで追加できるツール一覧

「tinyMCE Advanced」プラグインをインストールすると、WordPressに標準のヴィジュアル・エディター（tinyMCE）にツールを追加できます。ここでは追加できるツールを解説します。プラグインは以下のリンク先からダウンロードできます。

• ダウンロード

アイコン	機能 [code][/code][/code]	対象	解 説
	下線 [underline]	文字	選択した文字に下線を入れる。 （フォーマット解除）ツールで解除できる。
	画像の 挿入/編集 [img]	カーソル位置	カーソルのある位置に画像を挿入する。上級者以外はWordPress標準の画像アップローダーを利用したほうが良い。
	ページ切り替え を挿入 [<!--nextpage-->]	カーソル位置	カーソルのある位置にNext Pageタグを挿入する。このタグはページを複数に分け、タグの位置に次のページへのリンクが挿入される。
	検索 [--]	テキスト全体	編集中のテキスト内を検索する。また、検索した語句を別の語句に置き換えることも出来る。
	切り取り [--]	文字	選択した文字を切り取る。キーボードのCtrl+Xと同じ。
	コピー [--]	文字	選択した文字をコピーする。キーボードのCtrl+Cと同じ。
	貼り付け [--]	カーソル位置	カーソルのある位置に「切り取り」「コピー」した内容を貼り付ける。キーボードのCtrl+Vと同じ。
	検索/置換 [--]	テキスト全体	編集中のテキスト内の語句を別の語句に置き換える。と同じ。
	印刷 [--]	テキスト全体	作成したテキストを印刷する。
	表情アイコン [--]	カーソル位置	カーソルのある位置に表情アイコンを挿入する。編集画面に挿入されるのは顔文字（:-D ）だが、公開時は表情アイコン（）に変換される。
	上付き [sup]	文字	選択した文字を上付きにする。
	下付き [sub]	文字	選択した文字を下付きにする。
	属性の 挿入/削除 [id,class,title]	カーソル位置	カーソル位置にあるエレメントに属性を挿入する。CSSとHTMLを理解している上級者向けの機能。
	引用 [cite]	文字	選択した文字を引用扱いにする。が段落単位であるのに対し、これは選択した文字だけ引用扱いになる。
	挿入 [ins]	文字	投稿の公開後に追加した部分を区別する際に適用する。追加時の日付と理由を添付できるが上級者向け。日付のフォーマットはYYYY-MM-DDThh:mm:ssTZD。
	削除 [del]	文字	投稿の公開後に削除した部分を区別する際に適用する。削除時の日付と理由を添付できるが上級者向け。日付のフォーマットはYYYY-MM-DDThh:mm:ssTZD。
	日付の挿入 [--]	カーソル位置	カーソルのある位置に日付を挿入する。 （例：2009-09-08）
	時刻の挿入 [--]	カーソル位置	カーソルのある位置に時刻を挿入する。 （例：11:13:14）
	コード整形 [--]	テキスト全体	不要なコードを削除して整理する。
	略語 [abbr]	文字	選択した文字が語句の省略形であることを示す。IE7では動作しないようだ。
	頭字語 [acronym]	文字	選択した文字が語句の頭文字であることを示す。
	水平線 [hr]	カーソル位置	カーソルのある行に水平線を挿入する。
	HTML ソース編集 [--]	--	HTMLの編集画面を表示する。上級者向け。
	制御文字の表示 [--]	テキスト全体	通常表示されないキャラクターを表示する。（例：&nbsp;）
	改行なし スペースの挿入 [--]	カーソル位置	カーソルのある位置に半角スペースを挿入する。
	ガイドライン と非表示項目 の表示切替 [--]	テキスト全体	表組みの枠などの表示/非表示を切り替える
	アンカーの 挿入/編集 [a]	カーソル位置	カーソルのある位置にアンカーを挿入する。リンク先にアンカー名を設定すると、リンクをクリックしたときアンカー位置に移動するようになる。
	背景色 [background-color]	文字	選択した文字の背景色を設定する。 （フォーマット解除）ツールで解除できる。
	スタイル [class]	文字	選択した文字、またはカーソル位置のエレメントにクラスを定義する。CSSとHTMLを理解している上級者向け。
	フォント [font-family]	文字	選択した文字、またはカーソル位置の単語のフォントを設定する。（フォーマット解除）ツールで解除できる。
	文字サイズ [font-size]	文字	選択した文字、またはカーソル位置の単語の文字サイズを変更する。（フォーマット解除）ツールで解除できる。
	表を挿入 [table]	カーソル位置	カーソルのある位置に表組み（table）を挿入する。 テーブル（TABLE）ツール解説
	新規レイヤーの挿入 [position]	カーソル位置	カーソルのある位置に新規レイヤーを挿入する。作成したレイヤーはドラッグして位置を設定できる。

WordPressテキストエディター 標準ツール表

対象が「文字」の場合は選択されている文字にだけ適用されます。「行」の場合はカーソルのある行全体に適用されます。「カーソル位置」の場合はカーソルのある場所に挿入されます。

 が背景色のツールは見た目のスタイルを定義します。
これらのツールは、（フォーマット解除）ツールで解除が可能です。

それ以外のツールは主に文章構造を定義します。設定を解除するにはアクティブになっているツールアイコンをクリックします。アイコンのアクティブ表示はブラウザーによって異なりますので注意してください。Firefox3.5やIE8では、となりますが、IE6やIE7ではとなってわかりづらくなります。

「フォーマット」と「CSS編集」に関しては解除する方法はなく、設定を変更して元に戻します。「フォーマット」の場合は、フォーマット、または、段落を選びます。「CSS編集」の場合は設定した項目を空白にして更新します。

以下、ツールの解説です。

基本ツール（1列目）

アイコン	機能 ［code］	対象	解 説
	太字 [strong]	文字	選択した文字を太字にする。
	イタリック [em]	文字	選択した文字を斜体にする。
	打ち消し [line-through]	文字	選択した文字に打ち消し線を入れる。
	番号なしリスト [ul]	行	このツールを選択中は番号なしリストになる
	番号つきリスト [ol]	行	このツールを選択中は通し番号のリストになる
	引用 [blockquote]	行	このツールを選択中は文章が引用扱いになる。スタイルはテーマの設定による。
	左揃え [left]	行	このツールを選択中は行を左揃えにする
	中央揃え [center]	行	このツールを選択中は行を中央揃えにする
	右揃え [right]	行	このツールを選択中は行を右揃えにする
	リンクの 挿入/編集 [a]	文字	選択した文字をリンクにする。文字を選択した状態でリンクのツールアイコンをクリックすると設定ボックスが表示される。詳細はこちら
	リンク解除 [--]	カーソル位置	カーソル位置にあるリンクを解除する
	Moreタグを挿入 [<!--more-->]	カーソル位置	Moreタグをカーソル位置に挿入する。Moreタグを挿入するとタグ位置よりあとの文章は表示されず、「続きを読む」などのリンクが表示される。
	スペルチェック On/Off [--]	文字	選択した単語のスペルチェックをする。英、独、仏などに対応。
	フルスクリーン [--]	--	このツールを選択すると編集エリアがフル画面になる。もう一度クリックして選択を解除すると通常の画面に切り替わる。
	アドバンスト ツールバーの 表示/非表示 [--]	--	このツールを選択するとツールが拡張されアイコンが2列に表示される。もう一度クリックして選択を解除すると拡張ツール群が非表示になる。

アドバンストツール（2列目）

アイコン	機能 ［code］	対象	解 説
	フォーマット [--]	行	カーソル位置の行を選択したファーマットに変換する。 詳細はこちら
	CSS編集 [style]	行	カーソル位置の行のスタイルを編集する。CSSとHTMLの知識がある上級者向けのツール。
	均等割付 [justify]	行	このツールを選択中は行を均等割付にする。機能させるためにはHTMLで記述を追加する必要がある。
	文字色 [color]	文字	選択した文字の色を変更する。
	テキストとして貼り付け [--]	カーソル位置	カーソルの位置にテキストを挿入する。アイコンをクリックすると設定ボックスが表示される。その中に挿入したいテキストを貼り付ける。このツールを使用しなくてもキーボードのCTRL+Vでテキストを貼り付けられるが、その場合、元のテキストのスタイルが保持されている。ツールを利用した場合は元のスタイルは保持されない。
	Wordから 貼り付け [--]	カーソル位置	カーソルの位置にWordで作成したテキストを挿入する。アイコンをクリックすると設定ボックスが表示される。その中に挿入したいWordのテキストを貼り付ける。
	フォーマット 解除 [--]	文字	選択した文字のスタイルを解除して初期状態に戻す。 解除できるスタイル：太字 イタリック 打ち消し 文字色
	埋め込み メディアの 挿入/編集 [--]	カーソル位置	カーソルの位置にFlashやQuickTimeなどを挿入する。ファイルのURLがわからない場合は、WordPress標準のメディアアップローダーでファイルをアップロードした後、そのファイルURLを挿入するとよい。
	特殊文字 [--]	カーソル位置	カーソルの位置に® ∞などの特殊文字を挿入する。
	インデント [padding-left: 30px;]	行	このツールを選択中は行をインデント（字下げ）する
	インデント解除 [--]	行	カーソルのある行のインデント（字下げ）を元に戻す
	取り消し [--]	--	直前の変更を取り消す。キーボードのCtrl+zと同じ。
	やり直し [--]	--	直前に取り消した変更を再度変更状態に戻す。キーボードのCtrl+yと同じ。
	ヘルプ [--]	--	ヘルプ画面を表示する。

リンクの挿入/編集

（リンクの挿入/編集）ツールをクリックすると設定ボックスが表示されます。そこで必要項目を入力します。

1. 「リンクURL」にリンク先のURLを入力します。（例：http://www.example.com/）
2. 「ターゲット」を選択します。現在のウインドウでリンク先を開く場合は「このウインドウ/フレームで開く」を、新しいウインドウを開く場合は「新しいウインドウで開く」を選びます。
3. 「タイトル」にリンク先を説明するタイトルを入力します。
4. 「挿入」ボタンをクリックします。

フォーマット

「フォーマット」は現在カーソルがある行の構造を変更できます。初期状態ではどの行も「段落」になっています。変更できる構造は以下のとおりです。