１．クオリティの高い写真やイラストなどのグラフィック素材を使う

写真や画像のクオリティはとても重要です。プレーンで面白みのないサイトも、クオリティの高い写真があるだけで全然違う印象になります。これはお金をかけるのが一番手っ取り早いですが、最近は無料でも高解像度でクオリティの高い写真やイラストを入手できるので、いくつか有用なサイトをご紹介しておきます。

pixabay

＞ http://pixabay.com/

無料ですし、パブリックドメインの写真やイラストを見つけることができますパブリックドメインについてはこちら）。もちろん商用でも使えますし、加工も自由です。著作権のない素材なのであなたの好きに使うことができます。

写真AC

＞ http://www.photo-ac.com/

こちらも無料・商用利用可・クレジット表記不要・リンク不要の高品質素材があつまっています。日本のサイトなので日本人の写真もそろっています。

モデルピース

＞ http://www.modelpiece.com/

最近色んな媒体でここのモデルさんの写真を見るようになりましたよね。基本的に商用利用 OK で、クレジット表記やリンクなども不要です。モデルリリースも取得済みなのでとても使いやすく探しやすいサイトです。かわいい、美人なモデルさんがそろっています！
※2014.11 月現在、ポイント制の有料素材となっています。

ぱくたそ

＞ http://www.pakutaso.com/

こちらもとてもクオリティの高い写真がそろっています。商用利用も OK ですし、クレジット表記やリンクもいりません。モデルリリースに関しては、モデルさんごとに違うので、使用する前に必ずチェックしましょう。
そして、このサイトの写真は面白いのが多いです。時事ネタをすぐに素材にしてくれたり、、、注目を集めるアイキャッチ素材としてパワーを発揮するでしょう。

Freepik

＞ http://jp.freepik.com/

こちらは色んな素材サイトで提供されている写真やイラストを、横断的に検索できるサイトです。いろんなサイトをあちこち探さなくていいので、便利です。ただし、著作権や利用規約などは各サイトのルールに従ってください。

Icons DB

＞ http://www.iconsdb.com/

フラットデザインには欠かせない、フラットなアイコンが豊富にあります。サイズ、形式（jpg, png, gif など）、カラーなどが自由に選べます。変に凝っていないのでデザインのカスタマイズもとてもやりやすくなっています。商用利用も OK です。

写真やイラストの加工に関して

高品質な写真やイラストがあっても問題はそれを加工できないことです。加工できない理由は規約のせいではなく、スキルがないから（もちろん、ライセンスによっては加工不可の素材もありますが）。画像加工はノンデザイナーにとって一番厄介なものかもしれません。そこで、最低限これだけできれば問題ないという加工方法をご紹介します。
それは、、、

写真（イラスト）＋キャプション

です。写真の下に文字を入れるわけです。写真は人の目を引きます。そこにキャッチコピーなどを組み合わせると、メッセージがより明確に伝わるようになります。キャプションの入れ方にはポイントがあります。

広告の父・オグルヴィのレイアウトの法則に従う

広告の父を呼ばれるデビッド・オグルヴィは、広告のレイアウトに関してシンプルな法則を提唱しました。それが、「3 分の 2 ／ 3 分の 1 法則」です。この法則を説明すると、

この法則に従って、画像にもキャプションをつけましょう。画像が上 3 分の 2、キャプションが下 3 分の 1 の構図にします。もしくはその逆で、キャプションが上 3 分の 1、画像が下 3 分の 2 という構図です。ここに書き添える文字は読まれる確率が高いので、相手の中をさらに引くコピーにするとよいです。

その他は黄金比や白銀比などを参考にしてみてください。

画像の上に文字をもってこない

できるだけ画像の上に文字を持ってこないようにしましょう。画像の上に文字をかぶせてしまうと、文字が読みにくくなります。読みにくい文字を読もうとすると、目を細めたり目を凝らしたり若干のストレスを感じます。そのようなストレスを相手に与えないようにしましょう。
なるべく写真の背景がごちゃごちゃしておらず、単一色に近いような場所だとキャプションを入れやすくなります。もしくは、写真とキャプションは別枠にして表示させる、写真の上に半透明のレイヤーを重ねてその上にキャプションを記載する、などの方法がオススメです。

