スポンサーサイト

上記の広告は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

コメントの投稿

非公開コメント

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Re: タイトルなし

非公開コメントMさん

ブログを拝見させていただいたところ1.1をお使いのようですので、

299~309行目
#entry_list li:nth-child(even) .entry {
display:block;
padding:20px 15px 20px 100px;
text-align:right;
}

#entry_list li a.odd {
display:block;
padding:20px 15px 20px 100px;
text-align:right;
}


334~340行目
#entry_list li:nth-child(even) .entry div {
left:15px;
}

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


の部分を全て削除して確認していただけますでしょうか。
こちらの環境では「画像右配置・文字左寄せ」になるのですが・・・
もしダメでしたらお手数ですがもう一度コメントいただくかバージョンアップをお願いいたしますm(__)m

丁寧にありがとうございました。

無事に変更できました。

Re: タイトルなし

みみこぉ☆^さん

無事変更できたようで安心いたしました。
ご愛用ありがとうございますm(__)m

承認待ちコメント

このコメントは管理者の承認待ちです
プロフィール

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