ブログの画像サイズをより大きく表示!そのインパクトと簡単なやり方

シェアしていただけると嬉しいです!

今日から、ブログに載せる写真の画像サイズを
より大きく表示させることにしてみました。
ブログを始めた当初は「写真無し」で書いていましたが、
その後、横幅320ピクセルのサイズで写真を載せるように。
しばらくして、今度は400ピクセルへ拡大。
そして数年前からは、さらに大きくして横幅480ピクセルのサイズへ。
「これでも充分大きいのでは?」と思っていたのですが、
プロブロガーであるイケダハヤトさんから指摘され、
もっと大きくできることが判明。
「せっかく面白い画像が多いので、大きくしないともったいないですよ」と。
さっそく大きくしてみると、「たしかに!」と実感。
今回はそのインパクトと簡単なやり方をご紹介します。

知人の家の庭から撮影した、東ジャワ「マラン」の夕方の光景
【写真:知人の家の庭から撮影した、東ジャワ「マラン」の夕方の光景】


     □     □     □
まず、この写真をご覧ください。
これが、以前やっていた400ピクセルサイズ。
社員食堂にて。孫正義さんと私と娘
【写真:社員食堂にて。ソフトバンクの孫正義さんと私と娘】
続いては、数年前からやっていた480ピクセルサイズ。
社員食堂にて。孫正義さんと私と娘
【写真:社員食堂にて。ソフトバンクの孫正義さんと私と娘】
そして今回は、このサイズへ。

社員食堂にて。孫正義さんと私と娘
【写真:社員食堂にて。ソフトバンクの孫正義さんと私と娘】

どうでしょう? やはり大きい方がインパクトがありますよね。
(ただし、もともと400ピクセルの写真を横に伸ばしているので、
少し画質が荒くなっていますが)
→【追記】その後、解像度の高い写真を見つけて差し替えました。

(参考:samsul.comブログから)
 
■2010年3月28日up
 ソフトバンクの社員食堂で、孫正義さんと記念撮影


     □     □     □
やり方は簡単で、例えば

(1)画像ごとにサイズを大きな数値で指定する
(2)CSS(スタイルシート)で写真サイズを規定する

のいずれかでOKです。
(1)なら、

<img src=".......jpg" width=480" height="270" />

の「width」の数値を大きくすれば、横幅が大きくなります。
でも毎回指定するのは面倒なので、私のオススメは(2)の方法。
しかも、(2)なら
「相手の見ているブラウザーサイズに合わせてサイズを変更させる」
なんてことも可能です。
私はブラウザーサイズの横幅100%の大きさに指定。
例えばスタイルシートで、

p.resizeimage img { width: 100%;}

と規定して、
ブログに書くときは、

<p class="resizeimage">
 <img src=".....jpg" />
</p>

とすれば、OKです。
     □     □     □
さらに、むかし使っていた320ピクセルの写真から見ると、
その違いは、よりはっきりします。
これは、昔やっていた320ピクセルサイズ。小さいですよね・・・。
アマンリゾーツのエイドリアン・ゼッカー夫妻と
【写真:アマンリゾーツ創業者、エイドリアン・ゼッカー夫妻と】
その後サイズは、400ピクセルへ。
アマンリゾーツのエイドリアン・ゼッカー夫妻と
【写真:アマンリゾーツ創業者、エイドリアン・ゼッカー夫妻と】
続いて、数年前からやっている480ピクセルサイズ。
アマンリゾーツのエイドリアン・ゼッカー夫妻と
【写真:アマンリゾーツ創業者、エイドリアン・ゼッカー夫妻と】
そして今回は、このサイズへ。
(相手の見ているブラウザーサイズに合わせて100%のサイズに)

アマンリゾーツのエイドリアン・ゼッカー夫妻と
【写真:アマンリゾーツ創業者、エイドリアン・ゼッカー夫妻と】

どうでしょう? やはり大きい方がインパクトがありますよね。
ただし、もともと320ピクセルの写真を、むりやり横に伸ばしているので、
画質がかなり荒くなっています。
でも、もっと画質の良い写真であれば、効果的に表示できるはず。
     □     □     □
というわけで、
ブログの画像サイズをより大きく表示させたというご報告、
そして、そのやり方を簡単にご説明しました。
写真が大きいと見た目のインパクトがあるし、
何よりも「もっといい写真を撮らなきゃ!」という気分にもなります。
ブロガーの皆さんは、
ぜひご自身の写真サイズ、チェックしてみてください。
写真を大きくすることで、PVが上がるかどうかはわかりませんが、
また変化があれば、ブログで報告したいと思います。
     □     □     □
ちなみに「ブロガーなら必読!」のイケダハヤトさんの本はこちらです。
イケダハヤトさん、ご指摘いただきありがとうございました!

サムスル
━━━━━━━━━━━━━━━━━━━━━━━━━
時の運と人の縁を極める日々の記録 】  渡邉 裕晃
━━━━━━━━━━━━━━━━━━━━━━━━━
ブログの更新情報のチェックは、こちらからどうぞ!
時の運と人の縁を極める日々の記録 Twitter: @_samsul
時の運と人の縁を極める日々の記録 Facebook: /samsulcom
━━━━━━━━━━━━━━━━━━━━━━━━━

スポンサーリンク

あわせて読みたい関連記事




スポンサーリンク







シェアしていただけると嬉しいです!

フォローする

スポンサーリンク