できれば覚えた方がいいテクニック……切り抜き

画像の加工で唯一スキルっぽいものを覚えるとしたら、それは切り抜きだと思います。写真の背景を除いて人物だけにしたい、被写体だけを使いたい、といったニーズが一番多いと思います。
そこで、切り抜きして背景をまっさらにする、そんなテクニックがあれば色々幅が広がるのは間違いありません。まぁでもブログコンテンツを更新していくような使い方なら、別に必要ないとは思います。
さて、切り抜きに関しては Gimp というフリーソフトを使った方法が、色んなサイトで紹介されていますので、参考にしてみてください。

２．1px のドロップシャドウをかける

ドロップシャドウとは影のことです。例えば文字にドロップシャドウを加えると、、、

また、一定の範囲（要素）にドロップシャドウを加えると、、、

分りやすく黄色の影にしていますが、通常はグレーで OK です。1px でもありませんので、だいぶぼやっとした感じにみえると思います。実際はこんなぼやっとした感じで使うことはないでしょう。

やってしまいがちなダサいドロップシャドウ

ぼくもこの CSS の記述を知ったときはやってしまっていました。今思うととてもかっこわるい使い方してたな〜と思います。それは、影を大きくつけることです。5px とか・・・。ぼかしも中途半端だったり。

もちろん、全体のデザインに応じて影の付け方もそれぞれですが、専門スキルのない素人は無難に 1px で、ぼかしも 1 px か　0px の影にしておきましょう。それで十分玄人っぽく見えます。

３．ほんのわずかに、微妙〜にグラデーションをかける

フラットデザインが流行しているので、べた塗りのサイトもよく見かけるようになりましたが、一見べた塗りっぽく見えても、微妙にグラデーションがかかっていたります。
グラデーションをかけるには、このようなウェブ上のサービスを利用するのが簡単です。そして、微妙なグラデーションのポイントは明度を微妙に上げるか落とすかすることです。
見た感じ分かるか分からないかのきわどいくらいに明度を変更させてください。それで質感に落ち着きがでます。はっきり分かり過ぎるグラデーションを付けるとダサくなるので注意。

４．リンクにマウスカーソルを乗せた際、ゆっくりした変化を付ける

リンク部分にマウスのカーソルを合わせると、アンダーバーが現れたり色が変化したりといった効果を付けているサイトがほとんどだと思います。この変化をスローにすることで、ちょっと落ち着いた感じが醸し出されます。変化が自然な感じでかっこいいのです。

CSS3 によって実現できます。

/* トランジションの設定：つまりスローな動き・変化の設定 */
a {
color: #004f8c;
text-decoration: none;
-webkit-transition-property: background,color;
-webkit-transition-duration: 1s;
-webkit-transition-delay: 0s;
-webkit-transition-timing-function: ease;
-moz-transition-property: background,color;
-moz-transition-duration: 1s;
-moz-transition-delay: 0s;
-moz-transition-timing-function: ease;
-o-transition-property: background,color;
-o-transition-duration: 1s;
-o-transition-delay: 0s;
-o-transition-timing-function: ease;
}
/* リンク部分の設定 */
.example a {
display: inline-block;
margin-bottom: 1em;
padding: 0.1em 1em;
float: right;
color: #eee;
background: #424242;
}
.example a:hover,
.example a:focus,
.example a:active {
border-bottom: 0px;
background: #004f8c;
}

５．サイトのカラー決めで迷った時はこの配色をパクる

ここで紹介されているシーン別の配色をそのまま参考にして取り入れれば、とんでもない配色になってしまうことは、避けられると思います。あとは配色パターンの中から 3 ~ 4 つくらいの色を選び、あまり複数の色を使いすぎないように注意してデザインを整えましょう。
また緩急が大事ですので、目立たせるべき部分とそうでない部分をはっきりさせ、色のコントラストで目立たせるべきところが目立つように整えていきましょう。

