ブログに挿入する画像へのこだわり。画像ソースとサイズへの気配りについてお話します。

ブログ ブロガー  Tweet

2012.03/06 (Tue)

重要なお知らせ

ブログ移転のお知らせ！

▼当ブログは移転しました！新しいサイトは以下となります！！
http://bamka.info

▼お手数おかけしますが、RSSの再登録もお願いします！！
http://feeds.feedburner.com/bamka

～追記～
当エントリーでは、あたかも「PhotoPinの画像であれば、すべて可変して構わない」と取れるような表現があります。しかし、PhotoPinの画像でもCreative Commonsの利用条件に遵守する必要があります。詳しくはコチラのリンクを参照ください。
誤解を招く表現をしてしまったことを、お詫び申し上げます。

----------

ブログを書く上で、結構な重要度を持っている画像。

文章だけでは伝えづらい、または本文が文章だけで味気なくなってしまう。そんなときに私は画像を挿入するようにしています。

そのほうがメリハリが出て読みやすいなぁと、読み手の立場として思うのです。

そこで今回は、私が挿入している画像と、その挿入の仕方についてお話しましょう♪


流れは以下のような感じになっております。


◇元画像をどこから持ってくるか
◇ブログに挿入する際に気を配るサイズ
◇画像のサイズを編集はどうやってるか
◇最後はPicasaに保存してフィニッシュ

■元画像はPhoto Pinでだいたい事足りる

画像をブログに掲載する際に気を付けなくてはいけないのは、著作権の問題。

正直私もあんまり分かっていませんが、「著作権フリーの画像を使っておけば安心！」ってことだけは分かりますｗｗ

そこで私が利用しているのは、こちらのサイト「Photo Pin」。

Photo Pin : Free Photos for Your Blog or Website via Creative Commons

このサイトに掲載されている画像は、すべて著作権フリー。ブロガーにとっては強い味方です。

他にもFlickrの中でも著作権フリーが画像を検索できる、こちらのサイトもたまにお世話になっております。

※参考リンク：igosso画像検索 : 無料で商用利用可能なフリー素材/写真


ですが、基本は「Photo Pin」一本。

何故かって理由はただひとつ。画像がメッチャ綺麗なんです！なぜかは分かりませんが、ここに掲載のある画像はどれもこれも高画質。

ホント、これはイチオシです！

ちなみに、検索する際は英語でキーワードを入れましょう。日本語で検索しても、あまりヒットしてくれません。お気をつけを。

■画像は必ずダウンロード→編集→Picasaへ

さて、「Photo Pin」で使いたい画像が見つかったら、私は必ずダウンロードしています。

というのも、ソースがどこにあるのか分からない画像を、そのままブログにHTMLで貼り付けてしまうのは怖い。いつ消えてしまうか分からないのです。

あと、そのまま使うには画像が大きすぎるってのも、大きな理由です。

ですから私は、画像は基本ダウンロードします。

そして、ダウンロードした画像は適切なサイズに編集して、Picasaに入れるようにしています。

■なぜ画像のサイズを編集するのか？

別にそのまま使ってもいいのですが、私のブログにとっては大きすぎるんです。大きすぎると、文章中に占める画像の割合が多くなりすぎて、なんだか逆にごちゃごちゃしてしまう。

ですから私は、

◇ブログのメインボディーの横幅いっぱいにして、
◇タテの長さはヨコ幅のだいたい１／３になるように切り取る。

こんな作業を入れています。


私が画像を入れる場所は２つ

ひとつは、序章と段落の間。



もうひとつは、段落のすぐ後です。



※本文中に説明用の画像（スクリーンキャプチャなど）が多い場合は、あえて画像を挿入しないケースがあります。


段落のすぐあとには、その段落をメッセージを象徴するような画像を選んで入れています。

ここで例えば 640 x 426 の画像なんか入れるとどうなるか。試してみましょう。


（Photo： [http://www.flickr.com/photos/46042146@N00/618971656/{Maui Wowie! By Randy Son Of Robert}]）

ねっ？なんかウザったいでしょ？ｗ

こんなに大きな画像を入れてしまうと画面いっぱいに画像が表示されて、次の本文までに文章が切れてしまう。

これは、読み手のリズムを崩すことになりかねません。

ですので私は画像の縦の長さをあえて短くして、文章が途切れないようにしているのです。




こんな感じ。こっちの方が、読んでいるリズムを崩すことなく、そしてブログ全体にメリハリを付けることができると考えています。


では、サイズの編集についてはどうやっているか。私はSkitchを使ってサクっとやってます。

■画像のイメージを見ながらサイズ調整できる

Skitchには、画像内に文章を書いたり矢印を追加したりと、かなりお世話になっております。

ですがこのアプリ、実はサイズ調整についてもかなり優秀なんです。

サイズ調整はかなりカンタン。Skitchに入れた画像の端っこ部分にポインタを置いて、ドラッグしながら移動させるだけ。



大きくしたり小さくしたりして、画像のイメージを壊さない程度に縮小しましょう。

また、左下にピクセル数が表示されるのもかなり嬉しい。私のブログの横幅は 592 なので、これを見ながら調整しています。縦は１／３なので、だいたい 200 ぐらいですね。

■編集が終わったらPicasaへ

編集が終わった画像は、Picasaへ入れます。

Picasaに入れた画像をHTMLでブログに貼りつける方法は、以下の流れになります。


◇挿入したい画像のあるアルバムを開く
◇アルバムの公開範囲を「一般公開」もしくは「リンクを知っている全員」にする
◇挿入したい画像を選択する
◇「この写真へのリンク」をクリックし、「画像を埋め込み」のコードをコピー（サイズ調整を忘れずに）





以上のような流れで、私のブログへの画像挿入は終了です。

---

どやぁ！

画像一つとっても、意外とこだわりを持ってやってるんですよ～！


・・・って、自慢がしたかったわけではなく、実はTwitterで@saiutから要望をもらったので書きました。

お役に立てたかな(*´ω｀*)？

みなさまにとっても、これからブログを書く上でのヒントになったら嬉しいです♪


from your @bamka_t