FCafe  サムネイルをリサイズ

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

 色々と試している内に、ブログの記事とそれに掲載される画像(写真)の関係には(場合によって)様々な価値観?が適用されうるものであるなあ と感じるようになった管理人です。

 「大きいサイズの写真は見栄えが良い」 ⇒ 1カラムやリキッドテンプレートを使う
 「カラム幅が狭くて写真が載せられない」 ⇒ リンク付きサムネイルを使用する

・・等の単純な問題に収斂させる事はできません。 「実寸でカラム(テンプレート)に収まる画像(写真)は実寸で表示し、収まらない画像は収納可能限度のサイズに変更してリンクを付ける」 という着眼で考え始めた訳ですが、けっしてその方法論が唯一のものではないでしょう。
JUGEMのようにサムネイルを使用できない場合はまた異なる方法が必要になるでありましょうし、一つ飛んで前の記事でのような着眼もあるのではないかと。

 その記事のサンプルを作っていて(サムネ初体験)思いました。
「ウチのサムネ、 ちっちぇな!」
FC2blogでは画像投稿時にサムネイルを自動作成する事ができます。 記事に載せる時はファイル管理画面でリンク付きのタグまで提示してくれます(本画像参照リンク等は不要なら削除すれば良いけれども 打ち込むのは大変なのでこの仕様は親切。コレでいいのだ)。
そればかりか作成されるサムネイルのサイズまで指定する事が可能! なんてリッチ。
 このサムネなるもの、どうせならもっと有効に使ってみたいものではありませんか。
・・という訳で 「サムネを拡大して表示する」 というネタ運用法を考えてみました。

 

SAMPLE


【 設定法 】  記事部分が以下のようである時

<!--topentry-->
  ・・・・
  ・・・・
  <div class="△">
   <%topentry_body> 

 </div>
  ・・・・
  ・・・・
<!--/topentry-->

CSSに以下を追加します

.△ a img { width:○○○px; }

【 使用法 】
 1) 記事に載せる画像(写真)は大小を問わず『サムネイルも作成』しておきます
 2) 投稿時はどの画像も [サムネイルを使用] で表示されるタグを貼り付けます
 3) 記事中のリンク付き文字列に絵文字を使わない(混ぜない)ようにします


【 解 説 】  スクリプトは使用せずCSSのみでサムネイルをリサイズ(拡大)しています。
記事部分の画像はサムネイル以外にタイトルアイコンや装飾枠等もありますので CSSには上記のように「記事文章(topentry_body、more)」を包含する最小コンテナに設定するようにします。
しかし、 △. img { width:~px; }  と書くと「絵文字」の画像がえらいコトになってしまいます (絵文字を使用しないならこれでOK)。  gif 画像と jpg 画像で属性を定義分けできれば良いのですが、難しいので『サムネイルにはリンクが載っている』という性質を利用しています。 (故にリンク文中での絵文字使用を控える訳です) 

 サムネイルとは言っても、blog中に表示して使用するものであるからには 「見易さ」が求められるのは当然でありましょう。  ( 「軽いのが良い」とは言っても風景写真が絵文字サイズのようであったら何が映っているか分かりません )
一方、今までの記事で元画像をそのサイズにリサイズ(縮小)していた「カラム適合幅」にサムネイルのサイズを設定する、 という方法も考えられますが、それではデータ量や表示の軽さが損なわれるおそれがあります。
 そこで、「サムネイルを拡大して載(見)せたらどうか?」 ・・と考えた訳です。 「元画像を縮小表示」という発想の逆転と申しますか。 ( 縮小の拡大なのだ )

 リンクしたサンプルはそれにあたり 「サムネイルというのはどの程度の拡大に耐えうるのか?」 を検証しようとしたもので、 原寸(幅) 150px のサムネイルを 200 , 250 , 300px の各サイズで表示してありますが如何でしょうか。
Daniel's Conclusion ”画素数が同じなら大きい方が見易い” ( サムネイルに関し サイズ設定ばかりでなく「倍率」にも着目してみては? という提案でした )

Comment


.  
HN Title URL PW secret

TrackBack http://pcafe.blog3.fc2.com/tb.php/437-b222cf0e

Shown after Admisson
.

≫ 頁内実寸表示サムネイル版 頁内で実寸表示 ≪

2007 / 02 / 25  Sun
Entry   
Comment 0 / TB 0 / Edit
Designed by Daniel Corporation . all rights renounced
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。