The other way round

ARTICLE PAGE

FC2プロフィール写真の縦横比について

author photo

Byvanillaice (Akira)

テンプレートによってはプロフ画像が「円形」になっていることがあります
それは製作者サイドが選択したデザインである ということです
自身のプロフ写真が丸くなることによって なんだか歪んだおかしな画像になってしまう
一度はご経験あるのではないでしょうか
FC2のプロフ写真の仕様と共に対処等ご説明します

対処法で一番手っ取り早いのは
「正方形の画像をアップロードしとけ」
ってことになるのですが
FC2に限らず FBにしてもTwitterにしても あそこにしてもそこにしても
正方形にしておけばまず間違いないです
プロフ画像は正方形で というのがSNSセオリー (・ω・)ゞ
ここから先はごちゃごちゃと説明はいりますので
「ん わかった 正方形にしとく」
という方は特に読む必要はございません(ぇ?)


FC2の「画像トリム」



FC2のプロフィール画像というのはユーザーが任意でアップロードしますよね
サンプルとしてこちらの画像を使います

sample

この画像の原寸は 横240px 縦320px の長方形です
で アップロード時にですね こんな項目があるわけですよ ↓

sample

画像トリムサイズ

そのまんまの意味の「トリミング」かと思ってしまいますわな (´・ω・`)
画像のトリミングというのは通常 余分なものをそぎ落としてサイズを整えることを指しますけれども
ここでのトリミングはそういうことはしてくれません
ここで例えば 短い辺を基準にして

横幅 240px 縦幅 240px

と このように記入してしまうとこうなります ↓

sample

わかりますかね (´・ω・`)
薔薇の方ご覧いただければわかるかしら
長い方の辺がギュっと潰れて縦横比が狂っています
FC2プロフ画像アップロードの「画像トリム」は一般的なトリムとは違う
ってことですね
ややこしいので文言変えた方が良いと思います(笑)

ということは
全体像がちょっと大きめなので小さく設定しよう
と思うのならば 例えば横150pxにしておこう なんて思ったのであれば
縦を同じ縦横比で計算しないといけません でないと構図が狂ってしまいます
みなさんよくご存知でしょうから 大抵は元画像の原寸(縦横サイズ)をそのまま記入しているかと思います


プロフ画像を丸くする仕組み


CSSのborder-radiusというプロパティを利用します
このプロパティを利用する際には
横サイズと縦サイズを同じ数字に揃える必要があります
縦横の数値が異なると楕円形になってしまいます

プロフ画像を表示させるために大抵の方は「公式プラグイン」をご利用かと思います
それをそのまま流用してborder-radiusによる円形表示をしてしまうと
ユーザー各個の画像縦横比によっては構図が狂ってしまうわけです

もうひとつの方法は「公式プラグイン」を利用せず
テンプレート製作者がhtmlの中に別途でソースを記述します
この場合には公式プラグインと内容がダブります
(私のテンプレの場合には「カレンダー」がそれにあたります)
この場合には縦横比を壊すことなく操作することができますが
画像が縦長であるのか それとも横長であるのか
そこまでは製作者側ではわかりませんので完璧なものにはなりません
見せたい部分が見切れてしまったり ということが起こる可能性は十分にあります
公式テンプレートでプロフ画像が上にドカンと表示されるタイプはこちらの方法を採用していますので
よほど縦横比が狂うことはありませんが 公式プラグインと内容がダブっているかと思います

後者の方法は不備が出た場合に修正作業がちょっと面倒なんですよね
ですから一番良いのは「画像はあらかじめ正方形に整形しておく」ことです

ま そゆことだ((((笑)
至って単純な理屈でtipsにもなりませんが お困りの方へ向けて ^^;

ちなみに円形を解除するには CSSソース内

.plugin-myimage

あるいは

.plugin-myimage img

が対象箇所ですので そこから border-radius: 50%; の記述を削除した上で
さらにheight: auto; を指定(heightへの具体的数値設定を外す)すればOKです

-------------

本年最後の投稿になる予定です
一年みなさまには大変お世話になりました
ブログ開設・テンプレ制作を初めて1年に満たない若輩ですが
翌年も同じくお付き合いくだされば幸いでございますemoji
良いお年をー ヾ(*'-'*)

関連記事

Comments 0

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
利用上のお願い (3)
ご質問の前に (2)
よくあるご質問 (1)
FC2不具合情報 (15)
割と重要なお知らせ (34)
テンプレート (68)
ブログ内限定配布 (6)
リリーステンプレート早見表 (1)
テンプレート固有機能説明 (1)
配布終了・旧作 (5)
テンプレ不具合・修正など (57)
カスタマイズ (90)
SNS (5)
FC2ブログのあれこれ (21)
webのあれこれ (8)
装飾枠 (3)
装飾枠使い方とお願いごと (1)
雑記 (32)
洋楽 (103)
50 Cent (1)
Akon (1)
All American Reject (1)
Amy Winehouse (1)
Andain (1)
A Perfect Circle (1)
Aura Dione (1)
Balint Adam (1)
Billy Talent (1)
Bliss (1)
Boyce Avenue (1)
Breaking Benjamin (3)
Breathe Carolina (1)
Catfish And The Bottlemen (0)
Damien Rice (2)
Danny Elfman (1)
Dave Matthews Band (1)
David Lee Roth (1)
Death Cab For Cutie (1)
Diary Of Dreams (2)
Digital Summer (1)
Disturbed (3)
Drowning Pool (1)
Eminem (1)
Five For Fighting (1)
Flo Rida (2)
Fort Minor (1)
Get Scared (2)
Goodnight Nurse (1)
Gotye (1)
Hoobastank (1)
InMe (1)
Ivy (1)
Jamiroquai (3)
Jeniffer Lopez (3)
Jet (1)
Kelly Clarkson (1)
Kelly Sweet (0)
Kula Shaker (1)
Late night almuni (4)
Led Zeppelin (1)
Lenny Kravitz (0)
Limp Bizkit (3)
Linkin Park (1)
Lorde (1)
Lou Reed (2)
Magic! (1)
Maroon 5 (1)
Michiko (1)
Mindless Self Indulgence (1)
Mindy Gledhill (0)
Miss Jane (1)
Muse (2)
N.E.R.D. (1)
Nickelback (1)
Nirvana (1)
Oasis (1)
Panic! At The Disco (1)
Papa Roach (1)
Pharrell Williams (1)
Radiohead (1)
Rage Against The Machine (1)
Red (1)
Red Hot Chili Peppers (3)
Rhye (2)
Rumer (1)
Sade (1)
Sarah Brightman (1)
Shakira (1)
Sixpense None The Richer (0)
Soulja Boy (1)
Steven Cooper (1)
Sting (1)
Sum 41 (2)
Taio Cruz (1)
The Fratellis (0)
The Pretty Reckless (1)
The Weepies (1)
Three Days Grace (1)
Tom Waits (2)
Travie McCoy ft. Bruno Mars (1)
TRUSTcompany (1)
Ty Stone (1)
U2 (1)
Westlife (1)
未分類(個人的テスト等) (48)