クリックした画像を大きく見せる(FC2ブログ)

これは私の願望から思い立った記事です。

皆さんは写真を貼り付ける時、サムネイル(記事中)の大きさや元画像(リンク先)の大きさってどうされていますか?
私は、サムネイルは横幅450px以下で作り、元画像は700~800pxでアップロードしています。

自分がそうやっているせいか、写真が貼り付けてあるブログはたいてい画像をクリックしてリンク先の画像を見るようにしています。
サムネイルは画質が粗いので、元画像で見たい…っていうのもあるのですけど、皆さん素敵な写真をアップされていますので、しっかりと拝見させていただきたいんです♪

「わ~♪すてきな写真♪」って思いながら(クリック先は大きな画像だと思って期待しながら)サムネイルをクリックすると………

2009-07-12_1596-2048.jpg
サムネイルと同じ大きさの写真が表示される場合ってけっこう多いんです……
こんな感じ…→→→
「大きな写真で見たかったな~……」と少々ショック……il||li _| ̄|○ il||li

(この画像はサムネイルの大きさとクリックして表示される元画像が同じ大きさにしてあります。)

そうやって同じ大きさでアップロードされている方は、意図的に小さめの写真でアップされているのかもしれません。
だけど、もしかしたらサムネイルのサイズに縮小しなければ大きな写真がアップできない…と勘違いされている方もいらっしゃるかも…と思い、
また、ステキな写真をぜひ大きく見せていただきたいという期待も込めて、今回その方法を記事にしてみました。

2009-07-12_1596-2048.jpg←←←この画像はサムネイルの大きさは上の写真と同じ大きさ(300×225)ですが、クリックすると2048×1536で表示されます(ファイルサイズ225KB)。
ブラウザの大きさよりも大きいので、たぶんブラウザでの表示は縮小されていると思います。
画像の上にマウスを持っていくと虫眼鏡マークか+マークが出ていませんか?
出ていれば画像をクリックすると本来の大きさ(ここでは2048×1536)になると思います。

だけど……正直…そんなに大きくても表示しきれずに縮小されるだけならブラウザいっぱいくらいの大きさでもいいわけですよね~。

先ほど約3ヶ月半ほどの解析でモニターの解像度を集計してみると一番多いのが横幅1280(約33%)、続いて横幅1024(約26%)。
なので、自分では表示する画像は800pxくらいがいいかなぁ~と思って、大きく見ていただきたい写真はそれくらいに、見ていただきたいけど大きくしすぎるとアラが目立つな~って時は600pxくらいにしています( *^艸^)

09071201-800.jpg←←←クリックすると800×600(88KB)です。

さて、FC2ではアップロードできる画像の大きさは500KB以下という制限があります。
あまり大きな縦横サイズだと当然写真の容量も大きくなります。
そこで重宝するのがPhotoshopやPhotoScapeなどの画像編集ソフト。

これらのソフトでのサイズダウンの方法はまた後日詳しく書くことにして…

今回はもっとお手軽に、特別な画像編集ソフトを使わなくても縮小できる方法の説明をしてみたいと思います。
(FC2ブログ限定で申し訳ありません…。)

09071806.gif管理画面から「ファイルアップロード」画面に行きます。
アップロード画面の注意書きのところに「アップロード画像が大きい場合はこちらの無料サービスで縮小できます ⇒画像縮小」と書いてある部分があるので、その「画像縮小」をクリック。

09071807.gifアップロードしたい画像を(写真を撮ったままの大きさで構わないので)「参照」ボタンを押して選択します。

縮小サイズを決定します。
ここでは「幅を指定して縦横比を保つ」の方に「横800px」と入力しました。

「実行」

09071808.gifこのサンプルでは元画像は3MBほどのものが70KBほどに縮小されています。

「ダウンロード」ボタンをクリックしてパソコンに保存して下さい。

09071809.gif再びアップロード画面に戻り、先ほど縮小した画像をアップロードします。
そのときに「サムネイル」の大きさを決定しておきます。
「サムネイル  同時に作成する」にチェックを入れ、サイズを決めます。
ブログの記事幅以下のサイズにしておかないと表示が崩れる場合があります。

ここでは400pxで入力しました。

「アップロード」ボタンを押します。

これで記事中のサムネイルは小さく、クリックすると大きく表示されるようになります。

素敵な写真を撮られた場合はぜひ大きくして見せて下さい♪

関連記事

16 Comments

涼風  

こんにちは!

記事にして下さり、ありがとうございます♪
FC2で、画像縮小サービス!?なんてあったんですね!
引き続き、Photoshop、PhotoScape編 期待してまーす(*^_^*)♪

2009/07/19 (Sun) 12:36 | EDIT | REPLY |   

ニュータイガー8  

こんにちは

私の場合はOSの中にあるピクチャマネジャーで画像のサイズ変更をしています
れんさんの記事をもとにピクチャマネジャーでやってみました
「海蔵寺ののうぜんかずら」でサムネイルの拡大をしましたので,
よろしければ寄ってみてください・・・勉強になります

2009/07/19 (Sun) 14:57 | REPLY |   

れん  

涼風様

こんにちは。
FC2の画像縮小サービス、この記事を書くために初めて使ってみました\(^O^)/
いつもはたいていフォトショップですから( *^艸^)

この画像縮小サービスとの違い?も含めて、フォトショップやフォトスケープでの縮小のしかたをのちほど記事にしたいと思っています。
(ご存知だと思うので、必要ないような気もしますけど…。)

