スポンサーサイト

 

--.--.--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!
-------- | スポンサー広告 | | | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/4-8ddc5e08

「スポンサーサイト」へのトラックバック

- TrackBack -


「スポンサーサイト」へのコメント

- Comment -

No title

サムネイルの意味がずっと分かってなかったから、これでスッキリしました(≧∇≦)この写真すごく素敵ですね(^^)どこに行ったら見れるんですか??
  • 2014-10-28 17:45
  • ひーさんさん@管理人
  • 編集

Re: No title

> ひーさんさん

いつもコメントを頂きありがとうございます♪

画像は多分、下記のようなまとめサイトで見つけたような気がします...w
http://matome.naver.jp/odai/2133394530736536101
  • 2014-10-28 18:48
  • あると♪さん@管理人
  • 編集

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

サムネイル画像を表示する

 

2014.09.06

サムネイルを表示「サムネイル」とは?
簡単に言えば、画像を縮小表示した物。親指(thumb)の爪(nail)のように小さく簡潔であるという意味から来ている。

例えば、ホームページ上で画像とテキストを組み合わせて表示したり、または複数の画像を並べて表示する際に画像を原寸表示するとレイアウトが崩れたり、表示領域からはみ出たりするので画像を縮小表示して、クリックしたら原寸表示になるようにする場合に使う。

そして、このサムネイルの表示は主に2つの方法がある。
以下でその2つの方法を【Aパターン】と【Bパターン】として違いを比べてみる。


【Aパターン】
1つ目の方法はホームページ上でHTMLやCSSを使って直接画像のサイズを変更して表示する方法。
この方法の場合、表示させたい画像だけを用意すればいいので簡単に出来るが原画像をそのまま読み込む事になるので、サイズの大きな画像やその量によっては表示速度が遅くなる場合がある。

HTMLの記述例
<a href="http://○○○(リンク先の原画像のURL)" target="_blank">
<img src="http://○○○(サムネイルにする画像のURL)" alt="画像のタイトル" border="0"
width="縮小表示する横幅のサイズ" height="縮小表示する縦幅のサイズ" /></a>
※赤字の部分に同じ画像のアドレスを入れる。


この方法をFC2ブログでやる場合は、
「管理画面」の「ファイルのアップロード」をクリックして
表示する画像を選択してアップロードする。

この時に付けたファイルのタイトルが
「alt="画像のタイトル"」に自動的に入ります。
※HTMLの方で変更する事も、もちろん可能



その後、アップロードしたファイルの下にあるURLをコピーし、
上記HTMLの記述例の赤字の部分にそれぞれ張り付けて
サムネイルとして縮小表示するサイズを指定する。




↓実際にこの方法で作ったサムネイルはこんな感じ。

【Aパターン】のサムネイル

【Aパターン】で表示したサムネイル
サムネイルのサイズ: 横200px × 縦150px
画像の原寸: 横800px × 縦600px

ページを表示する時に原画像も読み込んで
HTMLでサイズを指定して縮小表示してます。


上記サムネイルのHTML
<a href="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0017.jpg" target="_blank">
<img src="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0017.jpg"
alt="【Aパターン】のサムネイル" border="0" width="200" height="150" /></a>





【Bパターン】
2つ目の方法は、サムネイル用の画像を別に用意する方法。
この方法はリンク先の原画像とサムネイルで表示する画像をそれぞれ別の物にする事により、
手間は掛かるがページ上で原画像を読み込まなくて済むのでページの表示が軽くなる。

重たいページだと、何かとストレスを感じるのでサムネイル表示は基本的にこの方法が良い。

そしてFC2ブログでは画像をアップロードする際に、サムネイル用の画像を作成する項目にチェックを付けるだけで自動で用意してくれるので、それぞれ別の画像を用意する手間を省ける。

HTMLの記述例
<a href="http://○○○(リンク先の原画像のURL)" target="_blank">
<img src="http://○○○(サムネイルにする画像のURL)" alt="画像のタイトル" border="0"
width="サムネイル画像の横幅のサイズ" height="サムネイル画像の縦幅のサイズ" /></a>
※原画像のURLとサムネイルにする画像のURLをそれぞれ別の物にする。
※サムネイル用に用意した画像のサイズで表示する場合は、HTMLで縦横のサイズ指定をしなくても良い。


この方法をFC2ブログでやる場合は、
「管理画面」の「ファイルのアップロード」をクリックして
表示する画像を選択してアップロードする際に
サムネイルの「同時に作成する(jpg、gif、png)」にチェックを付ける

この時に付けたファイルのタイトルが
「alt="画像のタイトル"」に自動的に入ります。
※HTMLの方で変更する事も、もちろん可能



その後、アップロードしたファイルの右にある
「サムネイルで記事を書く」をクリックする。



