スポンサーサイト

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

【simple_photo】サムネイル画像を指定する方法(ver2.0)

スマートフォン版テンプレート【simple_photo】ver2.0から、記事一覧で表示されるサムネイルを選べるオプションを追加しました。
公式テンプレートのサムネイルじゃ機能が足りない!という方は使ってみてくださいね。
【simple_photo】のバージョンはテンプレートのスタイルシートの最終行で確認してください。


【simple_photo】ver2.0でできること
・idを指定した好きな画像のサムネイル表示(参照)
・外部サイトのバナーなど、FC2にアップロードした以外の画像のサムネイル表示
・指定したファイル名の画像のサムネイル表示
・サムネイルにする画像の最小サイズ指定


以上のオプションは『simple_photoのHTML編集』66行目辺り

//サムネイル設定
$("#entry_list").getImage({
onlyFC2Image: true,
useFileName: false,
minWidth: 0,
minHeight: 0,
id: 'simple_photo_img',
fileName: 'spthumb_',
});

で設定します。
デフォルトではFC2からアップロードした画像を含む記事の一番上の画像がサムネイル表示されます。



onlyFC2Image: true,

FC2にアップロードした以外の画像をサムネイル表示するかどうかの設定です。
FC2ブログの仕様で、記事本文にFC2にアップロードした画像がある場合のみ『画像ありの記事』と判断されるようです。
外部サイトのバナーなどのタグを手動で貼っただけの記事は、サムネイル画像が取得されません。
追記にのみ画像をアップした際も取得されないようです。
そういった場合もサムネイルとして取得したい場合はこれを

onlyFC2Image: false,

にしてください。



useFileName: false,

ファイル名が[spthumb_]で始まる画像をサムネイルにするかどうかの設定です。
複数ある場合は一番最初に出てきた[spthumb_]で始まる画像をサムネイルにします。
使用する場合は

useFileName: true,

にしてください。



minWidth: 0,
minHeight: 0,

サムネイルにする画像の最小サイズをピクセル単位で指定できます。
1pxのスペーサーや小さな絵文字などをスキップすることができます。
指定は数字のみで、1pxの画像を表示したくない場合は

minWidth: 2,
minHeight: 2,

のようにしてください。
ただし最小サイズを指定すると表示に時間がかかる場合があります。
サイズの比較のために上から順に一枚ずつ画像を読み込むため、指定サイズより小さい画像が大量にある場合は推奨できません。


指定例
1019sp3.png

minWidth: 0,
minHeight: 0,
※指定なし
①が表示されます

minWidth: 100,
minHeight: 0,
③が表示されます

minWidth: 100,
minHeight: 100,
④が表示されます


サムネイル選択の優先順位は

▼FC2以外の画像を表示するか
▼id
▼ファイル名
▼最小サイズ

です。



id: 'simple_photo_img',
fileName: 'spthumb_',

変更するとid名やファイル名を好きな名前にできます。
デフォルト状態で説明していますので、必要がなければそのままお使いください。



長々説明してしまいましたが、複雑な機能はいらないって方はデフォルトで使うのが一番表示も速いと思います。
公式テンプレートのサムネイル表示はたぶんもっと速いです(^^;)
自分が欲しい機能を詰め込んだらややこしくなってしまいましたが、お役に立てれば幸いです。
スポンサーサイト

Theme : FC2ブログ共有テンプレート
Genre : ブログ

Tag : simple_photo

コメントの投稿

非公開コメント

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
プロフィール

sasha

Author:sasha

テンプレート確認環境

*PC版

Windows
OS:Windows7
ブラウザ:IE・Firefox・Safari・Opera・GoogleChrome 最新バージョン

Mac
OS:MacOSX 10.7.2 Lion
ブラウザ:Safari・Firefox・GoogleChrome

*スマートフォン版

iPhone4S
OS:iOS5.0.1
ブラウザ:Safari

最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
タグ

simple_photo (5)
natural_linen (1)
simple_white (1)
retro_pop (1)

検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

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