スポンサーサイト

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

【simple_photo】一覧表示を左右どちらかに揃える方法

スマートフォン版テンプレート【simple_photo】は、トップページやカテゴリ一覧などで記事が左右交互に表示されます。
これを揃えたいとの声が多かったので、カスタマイズ方法を説明します。
ver2.0での説明になりますので、以前のバージョンの方は記事後半の作業も行ってください。
【simple_photo】のバージョンはテンプレートのスタイルシートの最終行で確認してください。


変更箇所は『simple_photoのスタイルシート編集』329行目辺り
/* 左右交互に表示する設定 */

#entry_list li:nth-child(even) .entry {
padding:20px 15px 20px 100px;
text-align:right;
}

#entry_list li:nth-child(even) .entry div {
left:15px;
}

/* --ここまで-- */

こちらをご希望のスタイルのコードに書き換えてください。


画像右配置・文字左寄せ
r-l.png

該当箇所を削除


画像右配置・文字右寄せ
rr.png

/* 左右交互に表示する設定 */

#entry_list li .entry {
text-align:right;
}

/* --ここまで-- */



画像左配置・文字右寄せ

l-r.png

/* 左右交互に表示する設定 */

#entry_list li .entry {
padding:20px 15px 20px 100px;
text-align:right;
}

#entry_list li .entry div {
left:15px;
}

/* --ここまで-- */



画像左配置・文字左寄せ
l-l.png

/* 左右交互に表示する設定 */

#entry_list li .entry {
padding:20px 15px 20px 100px;
}

#entry_list li .entry div {
left:15px;
}

/* --ここまで-- */



カスタマイズされていて以前のバージョンをそのまま使いたい方は、
#entry_list li a.odd {
display:block;
padding:20px 15px 20px 100px;
text-align:right;
}

#entry_list li .entry div.odd {
left:15px;
}

上記のような.oddのスタイルを削除した後、上で説明したスタイルを探し変更してみてください。
場所や内容が少し違いますのでテキストエディタなどで検索してみてくださいm(__)m
スポンサーサイト

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

Tag : simple_photo

【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

【simple_photo】修正版 ver2.0公開

コメント欄や拍手から頂いた不具合を修正し、カスタマイズしやすいよう機能を追加したバージョン2.0を公開しました。

tshop33_simple_photov2.gif


変更点
・追記にアップした画像の幅が記事の幅より大きい場合、記事の幅におさまらない不具合を修正
・追記・トラックバックの折りたたみを開閉できるように変更(前バージョンは開くのみ)
・サムネイルにする画像の最小サイズ・ファイル名などを指定できるように変更(別記事参照)
・一覧表示の左寄せ・右寄せが簡単にできるようコードを変更(別記事参照)
・その他不要なコードの削除や綴り間違いの修正など
10191.png10192.png


内部的にはいろいろ変えているのですが、デザインや機能に大きな変更がないため更新で公開しています。
今後カスタマイズの説明などはこのバージョンメインで行いますので、すでに【simple_photo】をご利用の方はバージョンアップをお願いしますm(__)m

現在お使いのsimple_photoのスタイルシートの最後が
/* simple_photo v1.1 (C)2011 tshop33.blog.fc2.com */
となっている場合、または赤字部分がv1.0場合が対象です。

【simple_photo】という名前のテンプレートがすでにあるとダウンロードできないため、現在お使いのsimple_photoの名前を変更してダウンロードしてください。
古い分も残しておくことをおすすめします。

ダウンロードしたsimple_photoのスタイルシートの最後が
/* simple_photo v2.0 (C)2013 tshop33.blog.fc2.com */
となっていればOKです。


現在ご自分でカスタマイズされていて不具合がない場合はそのままお使いください。
特にサムネイル取得周りはかなり変更しているので、同じようにカスタマイズしようと思っても難しいかもしれません・・・。

変更の詳細やカスタマイズ方法は各記事でご確認ください。
【simple_photo】サムネイル画像を指定する方法(ver2.0)
【simple_photo】一覧表示を左右どちらかに揃える方法

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

Tag : simple_photo

【simple_photo】任意の画像をサムネイル表示する方法

スマートフォン版テンプレート【simple_photo】の記事一覧で表示されるサムネイルを、好きな画像に変更できます。

sp1.png
↑記事一覧ページ(トップページ等)
記事中の絵文字がサムネイルになってしまっています。


sp2.png
↑記事個別ページ
絵文字より下の画像をサムネイル表示させます。


変更方法
・ブログ管理ページ→『新しく記事を書く』または『過去記事の管理』から記事の編集画面を開く
・『本文の編集』欄のサムネイルにしたい画像のimgタグに[ id="simple_photo_img"]を追加

↑の画像の例の場合、2番目に出てくるimgタグに[ id="simple_photo_img"]を追加します。

変更前
こんにちは<img src="絵文字のURL" class="emoji" style="border:none;" /> ←のように絵文字が記事の最初にある場合や複数の画像がある場合、指定した画像をサムネイルにします。

<a href="サムネイルにしたい画像のURL" target="_blank"><img src="サムネイルにしたい画像のURL" alt="" border="0" width="640" height="425" /></a>

変更後
こんにちは<img src="絵文字のURL" class="emoji" style="border:none;" /> ←のように絵文字が記事の最初にある場合や複数の画像がある場合、指定した画像をサムネイルにします。

<a href="サムネイルにしたい画像のURL" target="_blank"><img id="simple_photo_img" src="サムネイルにしたい画像のURL" alt="" border="0" width="640" height="425" /></a>


sp1.png
サムネイルが変更されました。


ご質問や不具合報告、リクエスト等お気軽にコメントください♪

Tag : simple_photo

【simple_photo】スマフォ版テンプレ No.3

スマートフォン版テンプレート No.3 【simple_photo】を申請しました。

Simple photo

トップページの記事一覧に画像を表示できるシンプルなテンプレートです。
記事の一番最初の画像をサムネイル表示できます。
(画像より前の本文中に絵文字などがあると画像サムネイルとして取得されてしまいますのでご注意ください。)
※1/17更新 指定画像を表示できるようになりました。

ブログタイトル下の「newEntry」「Archive」などから各プラグインを開けます。
※上で表示させたプラグインは、管理画面のプラグインの設定→スマートフォン用プラグインの管理→詳細から「表示しない」に設定してください。
「表示する」のままだとページ下部のプラグインメニュー表示欄に重複して表示されてしまいます。


カスタマイズ方法は後日、別記事にて。

カスタマイズ方法
任意の画像をサムネイル表示する方法(1/18)

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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。