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

対処法で一番手っ取り早いのは 「正方形の画像をアップロードしとけ」ってことになるのですが。FC2に限らずFacebookにしてもTwitterにしても、あそこにしてもそこにしても、正方形にしておけばまず間違いないです。プロフ画像は正方形で というのがSNSセオリー (･ω･)ゞ

ここから先はごちゃごちゃと説明はいりますので「ん。わかった。正方形にしとく」という方は特に読む必要はございません(ぇ？)

FC2の「画像トリム」

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

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

画像トリムサイズ と言われるとそのまんまの意味の「トリミング」かと思ってしまいますわな　(´・ω・｀)
画像のトリミングというのは通常は余分なものをそぎ落としてサイズを整えることを指しますけれども、ここでのトリミングはそういうことはしてくれません。ここで例えば短い辺を基準にして 横幅 240px 縦幅 240px とこのように記入してしまうとこうなります　↓

薔薇の方ご覧いただければわかるでしょうか。長い方の辺がギュっと潰れて 縦横比が狂っています。

FC2プロフ画像アップロードの「画像トリム」は一般的なトリムとは 違う てことですね。ややこしいので文言変えた方が良いと思います。

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

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

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

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

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

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

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

ちなみに円形を解除するには CSSソース内 .plugin-myimage あるいは .plugin-myimage img が対象箇所なので、そこから border-radius: 50%; の記述を削除した上で、さらに height: auto; を指定(heightへの具体的数値設定を外す)すればOKです。

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