ブログパーツ

趣味の工房

【FC2ブログ】サムネイル表示をきれいに見せる小ワザ

みなさん、こんばんは

みなさんご存知の通り、ボクはFC2ブログを使用しているのですが、最初にブログを始めたのが長男が生まれたときですから、もう7年前。Σ( ̄□ ̄;

FC2ブログにしたのには特に理由があったわけでもなく、たまたま検索していてなんとなくで決めただけなんですが、以来ずっとFC2ブログを使い続けています。
「FC2が最高!!」と思っているわけでもないですが(オイ、カスタマイズ性も含め、やりたいと思ったことは大体できる感じなので、あえて乗り換える必要性も感じない...というのが本音ですね。

そもそもこの「趣味の工房」も、その育児ブログの中の1カテゴリーとしてPC関連の記事を書いていたんですが、さすがに育児ブログでPC関連の、それも自作ネタだとやはりドン引きされたので(爆)、改めて「趣味の工房」として立ち上げた...という経緯があります。
今ではどちらがメインかわからないですがwww


さて、前置きが長くなりましたが本題。

そんなFC2ですが、もちろん気になる部分がないわけではありません。
その1つが、タイトルにある「サムネイル表示」
いわゆる画像の縮小版ですね。
2013y08m11d_220935780.jpg

上の画像の赤枠の部分にチェックを入れることで、任意の大きさのサムネイルを同時に作成してくれます。
サムネイルの大きさはブログの本文の幅に合わせた大きさにしておき、通常はこの後、そのサムネイルを使用して記事を書くんですが...
FC2はこのサムネイルがいまいち。

具体的には、画質がかなり荒くなってしまうんですね。(; ̄ー ̄A
それこそ、上の画像もいわゆる「モアレ」が発生して、文字がぼやけてしまっています。

せっかくデジイチをGETして、いい写真が撮れたとしても、UPした画像をサムネイル表示したときに「おや!?」となってしまうのもクヤシイ。
ということで、これをできる限り回避する小技。


FC2ブログでサムネイル表示をきれいに見せる小ワザ


まぁ正直なところ、サムネイル表示を使わない、最初から(このブログであれば)600pxサイズの画像を用意してそれを使うという手もありますが、やはりクリックして拡大表示できたほうがいいですよね。
また、大きい画像とサムネイル表示用の2枚を用意しておくという手もありますが、それはさすがにめんどくさいですし、容量も無駄に使うことになってしまいます。

では下の2枚の画像はどうでしょうか。
IMG_07111.jpg

IMG_07111.jpg
特に「HAF922」の文字のあたりは下の画像のほうがシャープになっています。
え!?わかりにくい!?

ではこちらの2枚。先日アクセス解析の記事の画像ですw
ただいま妄想中

ただいま妄想中
元画像とサムネイルの大きさがそれほど違わないのであれですが、それでもこちらのほうは違いが分かりますよね。(Ctrlと+キー同時押しで拡大するとよくわかります)


さて、その方法ですが...いたって簡単♪
2013y08m11d_230345728.jpg
まず、画像をアップロードし終えたら、「サムネイルで記事を書く」ではなく、「この画像で記事を書く」をクリックします。

当然、そのままでは画像が本文からはみ出てしまうので、画像の大きさを調整します。
2013y08m11d_230526368.jpg
本文に記述された表示の赤線の部分を調整し、好みの大きさに変更するだけです。
※この時、縦横の比率は変えないように注意してください。
 この記述についてはサムネイルをクリックしたときに違う画像を表示する☆でも
 説明しています。


縦横比がわからん!!という方は、「サムネイルで記事を書く」「この画像で記事を書く」の両方をクリックして、
2013y08m11d_231847221.jpg
下の赤ライン部分(元画像の画像サイズ)を上の赤ライン部分(サムネイルの画像サイズ)に変更しましょう☆
もちろん、そのあとでサムネイル表示の画像は忘れずに消しておいてくださいね。


----------------------------------------------------------------------------------

【追記】もっと簡単に修正する方法☆
先にこっちを書けばよかった(; ̄ー ̄A

「サムネイルで記事を書く」をクリックして画像を挿入した後...
2013y08m13d_060737900.jpg

上の<a href="元画像のURL”~>と、<img src="サムネイル画像のURL"~>のURLはほとんど同じに見えますが、サムネイル画像のURLには、画像の名前の後に「s」がついていますので、これを削除するだけでOK。
ちなみに、以前にも説明していますが、この元画像のURLとサムネイル画像のURL、それぞれを変えてしまうことで、クリックしたときに違う画像を表示したり、別のサイトにリンクする設定にできます☆
----------------------------------------------------------------------------------


とくに元画像とサムネイルの大きさが違う場合に効果的です♪
サムネイル画像の荒さが気になる方は是非お試しを☆

ただし、サムネイル画像ではなく、元の画像を読み込んで縮小表示する都合上、多用しすぎるとページの読み込みに時間がかかってしまうようになることも考えられますので、その辺はうまく使い分けてください。


それではみなさん、**SeeYou**( ̄∀ ̄*)ノ

ランキングに参加しております♪

にほんブログ村




関連記事


    23:26 | Trackback : 0 | Comment : 7 | Top
Comment
パパさんこんばんは!

(゚д゚)!7年もブログ続けてらっしゃるとは!!私も頑張って続けて逝きたい・・・・

サムネイル作成の部分ってあんまし具合よくないんですね・・・・私使ったこと無いんですけど(笑

ちなみに私には小ワザではなく大ワザです(´ヘ`;)ウーム…ムツカシイ

  [URL] [Edit]
2013.08.13 Tue 01:59  |  Pasion #HfMzn2gY
ホントだ~!
サムネイルの画像なんて全然気にしてませんでした。
ほとんどの人が拡大してくれずサムネイル画像しか見ていないのに(^^;)
勉強になりました!
FC2、画像一枚あたりの容量がアップしてやっと外部から画像を引っ張ってくる手間から解放されました(^^)
こんばんは  [URL] [Edit]
タニアンさん
始めたのは7年前ですが...途中書いたり書かなかったりですので(; ̄ー ̄A
まぁマイペースに書きたいことを書きたいときに書くのがいいと思います☆
サムネイルは毎回ではないですが、たまーに気になるときがあるので、そういう場合は使っていますね。
追記をしましたので、そちらを参考にしてください♪


Pasionさん
気にならない写真もあるんですけどね~。
FC2容量アップしたんですか?知らなかった(爆)
500KBはさすがに小さすぎましたよね(; ̄ー ̄A

  [URL] [Edit]
2015.06.25 Thu 21:07  |  あき #-
FC2でブログを始めて3日目!
アップした写真がぼやけて困ってました。
でも、これで解消!
sを取るだけで~。
助かりました。

あと、写真が縦、横さかさまになってしまうのです。
どうしたら良いでしょうか?
1日目の写真は、何をどうしたら分からず、いじってたら縦横直ってOKでした。
(他のアプリなどダウンロードせずに)
でも2日目にあげた写真は横向いたまま(涙)
色々いじりましたが、初日はどうして直ったか、覚えていなくて。

教えて頂けないでしょうか?
他の方のQ&A見ても、よく分からなくて、こちらにたどり着いた次第です。

宜しくお願い致します。

助かりました!  [URL] [Edit]
2015.06.26 Fri 01:26  |  りくんちゅ。パパ #CLdJdQDA
あきさん
こんばんは。
写真の向きが変わってしまうのはアップロードしてからでしょうか?

アップロードする前に一度画像を確認してみて、縦横が違っているようなら右クリック⇒右回り(or左回り)に回転で、直されてからアップロードされるのが一番早いと思います。
アップロードしてから縦横の向きを変えるのはテンプレートからいじらないとできないと思います(汗)

ちなみに、一旦アップロード後に画像を修正して同じ画像をアップロードしなおす場合、面倒でも名前の変更(一文字追加するなど)をしないと(前の画像を削除していても)サムネイルには前の画像が表示されてしまう場合がありますので注意です☆

  [URL] [Edit]
2015.06.26 Fri 20:35  |  あき #-
りくんちゅ。パパ  さん

こんばんは。
アップロードする前に縦横直して→FC2のファイルアップロード→ファイル情報(左にアップロードしたい写真がでる)見ると、また、向きが逆に戻ってるのです。???直してアップロードしたのに何で?

昨日、この為に何時間も格闘しまして、サムネイル記事を書く→ border="0" width="200" height="200" /></a> ここの200の数字を色々変えたりして、UPしました。
レビューを見たら、きちんとできていたので、そのままにUPしました。
今日のお昼に見てみたら、また、縦横、逆になっていました(泣)
「家に帰ってから、また直そう」と思い、今、確認したら、また直っていました。

何なんでしょう?
直ったり、逆になったり、自分でも何をやって直ったり逆になったりするのか、分からなくなってしました。

「ちなみに、一旦アップロード後に画像を修正して同じ画像をアップロードしなおす場合、面倒でも名前の変更(一文字追加するなど)をしないと(前の画像を削除していても)サムネイルには前の画像が表示されてしまう場合がありますので注意です☆ 」

こちら、次回、記事をUPした時にやってみます。
長々、ありがとうございました。
又、困った時は助けて頂けますでしょうか?
お返事ありがとうございます。  [URL] [Edit]
2015.06.27 Sat 00:30  |  りくんちゅ。パパ #CLdJdQDA
あきさん
こんばんは。

レビューを見たらきちんとできていてUP ⇒ 昼に見たら縦横逆 ⇒ 帰ってみたらまた直っていた

とのことですが、昼に見たのは記事をUPしたパソコンとは別のパソコンなり、スマホ、ということでしょうか?
だとすると前回書いたように、ファイル名が同じになっていることで記事をUPしているパソコン、または他のパソコン・スマホなどに最新の(修正後の)画像が読み込まれていない可能性があります。
インターネットでサイトを閲覧する際には、一度表示した画像を何度もダウンロードしなくてすむように、一時的に画像ファイルがPCやスマホに記憶されます。
(「戻る」ボタンなどですぐに画像が表示されるのはこのため)

インターネット一時ファイル・ブラウザキャッシュなどと呼ばれますが、ファイル名が同じなために、修正後の画像を新たにダウンロードして表示せず、このキャッシュファイルから修正前のファイルを引っ張ってきて表示している可能性があります。

一度これらのキャッシュファイル(画像などを一時的に記憶しているファイル)を削除してプレビューをしなおしてみるか、先日書いたように修正後の画像を別名でUPするなどすると改善するかもしれません。

ちなみに、ファイルのアップロード時に「共有設定」で、サムネイルの大きさを指定できますが、その左側にある「同名ファイル」を「別名で保存」にしておくと自動的に同じ名前のファイルがあった場合、別の名前に変更されます。

ボクも実はそんなに詳しいわけではないので(笑)、お役に立てるかどうかわかりませんが、もしお困りであれば、ブログ右上にあるメールフォームからメールを直接発射していただいても構いません。
よろしくお願いします。

  [URL] [Edit]









(編集・削除用)


管理者にだけ表示を許可
Trackback
http://rikuntyudady.blog101.fc2.com/tb.php/997-f409859d
プロフィール

りくんちゅ。パパ

Author:りくんちゅ。パパ
初歩的な話からオーバークロックまで、PCに関することやその他趣味に関することを思い付きで書いています。
コメントはお気軽にどぞ。

「rikuntyudady」の名前で出没することもあります(笑)

rikuntyudady01.jpg

このサイトはFirefox,Google Chrome用に最適化されています。
IEでは一部表示が正しく行われない場合があります。
ご了承ください。


アクセスカウンター
signbot_20101017072856.gif
現在の閲覧者数:

galleryロゴ02
cmcrogo2.png
RikuntyudadyのCM690をUP!!
☆ただ今34台展示中☆



みんなのPC♪ギャラリーはコチラ。

Page 1 Page 2


Categories...

クリックで全て開閉↓

openclose


○自作をしてみたい方へ
○オーバークロックについて

「+」はフォルダクリックでOPEN

全ての記事を表示する


見つからない場合はコチラ
(記事内検索)

最新記事
最新コメント
☆MY GEAR☆
カスタマイズ工程はコチラ
画像
画像
画像
画像
画像
画像
画像
ATCS840
COSMOS II
CORE1500
MasterCase5Mod

<製作依頼PC>
画像
Overclock.net work log
MNPCTECH"Case Mod Blog"
画像
画像
【CORSAIR Vengeance® C70】
HAF X MOD

<コラボ企画> 画像
SNIPER
☆おもな活動サイト☆

Cooler Master Forum
CoolerMaster

techPoweUp! Case Mod Gallary-
techPowerUp!

Overclock.net
   -Case Mod Work Logs-
Overclock.net

Case Modding Forum
Case Modding Forum

こだわりの持ち物を登録しよう♪
2010y05m05d_221238218.jpg

Web page translation
THIS IS MY GEAR
2016y03m23d_233159886.png 2016y03m23d_233204419.png
感染者増殖中...
りくんちゅ。パパにメールする







本文:

☆掲示板☆

趣味の工房 ~みんなの休憩室♪~
お気に入りブログ♪
カメラ熱上昇中♪
【Canon】EOS 70D 70D.png ○レンズ
【Canon】
EF-S18-135mm F3.5-5.6 IS STM
EF-S55-250mm F4-5.6 IS STM 【SIGMA】
18-35mm F1.8 DC HSM|Art
APO 50-150mm F2.8 EX DC OS HSM


【Canon】G7 X canon_g7x_20150528010550367.png
☆広告☆
ブロとも申請フォーム
QRコード
QRコード
RSSリンクの表示