Article page

by
  • Comment:0
  • Trackback:0

主に「縦長」の画像が上手く揃わないなー という方へ向けてです
そしてFC2サムネイルではなくRSS新着サムネイル の調整のお話しです

・FC2サムネイル = トップページが要約表示の際に表示されるサムネイル
(記事と共に掲載)

・RSS新着サムネイル = RSSに配信されたログを取得して最新から何件という表示
(主にサイドメニューやフッター上 あるいは 個別記事の下などに設置)


FC2サムネイルの方のサイズ揃えは簡単なのですが
RSSサムネイルの方はちょっと一筋縄ではいきません
FC2〜 の方はJSを利用して
RSS〜 の方は CSS を利用して整形を行っています

みなさんが記事内に掲載されます画像はサイズがまちまち
さらに縦横比もまちまち ですから
なかなか完璧にサイズを揃える というのは難しい ^^;

基本的には「横長の画像が多いであろう」というのを前提に整形していますが
逆に「縦長が多いのに…」という方もいらっしゃるかと思います


サンプル (使用テンプレ「All-about-us」)



こちら ↑ が正しい状態 というか 私が意図している表示の状態です
ところが画像の縦横比によっては以下のような形になってしまうことがあります





赤丸が打ってある画像ですね
横の寸が足りていませんので 画像同士の間に隙間ができてしまいました
(No image画像については起こらないよう調整してあります)

横長画像の場合には起こりません
画像が 縦長 であった場合に発生する事象です


修正の仕方


Ctrl+Fキー検索

rss thumbnail


CSSソース内に コメント として記載されています
こんな感じ ↓

/***------------------------------------------
rss thumbnail
------------------------------------------***/


この項目の中に

transform: translate(-50%,-50%);


と記してある箇所があるはずです
テンプレによって それが指定されているidやclass名は異なります
例えば All-about-usを例に取ると

.rss-image img

が対象になります
上記 transform〜 と同じ括りの中に

height: 数値%;


というのがありますので この数値をデフォルトよりも 大きく 修正します
例えば 120% とあったならば 150% に変更 といった具合

これで短辺の寸足らずをある程度防ぐことができます
拡大されることになりますので 当然縦の見切れ分は増えますが
縦横比の物理的法則を考えればこれは避けられません


-----------


んで 対象箇所がソース内に見つからない場合は
そのテンプレートでは別の方式を取ってるってことです
ごめんなさい ヾ(・ェ・ヾ)

縦長画像の掲載が多い方へ向けてのtipsでした
関連記事
vanillaice (Akira)
Posted byvanillaice (Akira)

Comments 0

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い