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

ホーム > ブログカスタマイズ > 画像系 > サムネイル画像を表示する

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

2014.09.06

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

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

そして、このサムネイルの表示は主に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パターン】で表示したサムネイル
サムネイルのサイズ：横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パターン】で表示したサムネイル
サムネイルのサイズ：横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パターンのサムネイル】

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

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

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

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

写真のサムネイル等を綺麗に並べたい時なんかは、結構違ってくるかも＾＾；

ブログランキングに参加中♪
良かったらポチっとお願いします