画像の編集でできること

画像の編集でできることは、基本的に画像を挿入する際に設定したことと同じです。画像挿入の際に設定し忘れたことや、設定を変えたいと思ったことなどは、こちらで後から変更できます。

(1) サイズ変更

イメージサイズを縮小することができます。割合で選べるようになっています。ここで変更するよりは、【詳細設定】の画面を開いて変更した方が、横幅と高さを実際の数値で確認できるので分かりやすいです。

(2) 配置

画像の配置を変更できます。「なし」だと文字と同じように左詰めになります。「左」や「右」は回り込みです。CSS で言うと float が適用されています。「中央」はその名の通り真ん中配置になります。【 style=”text-align: center;” 】が適用されます。配置はプレビューでも確認できます。

HTML 上で、配置はどのように指定されているか？

例えば Twenty Eleven の場合は、画像の配置を左に指定すると、ここに【 alignleft 】という class が追加されます。スタイルシートで【 .alignleft 】を探してみると【 float: left; 】となっているはずです。つまり、イメージタグに直接【 style=”float: left;” 】と記述して回り込ませているわけではなく、スタイルシート側で用意している回り込みスタイルを class を使って指定しているわけですね。

・左に配置した場合

<img src="画像URL" class="alignleft" />

・Twenty Eleven のスタイルシート

.alignleft {
 display: inline;
 float: left;
 margin-right: 1.625em;
}

(3) タイトル

デフォルトでは、画像のファイル名がタイトルになっています。このタイトルに記載した内容は、ブラウザ上で画像にカーソルを合わせた場合に表示されます。個人的にここを変更したことはありません。SEO 的にも重要ではないみたいです。

<img src="画像URL" title="タイトル" />

(4) 代替テキスト

SEO 的にも重要な alt 属性です。目的は、画像が表示されなかった場合に替わりにテキストを表示させることです。また 検索エンジンのロボットなどに、画像の内容を分からせるためのものなので、SEO 的にも重要だとされているわけです。ここには、画像の内容を伝えるテキストを記載する必要があります。

<img src="画像URL" alt="画像の説明" />

(5) キャプション

画像にキャプションが付きます。キャプションというのは、説明書きです。キャプションはショートコードで追加されます。ショートコードを使うと、あらかじめ指定したものを、簡単なコードを記述するだけで表示してくれます。

(6) リンクURL

画像にリンクを貼ることができます。別ページへのリンクを貼るのは OK ですが、画像の URL をそのまま残すのはユーザビリティを損なうのでやめときましょう。
画像を拡大させたい時も、画像をポップアップ表示してくれるプラグインなどを併用することをオススメします。そうすると、いちいち画面が切り替わらないので。。。

<a href="リンクURL"><img src="画像URL" /></a>

画像の詳細設定の使い方

詳細設定の方では、細かい大きさの設定やスタイルの設定などができます。

(1) 画像のサイズを調節する

これは基本の編集画面と同じですが、【詳細設定】の画面では幅と高さが数値として表示されます。割合を選ぶとここの数値が自動的に変わります。
割合だけで変更すると実際にどのくらいのサイズになるかイメージがわきにくいので、実際のサイズを数値で確認しつつ変更すると分かりやすいです。また、割合ではなく実際にサイズを指定して変更することもできます。

<img src="画像URL" width="幅" height="高さ" />

(2) クラスを指定して、外部 CSS のスタイルを指定できる

class を追加することができます。class はあらかじめスタイルシート側で指定しておく必要があります。

<img src="画像URL" class="クラス名" />

(3) スタイルで画像の CSS を追加できる

style を追加することもできます。ボックスの中に入力するのは、指定したいスタイルシートの部分のみです。例えば画像の周りをボーダーで囲みたい時は、【 border: 3px solid #cccccc; 】などのように入力します。

<img src="画像URL" style="ソースコード上でここに表示させたい内容を入力" />

