ネタ切れで記事にするようなことがありません……

昨日お友達ブログにお邪魔した時に私も常々感じていたことをチラッと書かれていたので、それをいただいちゃおう!と思います。

FC2に限ってのことなので、他のブログでは関係のない話で申し訳ありません。

私のブログはなんでもあり~の一貫性のないブログです。
でも、時々撮ってきた写真をアップすることもあり、そういう写真をアップした時に常々感じていた「こだわり」です。

私の場合、元画像は横幅600~800pxの大きさでアップしており、サムネイル画像は450pxが多いです。

FC2では画像をアップロードした時に自動でサムネイル画像が任意のサイズで作られるのが便利でいいですよね(#^.^#)

ところがそのサムネイル画像…ちょっと画質が粗く感じるのです。

サムネイル画像をクリックしていただくと、きれいな画像が見られるのですが、私のように大きめのサムネイルを貼り付けていると、おそらくクリックしてまで見てくださる場合は少ないのではないかと思います。
それならちょっとでもきれいに見える画像をサムネイルに貼り付けたくなる時があるんですよね…。
「実際の写真はもっときれい(クッキリ)しているのに、これじゃ汚いやん…」って感じ…。

ちょっと手間が増えてめんどうくさいんですが、サムネイルをきれいに見せる方法を書いておきます。
(FC2の「リクエスト」でも「サムネイル画像が汚いのでもう少しきれいなものを」みたいなリクエストを見かけたことがありますし。)

ところで………
どんな風に違うか…
作ってみましたので、まずご覧ください。
(クリックすると大きくなります。)
09052601.jpg

ん??
あんまりどれも変わりませんか?
いえ、いえ!
こだわる人はこれでもこだわるのです( *^艸^)
私は写真にロゴ?を入れていますが、それを見ていただくとかなり画質が違っているのがわかると思います。

画像編集ソフトなどでサムネイルの大きさの画像を作ります。
(作成方法は最後に掲載します。)
サムネイルの保存名は大きな画像の名前の後ろに半角で「s」をつけて保存して下さい。
例:元画像「090526.jpg」であればサムネイル用の画像は「090526s.jpg」にします。

注意
元画像に全角の名前(全角数字やアルファベット、日本語名)をつけた場合は画像をFC2にアップロードした時に名前が変わってしまいます。
例えば全角数字で「1.jpg」というファイル名でアップロードした場合は「20090526155915bfd.jpg」などのようにアップロードした日付時間他の名前に自動で変えられてしまいます。
その場合、あとで「1s.jpg」というサムネイル用をアップロードしても全く別の関係ない名前がついてしまいますのでご注意ください。
必ず保存する時は半角で保存して下さい。

元画像をアップロード
まず、大きめの元画像をアップロードします。

「設定」のところ、「サムネイル 同時に作成する」に必ずチェックを入れておきます。
サムネイルサイズは任意の数字でどうぞ。
(余談ですが…↑上のサムネイル画像と↓下のサムネイル画像ではどちらが見やすいと思われますか?
上はFC2の自動サムネイル、下は別でアップロードしたサムネイルを使っています。)

サムネイル画像をアップロード
次にサムネイルになる画像をアップロードします。

こちらの方は「サムネイル 同時に作成する」のチェックは外しておきます。
「同名ファイル」のところ、「上書き保存」になっているか確認しておいて下さい。

アップロードする順番は大きな画像、サムネイル画像の順で。
逆でアップロードすると、せっかくのきれいなサムネイル画像がまたFC2で自動で作られた画質の粗いサムネイル画像に置き換わってしまいます。


09052611.jpg
サムネイル用画像はアップロードしても、「アップロードしました」の表示は出ますが、下の一覧には表示されません。
元々大きな画像をアップロードした時にFC2で自動的に作られたサムネイルと同名ですので、上書き保存されています。

あとは記事を書く時に通常通り「サムネイルで記事を書く」をクリックして記事を書くだけです。




サムネイル画像の作り方
●フォトショップエレメンツ6.0編
09052602.jpg
「ファイル」-「Web用に保存」

09052603.jpg
「変更後のファイルサイズ」にサムネイルにする大きさの数字を入力します。

「縦横比を固定」にチェックを入れておくと、「幅」、もしくは「高さ」だけに数字を入れるだけで自動的に縦横比を変えずにサイズ変更してくれます。

「画質」は数字が小さくなるほど粗くなります。

「適用」をクリックすると、変換後の画像も表示されますので許容範囲でなるべく小さめの容量に縮小するといいと思います。
(サムネイル画像のファイルサイズが大きいとブログを開いた時の表示が遅くなります。)

09052604.jpg2枚の画像が表示されていますが、左は元画像、右は設定を変えた時の画像の見え方です。
右画像下側の数字が保存された時のファイルサイズになりますので、画像の見え方やこのサイズなどを参考にしながら調整して下さい。

「OK」をクリックすると保存画面が出てきますので、保存名は元画像の名前の後ろに半角で「s」をつけて保存して下さい。
例:元画像「090526.jpg」であればサムネイル用の画像は「090526s.jpg」にします。


●PhotoScape編
09052605.jpg
「リサイズ」ボタンを押します。

09052606.jpg
「アスペクト比を保持」にチェックを入れておくと「幅」、もしくは「高さ」だけに数字を入れるだけで自動的に縦横比を変えずにサイズ変更してくれます。

「OK」をクリックすると、画面が元の編集画面に戻ります。

09052607.jpg
「保存」ボタンを押します。

09052608.jpg
スライドバーでサイズを決定します。

「OK」をクリックすると保存画面が出てきますので、保存名は元画像の名前の後ろに半角で「s」をつけて保存して下さい。
例:元画像「090526.jpg」であればサムネイル用の画像は「090526s.jpg」にします。


関連記事
コメント
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
2009/05/26(Tue) 22:23 |  | - | 【編集
こんばんは
れんさんならではのこだわりですね

わたしもいい写真を載せたいんですが
撮影自体がへたくそな上に携帯カメラで撮っているので
逆にリサイズして小さくしてアップしてます。
大きく見せられるほどの写真が撮れてないので
恥ずかしい限りです。

でも、れんさんの写真はどれもサムネイルでもきれいに見えますよ!
悲しいのは家の通信環境で写真をアップしてみるのにひとしきり待たないといけないのでよほどのことがないと元画像をみることがないです。ごめんね。

まあ、れんさんと一緒にはならないですが
また、勉強になりました。
デジカメをまず娘から取り返そう!
2009/05/26(Tue) 22:52 |  | ジーノ | 【編集
今日チャレンジ
サムネイルの改善画像、今日(睡蓮画像)で試してみますね。
ThickBoxと横並べとサムネイル改善と3箇所変更すると
確かに一つのブログ記事を書くのも大変ですが
必要なものだけ加工すれば良いかなぁと思いました。

それと、こんな事を思いました。
FC2の自動サムネイルと同じ大きさ同じファイル名の画像をアップして
上書き保存すると言う事は・・。
同じ大きさ同じファイル名の画像にすれば、違う写真をサムネイル
としてアップできるのかなぁと。
出来ればおもしろい事できそうですね。
2009/05/27(Wed) 16:10 |  | ボギパパ | 【編集
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
2009/05/27(Wed) 16:21 |  | - | 【編集
鍵コメ2009/05/26(Tue) 22:23様
サムネイルの差し替えはけっこうめんどうくさいので、私の場合は気が向いたときしか……しかもめったにやることありませんが、何度かやってみました。
大きな写真(元画像)で見て下さると一番いいのですが、きっとそういう人の方が少ないんじゃないかな…って思っていますので、サムネイルだけでもきれいなのを……って思ってしまうんです。

小さいサムネイルで貼り付ける方がクリックして大きくしてみてくれる可能性があるかしら??
写真に興味のある方ならクリックして見てくれるでしょうけど、大きくしても小さくしてもたいていはそのままで見る方が多い…と私は思っています(T.T)

サイズが大きなままでよければ(たぶん表示が重くなる可能性アリ)、サムネイル画像を使わずに元画像だけでサムネイルの大きさにする手もあります。

また参考までに実験的に違いを試してみますね!
2009/05/27(Wed) 23:36 |  | れん | 【編集
ジーノ様
そうなんです…。
細かいところが気になってしまうタイプですから…( *^艸^)

私は携帯カメラが使いこなせてませんから、ちゃんと使って携帯写真を使っておられるジーノさんがすごく見えます!

画像のファイルサイズはかなり気を遣っているつもりなんですが、最近ブログパーツを多くしたり、画像もやっぱりあんまり譲れない(?)部分もあったりして私のブログはかなり重くなっているのでは…と思います。
ジーノさんにはご迷惑をおかけしますm(__)m
2009/05/27(Wed) 23:41 |  | れん | 【編集
ボギパパ様
>サムネイルの改善画像、今日(睡蓮画像)で試してみますね。
試して下さるんですね?
のちほどお邪魔しま~す!

>ThickBoxと横並べとサムネイル改善と3箇所変更すると確かに一つのブログ記事を書くのも大変ですが必要なものだけ加工すれば良いかなぁと思いました。
そうそう!
私はサムネイル改善はほとんどやってないですけど、たまにきれいなのが使いたくなってやるくらいです。
状況に応じて使い分ければいいと思います。

サムネイルに関しては他にもやり方があるので、また記事にしてみます。
もし使われるのであればボギパパさんが一番ラクチンだと思う方法でされるとよいと思います。
(私はこの方法が一番簡単かな~と思ったんですが…。)

>同じ大きさ同じファイル名の画像にすれば、違う写真をサムネイルとしてアップできるのかなぁと。
出来ればおもしろい事できそうですね。

その通りです!
もしくは記事の編集で画像を挿入した時にできる「<a href="http://blog-imgs-27.fc2.com/x/x/x/xxxxxx/12345.jpg" target="_blank"><img src="http://blog-imgs-27.fc2.com/x/x/x/xxxxxx/12345s.jpg" alt="12345.jpg" border="0" width="450" height="337" /></a>」この赤字部分を差し替えたい画像のURLに置き換えるだけでもできますよ。

例えば……
http://sakuraxren.blog103.fc2.com/blog-entry-388.html
このページの一番下の裸婦像の写真のようなことですよね?

2009/05/27(Wed) 23:56 |  | れん | 【編集
鍵コメ2009/05/27(Wed) 16:21様
ご連絡ありがとうございました\(^O^)/
またお邪魔します。
あ……もうすでにお邪魔しました…e-257
2009/05/28(Thu) 00:07 |  | れん | 【編集
裸婦像見ました。
そうそうこんな裸婦像の写真のように、おもしろい表示が出来るかなって
さすが、れんさんすでにやっていたのですね。
私も今度やってみよう ♪e-454
2009/05/28(Thu) 07:37 |  | ボギパパ | 【編集
ボギパパ様
「a href=」の部分がクリックすれば飛ぶ画像で、「img src=」の部分がブログに表示されている写真になります。
もし、リンク先の画像がサムネイルと同じ大きさの写真であればリンク先は不要なわけで……
「a href=」の部分を削除してもいいと思うんです。

どのタグがどれに当たる…っていうのがわかるとどうにでもできるのでおもしろいこともできますよね(#^.^#)
2009/05/28(Thu) 23:56 |  | れん | 【編集
あーありがとうでえすー。
実は、自分のノートパソコンになってから、画像処理ソフトがかわって、わかんないからいますっごい時間かかって、ちょっと花の写真とかが遠ざかってたりするんですよ・・
助かりますありがとうございます・・
2009/05/29(Fri) 11:26 |  | ぷぅちゃん☆ | 【編集
ぷぅちゃん☆様
お役に立てたかしら??

慣れないソフトを使うと使い勝手が悪く感じてしまいますよね。
慣れてくるとまたよいソフトだったりするわけですが…。

頑張って新しい画像処理ソフトに慣れて下さいね~(#^.^#)
2009/05/30(Sat) 01:36 |  | れん | 【編集
fc2のサムネイル画像がとても粗くて
使えたもんじゃないなーe-351
大きな画像を載せたい時でも、使用をためらっていたんですが
これでサムネイル利用できるようになりそうですe-266
2009/11/21(Sat) 06:50 |  | セツナ | 【編集
セツナ様
セツナ様、お越しいただいて、そしてコメントを残して下さってありがとうございます♪

サムネイル画像…もう少しきれいだったらいいですのにね…e-327
ちょっとめんどうくさいんですが、こういう方法もできる…ということで参考になれば幸いです。

私もセツナ様のブログにお邪魔させて下さいね~。
2009/11/21(Sat) 18:48 |  | れん | 【編集
参考にさせていただきました。
ありがとうございます!
2012/02/18(Sat) 00:32 |  | たいやき | 【編集
たいやき様
たいやき様、いらっしゃいませm(__)m
コメントを残してくださってありがとうございます。

たかがサムネイル画像とは言え、少しでもキレイに載せたいですよね!
ただし……ちょっと手間がかかるので面倒くさいんですが……。

ご訪問ありがとうございましたm(__)m
2012/02/19(Sun) 20:47 |  | れん | 【編集
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
2012/03/06(Tue) 21:00 |  | - | 【編集
鍵コメ 2012/03/06(Tue) 21:00様
鍵コメ2012/03/06(Tue) 21:00様、ご訪問くださってありがとうございますm(_ _)m

FC2ブログでブログをされているのでしたら、この方法が一番簡単でキレイにサムネイルを表示できる方法かと思います。

どのくらいのサイズにするかは、サムネイルの場合はそのブログのテンプレートの記事欄の幅によっても変わってくるので一概に言えませんが、記事欄に収まる横幅でないと、表示が崩れたりするテンプレートもあるようです。

クリックして大きく見せる画像の方は私は横幅が600px~800px、サイズが大きくても200KB以下になるように調整しています。

http://sakuraxren.blog103.fc2.com/blog-entry-743.html

http://sakuraxren.blog103.fc2.com/blog-entry-745.html
の記事も参考にしていただけるとうれしく思います。

またぜひお越しくださいね!
コメントありがとうございましたm(_ _)m
2012/03/08(Thu) 15:10 |  | れん | 【編集
はじめまして。

私はつい最近Seesaaからブログの引っ越しをしてきましたが、サムネイル画像の悪さにキレかかっていましたv-17e-262

そこで「サムネイル」で検索していたらこちらにたどり着き、なるほど~~!と思って早速やってみました。

サムネイル画像が綺麗になっただけでこんなに感激したのは初めてですv-406

ほんとに参考になりました

どうもありがとうございます!

(それにしてもfc2、手間がかかりますね・・e-263
2012/10/14(Sun) 00:09 |  | 響 | 【編集
響様
響様、いらっしゃいませm(__)m

FC2のサムネイル、ホントしょぼいですよね…(^^ゞ
サムネイルだけしか見てくださらない方も多いと思いますので、なるべくきれいに見せたいところ。

でもけっこう面倒くさいので、最近は私はやっておりません…e-330

手間がかかりますけど、やったらやったでなんだかとってもいい気分なんですけどね( *^艸^)

響様は写真もお好きなのですね?
私も写真大好きなんですが、ち~っとも腕が上がらなくって…。

またぜひ遊びに来てくださいね。

コメントありがとうございました。
2012/10/15(Mon) 17:59 |  | れん | 【編集
コメントを投稿
URL:







Comment:
Pass:
秘密: 管理者にだけ表示を許可
    [プレビュー]ボタンを押すと入力コメントのプレビュー画面がここ↑に表示されます
トラックバック

* 内容が異なり、関連性の薄い記事からのトラックバックはご遠慮ください。
* トラックバックしたページからは必ずトラックバック先のページ(もしくは、こちらのブログの適当なページ)へのリンクをお願いいたします。
* その他、管理人が好ましくないと判断したトラックバックも削除させていただく場合もありますのでご了承ください。
この記事へのトラックバック