するとサムネイルのコードが出来てるので、このまま記事を書くか
このコードをコピーして、表示したい場所に張り付ければOKです。

※このコードをそのまま使う場合は原画像へのリンク先が
アルバム一覧があるページになってるので、ただ別ウインドウで
開きたい時は一つ前の手順のファイル一覧画面にあるURLに書き換える

そうすると原画像とサムネイルのURLの違いはサムネイルのURLの
末尾にある“s”の一文字だけになります。(拡張子の前)



↓【Bパターン】で先程の画像と同じ物を使って作ったサムネイルはこんな感じ。

【Bパターン】のサムネイル

【Bパターン】で表示したサムネイル
サムネイルのサイズ: 横200px × 縦150px
画像の原寸: 横800px × 縦600px

ページを表示する時にサムネイルの画像だけを読み込み
原画像はクリックしてから読み込まれます。


上記サムネイルのHTML
<a href="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0017.jpg" target="_blank">
<img src="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0017s.jpg"
alt="【Bパターン】のサムネイル" border="0" /></a>
※サムネイルを200pxで作成したのでHTMLで縦横のサイズ指定をしなくても自動的に作ったサイズで
 表示になる為「width="200" height="150"」の部分を除きました。
※原画像のURLとサムネイル画像のURLが一文字違うので別物になってます。(“s”の部分)





■ 最後にそれぞれのパターンでの違いを比べてみる

【Aパターン】のHTML
<a href="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0017.jpg" target="_blank">
<img src="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0017.jpg"
alt="【Aパターン】のサムネイル" border="0" width="200" height="150" /></a>
※リンク先の原画像のURLとサムネイル画像のURLは同じで縮小表示するサイズ指定をする。

【Bパターン】のHTML
<a href="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0017.jpg" target="_blank">
<img src="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0017s.jpg"
alt="【Bパターン】のサムネイル" border="0" /></a>
※リンク先の原画像のURLとサムネイル画像のURLが異なる。(赤字にしてる“s”の部分が異なる)
※サムネイル用の画像を予めサイズを指定して作ってるのでHTMLでサイズ指定をしなくても良い。

見た目はほぼ同じような感じだが、URLの“s”の一文字とサイズ指定の有無が違う為
コードの部分でも若干すっきりするし何より【Bパターン】は原画像を読み込まなくて良いので
表示速度の点でも良い。


そしてサムネイルでの表示も見比べてみる。
【Aパターン】は画像のサイズをHTMLで直接縮小している。
【Bパターン】はFC2ブログの機能でサムネイルを自動で作って表示している。

【Aパターンのサムネイル】
【Aパターン】のサムネイル
【Bパターン】のサムネイル
【Bパターン】のサムネイル

よく見ると【Aパターン】の方が綺麗で、【Bパターン】の方は少しぼやけてます。
違いがよく分からない場合は、キーボードの「Ctrl」と「+」で拡大してみると分かり易いです。
※縮小する時は「Ctrl」と「-」です。

これはFC2ブログの機能でサムネイルを自動で作った際に画質が悪くなってるので、
この問題を解決するには、手間ではあるけど自分で画像加工ソフト等を使って画像が劣化しないように
サムネイル用の縮小した画像を用意し、それをアップロードして使う。


まぁ正直微妙な違いなので気にしない人も多いだろうけど...w

写真のサムネイル等を綺麗に並べたい時なんかは、結構違ってくるかも^^;
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!


関連記事
2014-09-06 | 画像系 | コメント(2) | トラックバック(0) | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/4-8ddc5e08

「サムネイル画像を表示する」へのトラックバック

- TrackBack -


「サムネイル画像を表示する」へのコメント

- Comment -

No title

サムネイルの意味がずっと分かってなかったから、これでスッキリしました(≧∇≦)この写真すごく素敵ですね(^^)どこに行ったら見れるんですか??
  • 2014-10-28 17:45
  • ひーさんさん@管理人
  • 編集

Re: No title

> ひーさんさん

いつもコメントを頂きありがとうございます♪

画像は多分、下記のようなまとめサイトで見つけたような気がします...w
http://matome.naver.jp/odai/2133394530736536101
  • 2014-10-28 18:48
  • あると♪さん@管理人
  • 編集

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

▼クリックすると配色が変更されます  
このボタンの設置方法は こちら♪

White
Black

プロフィールClick

プロフィール画像

Author:あると♪
ブログ開始: 日目
公開記事数:

Webサイト製作の勉強にと思ってブログのカスタマイズに挑戦してる初心者です♪その他にも気になった事、興味がある事などを気ままに書いてますっ!!

当ブログのご案内は こちら♪

最新記事Click

最新コメントClick

カテゴリClick

月別アーカイブClick

アクセスカウンターClick

設置日
2014.11.19

スポンサーリンクClick

このページの目次Click

人気ランキングClick

ブログパーツ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。