画像をに border のスタイルを適用する場合

例えば、イメージをボーダーで囲みたい場合は、、、

と記述すると、このようになります。

ソースコードを見てみると、このようになっています。

<img src="画像URL" style="border: 3px solid #333333;" alt="alt属性" width="300" height="200" />

(4) 枠線・余白の数値は簡単に設定できる

(3) では任意のスタイルを指定することができますが、枠線の太さ、余白（マージン）については、ここで簡単に指定できます。数値を指定すると、(3) のスタイルの部分に該当するスタイルが自動的に記述されます。
例えば、【上下余白】に【 10 】と入力すると、【 margin-top 】と【 margin-bottom 】に 10px ずつ余白ができます。

詳細リンク設定

ここでは画像にリンクを指定した際の細かい HTML タグを設定できます。

(5) リンクタイトル

タイトル属性を指定できます。

<a href="リンク先URL" title="リンクタイトル"><img src="画像URL" /></a>

(6) リンク rel

rel 属性を指定できます。

<a href="リンク先URL" rel="rel 属性値"><img src="画像URL" /></a>

rel 属性はリンク先のリソースとの関係を表すもので、以下のようなものがあります。

(7) CSS クラス

リンクに class を指定することができます。

<a href="リンク先URL" class="クラス" ><img src="画像URL" /></a>

(8) スタイル

リンクに style を指定することができます。

<a href="リンク先URL" style="スタイル" ><img src="画像URL" /></a>

(9) リンクターゲット

リンク先を別ウィンドウで開くか、同じページで開くか指定できます。チェックを入れると、リンクタグが以下のように変更されます。

<a href="リンク先URL" target="_blank" ><img src="画像URL" /></a>

記事投稿エディタ上から画像をアップロードする手順

メディアの追加方法を順を追って説明します。

(1) メディアを追加したい位置にカーソルを合わせ、「メディアを追加」をクリック

エディタの左上にある「メディアを追加」というボタンをクリックします。

するとこのようなメディア挿入のためのフロー画面が表示されます。

(2) ローカルからファイルをドラッグ&ドロップする（もしくは選択する）

開かれた画像アップロードのフロー上にファイルをドラッグ&ドロップします。フロー上であれば、どんなメニューを開いていても構いません。「ファイルをアップロード」というページでも、「メディアライブラリ」というページでも、「URLから挿入」というページでもOKです。ファイルをドラッグすれば青色に変わり反応してくれます。

※ちなみに、ファイルサイズを超えない限り、複数のファイルを一気にアップロードすることができます。アップしたい画像ファイルを複数選択し、まとめてドラッグ&ドロップすればOKです。

(3) 挿入したい画像にチェックを入れ、必要事項を設定

画像を挿入するに当り、配置や alt、リンクの設定ができます。

代替テキスト

HTML で言うところの alt 属性のことです。何らかの理由で画像が表示されなかった場合に、代わりに表示されるテキストです。このテキストは画像の内容を説明するものにしましょう。画像の内容を理解できない検索エンジン側にも、画像の内容を読み取ってもらうために、つまり SEO のためにも必ず設定してください。

配置

「なし」の場合は左寄せになります。「左」は左への回り込み（CSS では float: left;）、「右」は右への回り込み（CSS では float: right;）、「中央」はその名の通り中央配置になります（回り込みはありません）。
ちなみに、この画像は「左」を選択して回り込ませています。

リンク先

画像にリンクを挿入することができます。設定すると、イメージタグがリンクタグで囲まれます。
リンク挿入に関しては注意したい点があります。なるべくここはリンク「なし」にして、とりわけ画像そのものの URL はリンクさせないようにしましょう。
リンクが貼ってあると、画像をクリックした際にその画像のみが表示され、ユーザビリティを損ないます。画像の URL をリンクさせる場合は、実際のサイズより小さいサイズで挿入し、拡大表示する必要がある時くらいに限りましょう。
ちなみに、画像を拡大表示させたい場合には、こちらのプラグインが使えます。画像をポップアップ表示してくれるプラグインです。画像ポップアップのプラグインは他にもたくさんありますので、探してみてください。