あと、ソフトが何もない場合やFC2以外のブログだとWEBジェネレーターでリサイズしたりする手もあります。
今や、画像の編集もパソコンにソフトをインストールすることなくWEB上でやってしまえる時代ですものね。
便利になりました。

2009/07/19 (Sun) 18:41 | EDIT | REPLY |   

れん  

ニュータイガー8様

ピクチャーマネージャー……私もありました!
こんなのあったんですね~。
使ったことありませんでしたe-260

さっそく大きな画像にして下さったんですね!
拝見させていただきました♪
やっぱり素敵な写真は大きな写真で見せていただきたいです!
↑私個人の願望ですのに、わざわざやってくださって本当にありがとうございましたm(__)m

2009/07/19 (Sun) 18:57 | EDIT | REPLY |   

marimo  

れんさん 今晩は  2度目の訪問になります
PhotoScapeダウンロードできました(やってもらったが正確ですが)
早速楽しんでいますe-284
これからも色々な事教えてください楽しみにしてます
エレメンッの方もお願いします

2009/07/20 (Mon) 02:02 | EDIT | REPLY |   

れん  

marimo様

marimoさん、いらっしゃいませm(__)m

PhotoScape使ってらっしゃるのですね?
けっこういいソフトでしょ?
私はエレメンツとフォトスケープと併用して楽しんでいます♪

これからもいろいろと画像編集のこと記事にしていくつもりですのでよろしければお付き合いくださいねm(__)m

2009/07/20 (Mon) 15:45 | EDIT | REPLY |   

ぴょん  

はじめまして。

検索でたまたま見つけた記事でしたが、私もFC2を使っているので助かりました。
さっそく試してみて、今まで疑問だったことが、おかげさまで解決できました。
ありがとうございました。ヽ(^◇^*)/

2011/05/28 (Sat) 20:56 | EDIT | REPLY |   

れん  

ぴょん様

ぴょん様、お越しいただき、コメントも残してくださってありがとうございます!

お役に立てたようで光栄です♪
ぴょん様もぜひクリックしたら大きな画像が見れるようにしてくださいね(#^.^#)

2011/05/29 (Sun) 21:22 | EDIT | REPLY |   

たま  

大変参考になりました!ありがとうございます♪

2012/05/08 (Tue) 22:44 | REPLY |   

れん  

たま様

たま様、ご訪問くださってありがとうございます。

多少なりとでもお役に立てましたでしょうか?
コメントを残して下さってうれしく思います♪

2012/05/09 (Wed) 12:52 | EDIT | REPLY |   

どるママ  

はじめまして~
fc2でブログを書いてますが どうしても写真が拡大表示されず たどり着いたのが、この記事でした。
とっても解り易く説明してくださっているので 機械音痴の私にもよかったです。
が・・・この通りにやってみても サムネイルは作れるのですが 拡大表示できません。
何か考えられる原因あるのでしょうか?
お友達のワンちゃんの写真を 綺麗に見せてあげたいのですが、どうしても上手くいかずこまっています。
よろしくお願いします。

2013/06/13 (Thu) 10:24 | REPLY |   

れん  

どるママ様

どるママ様、いらっしゃいませm(__)m

ブログ管理画面の設定を触ってやると、どるママ様の思っているように簡単にできるようになると思うのですが…。

どるママ様のブログのコメントに対処方法を入れておきましたので、ご覧いただけると幸いです。
もしもわかりにくいところがありましたら、またご連絡くださいね。
よろしくお願いいたします。

2013/06/13 (Thu) 14:18 | EDIT | REPLY |   

どるママ  

ありがとうございました~~~
あんなに何日も悩んでいたのに・・・
あっという間に解決できましたi-179
丁寧に解り易い説明で本当に助かりました。
これで お友達にも大きい写真を見せてあげられますe-343
また 困った時は よろしくお願いします。
本当にありがとうございました~~~

2013/06/13 (Thu) 21:42 | REPLY |   

れん  

どるママ様

どるママ様、ご報告ありがとうございますm(__)m

うまくできるようになってよかったですね♪
大きな写真で見れると可愛さ100倍です!

またいつでもお越しください。
お待ちしております(*^_^*)

2013/06/14 (Fri) 13:35 | EDIT | REPLY |   

HIROKO  

ありがとうございますv

れん様。
初めまして(*^_^*)

もっと、早く出会いたかったな。
ブログを始めて2年が経ちますが、なにしろ初心者ですので、色々とままならず。
もう、すっかり諦めていたのですが、
今一度と思い、検索してみたところ、
ここにたどり着きました。
ありがとうございました<m(__)m>
上手く出来ました(*^^)v
感謝です。
もっと、色々知りたくてブックマークしました。
これからも、よろしくお願いします(*^_^*)

2015/10/12 (Mon) 22:08 | EDIT | REPLY |   

れん  

HIROKO様

HIROKO様、いらっしゃいませm(__)m
返信が遅くなり申し訳ありません。

うれしいコメントを残してくださってありがとうございます(#^.^#)
お役に立てたようでよかったです。

いろんなブログに訪問させていただいて、素敵な写真はクリックして拝見したりするのですが、小さいままだとちょっとガックリしてしまうんです。
HIROKO様もぜひ大きな画像が見れるようにしてくださいね(#^.^#)

これからもお時間がございましたら、時々このブログを覗いてくださるとうれしく思います♪
何でもありのブログですが、よろしくお願い致しますm(__)m

2015/10/13 (Tue) 17:47 | EDIT | REPLY |   

Post a comment