一方、画像の URL 以外のリンク先を指定する場合は、特に気にせず自由にリンクさせて OK です。以前過去記事でも書いていますが、

リンク URL を指定するなら

• 画像をより拡大表示して見てもらいたい場合
• 別のページへ誘導する明確な目的がある場合

に限定して、それ以外は空欄にして何もリンクさせないようにしておきましょう。

ということを忘れないように。

サイズ

WordPressでは、画像をアップロードすると複数のサイズの画像が自動的に生成されます（サーバーの upload フォルダを見ると複数サイズの画像ファイルが確認できます）。
選択肢にはサムネイルサイズ、中サイズ、フルサイズのだいたい３つが表示されているようです。元サイズが大きい場合は大サイズという選択肢が表示される場合もあります。
このサイズの基準は、【設定】＞【メディア】で変更が可能です。また、ここで選べる選択肢以外にも、後ほどサイズを調節することもできます。

(4)「投稿に挿入」をクリック

以上の設定をした上で、「投稿に挿入」をクリックします。すると指定した画像が実際にエディタ上に表示されるはずです（ビジュアルエディタを使用していた場合）。
１度挿入した後も簡単に設定を変更することができます。むしろ、より細かい設定をすることも可能です。画像の編集方法については改めて別の記事で説明したいと思います。

WordPressの記事に挿入した画像の大きさやレイアウトを再編集・再設定する方法

URLを指定して読み込む

外部の画像を読み込んで表示させることも可能です。既に別のサーバーや別のディレクトリ（フォルダ）にアップロードした画像を表示させたい場合には、またアップロードしなおすのは面倒ですし、容量を食うだけです。そこで、既にネット上に上げている画像は、URL指定で使い回しができます。
実際、画像の絶対パスが分かれば、ネット上にあるほぼ全ての画像を表示させることができます。
ただ、他の人の画像の使用は、著作権の問題やその画像が削除されてしまう可能性などを考えるとやるべきではありません。あくまでも自分が所有している画像で、別のサーバーや別のディレクトリ（フォルダ）にアップしている画像を使う際にこの機能を使いましょう。

画像のアップロードと挿入方法

画像をアップロードや挿入したい場合は、エディタのツールバーの外にあるというボタンをクリックします。ビジュアルエディタを使っていても、HTML エディタを使っていても、このボタンは共通してエディタの上部にあります。
クリックするとこんなウィンドウが開きます。

画像をアップロードする方法は主に 3 通りあります。

それぞれ詳しく見て行きましょう。

(1) ローカル（自分のPC上）からファイルをアップロードする

ほとんどの画像は、まず自分の PC の中にあるものです。なのでこれが一番使用頻度が高いんじゃないでしょうか？　メディアの【アップロード/挿入】ボタンをクリックすると、まず最初に開かれているのもアップロード用の画面です。
※もし、同じような画面が表示されない場合は、「新アップローダーもご利用ください」をクリックしてください。
アップロードする方法は、画面中心にある【ファイルを選択】からアップロードしたいファイルの場所を探して【開く】か、ローカルからアップロードしたいファルコンをドラッグ＆ドロップして取り込みます。

ここからアップロードしたファイルは、WordPress の【wp-content】中にある、【uploads】というディレクトリ（フォルダのこと）に入ります。
アップロードすると、以下のような画面が表示されますので、【投稿に挿入】をクリックすれば挿入されます。

が、ここでは【投稿を挿入】をクリックする前にいくつか設定しておきたいことがありますので、早まらずにちょっとまちましょう。詳細は後ほど。
＞ 今すぐ知りたい！

(2) すでにインターネット上にアップロードされているファイルのURLを指定する

これはネット上にある画像の URL を直接指定して仕様する方法です。ただし、著作権や利用規約には十分注意してください。

URL を指定する場合の注意

利用規約というのは、例えば画像素材配布サイトなどには「URL を直接指定しないでください」と注意書きがなされている場合が多いです。つまり「使ってもいいけど、一旦ダウンロードして、あなたのサーバーにアップロードしてから使ってね」という意味です。
ネット上に溢れ返っている画像ファイルの URL を直接指定する方法は、このようにあまり使うことはないと思います。この方法を使う場合は、もっぱら自分の管理する別ドメイン下にあるイメージとか、ワードプレスのイメージディレクトリにアップロードしたイメージとかを使用する場合になるはずです。
例えば、、、ワードプレスのテンプレートディレクトリの中には、ほとんどの場合【images】というディレクトリがあると思います。
この【images】の中にアップロードしている画像を使用したい場合、わざわざローカルにダウンロードしてから、再度メディアファイルとしてアップロードする必要はありません。直接 URL を指定すれば OK です。
先ほどのローカルからアップロードしたファイルの保存場所と比較すると・・・

このような関係になっています。

URL を指定して挿入する

例えば、テンプレートの中の【images】ディレクトリの中にある画像ファイルをそのまま使用した場合は、【URL】の部分に画像の URL を入力します。http:// から始まる絶対パスで指定してください。

という感じです。
そして、任意の【タイトル】を入力して投稿に挿入をクリックすれば OK です。メディアファイルが投稿に挿入されます。

(3) すでに自分のワードプレスのメディアライブラリにアップロードしている画像を使用する

これは、(1) の方法などで既に過去アップロードしたことがあるメディアファイルを使用したい場合に使います。つまりメディアライブラリの中にあるファイルを使うということですね。サーバー上では【uploads】ディレクトリの中にあるファイルということになります。
メディアライブラリを選ぶと、今までにアップロードしてきたファイルが一覧表示されています。
数が多くなって目的のファイルがどこにあるのか分からなくなって来た場合は、右上の検索窓からファイル名や説明書きなどの条件で検索するといいでしょう。もしくは、左側に日付指定のフィルターがありますので、ここで絞ることもできます。（メディアファイルを年月で分類する設定をしている場合）
挿入したい画像が見つかったら、右端にある【表示する】をクリックすると、(1) の時と同じ画像の編集・挿入画面が表示されますので、【投稿に挿入】をクリックしてください。そうそれば画像が挿入されます。

(4)【おまけ】ギャラリーからの挿入方法

投稿に１つでもメディアファイルをアップロードした場合、【ギャラリー】という選択肢が増えます。

このギャラリーには、投稿編集時に “アップロードした画像だけ” がまとめられています。
アップロードされるのは、その記事で初めてアップロードされたメディアだけで、使用しているメディアとは違います。あくまでもその記事がアップロードの入口になっている場合のみです。
投稿に使った画像をアイキャッチ画像としても使いたいときとか・・・その逆とかも考えられますね。アップロードした画像を何回か使い回したいときとかには探す手間が省けて便利です。そういう意味ではブログ記事よりも固定ページでの使用頻度が多いですね、個人的に。

画像を編集しよう！・・・の基礎

さて、色々画像を挿入したいとは思いますが、サイズも様々でそのままだとレイアウトが合わなかったり、挿入位置も変えたいところです。
そういった部分の編集方法を押させておけば、画像挿入をかっこよく決めることができる（！？）と思いますので、押さえておいてください。

(1) タイトル

メディアをアップロードした場合、タイトルは自動的にファイル名が割り当てられます。変更することも可能です。検索しやすいようにタイトルを付けておくと後々便利です。
ぼくの場合はアップロードする前にファイル名は検索しやすい英単語にしてます。もちろん日本語タイトルでも OK です。
ただし、タイトルを変更してもアップロードされたファイル名が変わる分けではありませんので注意してください。

(2) 代替テキスト

この代替テキストは、画像が表示されなかった場合に画像の代わりに表示されるテキストのことです。タグで言うと【alt】のことです。
これはユーザビリティや SEO の観点からも、必ず指定するようにしてください。どんな内容のテキストにすればいいのか、ですが、画像の内容が分かるような文章っぽい感じがいいでしょう。
なぜなら、画像が見えなかった場合の画像の代わりだからです。画像で伝えたいことを文字で伝えなければなりませんので、当然文章っぽく説明くさくなるはずです。かといってダラダラした文字は不要なので、一言で言い表せるような文字を指定しておきましょう。

(3) キャプション

(4) 説明

この説明は、何かを入力したからといって、HTML に反映されるものではありません。ワードプレス上のメディアを管理しやすいように付け加えておくメモみたいな感覚で使用したらいいと思います。
ちなみにぼくは使ったことありません。

(5)リンクURL

ここは画像をクリックした際にリンクする URL を指定できます。初期状態では画像の URL がそのまま指定されています。好きな URL に変更することが可能ですので、外部サイトへのバナーとして使ったり、広告のような感覚でも使えます。

初期状態の URL には注意！

アップロードした段階では、このリンク URL はそのままアップロード先のメディアファイルの URL になっています。これをそのまま使用するのはオススメできる場合とオススメできない場合があります。
まず、オススメできる場合は、元々の画像サイズは大きいのに、かなり縮小して挿入しなければならない場合です。この場合元のサイズの画像を見てもらうには、画像をクリックして元の大きさのイメージを開いてもらわないといけないので、リンク URL を残しておいた方がいいでしょう。
一方、画像に URL を指定するということは、クリックされる可能性があるということです。リンク先として意味のある URL を指定する場合でない限りは何もリンクさせない方がいいでしょう。
クリックしたけど同じ画像が開かれただけだった・・・ということほど、訪問者をイラつかせることはありません。
まとめると、リンク URL を指定するなら

に限定して、それ以外は空欄にして何もリンクさせないようにしておきましょう。

(6) 配置

画像をどこに配置するかを選択できます。【なし】の場合は左寄せになります。上の画像は【なし】で挿入しています。

左側に回り込みして挿入する

【左】を選択すると、画像は左側に回り込み表示されます。【なし】で挿入した場合の左寄せとの違いは“ 回り込みされる ”という点です。
画像の挿入位置は赤文字の【左】の直前ですが、画像と文字が同じ段落内（<p>〜</p>）にあることによって、画像のサイズとブログのコンテンツ幅の“ 余った部分 ”に文字が表示されていきます。CSS で言うところの【インライン】要素（display: inline;）と【float: left;】が適用されているんだと思われます。

逆に右側に回り込みして挿入する

【右】を選択すると、画像は右側に回り込み表示されます。これも上記と同じように画像の挿入位置は赤文字の【右】の直前ですが、段落が変わらないので今ご覧になっているような表示になります。
こちらも CSS で言うところの【インライン】要素と【float: right;】が適用されていると思われます。

中央に挿入する

【中央】を選択すると、画像は真ん中に表示されます。これは回り込みではないので、文字をかき分けて真ん中に居座ったりはしません。画像と文字と段落が別々になります。

(7) サイズ

画像のサイズを選べます。フルサイズ（元の画像）の大きさによって選べる選択肢が変わってきます。元の画像が大きければ、大・中・サムネイルと選択肢は広がりますが、元の画像が小さければ、フルサイズしか選べなかったり選択肢は狭くなります。
ちなみに、上のひまわりの画像は元のサイズが 128×128 しかないので、フルサイズしか選べませんでした。

より高度な画像編集も可能

さて、一通り画像のアップロードから編集・挿入までをまとめてきましたが、実はワードプレスの管理画面上からはもっと細かい画像やメディアファイルの編集ができるんです。
画像の細かいサイズ変更とか、トリミングとか、回転とか・・・【画像を編集】という部分をクリックして開いてみると、たくさんのおもしろい発見があるとおもいますよ。そういったこともいつかまとめられたらと思います。
ちなみに、今回は画像ファイルを取り扱って説明して行きましたが、画像以外にも音声ファイルや動画ファイルも同じ要領でアップロードできますので、是非活用してみてください。