vanillaice (Akira)

vanillaice (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

There are no comments yet.

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
2017.8.8 本日より10日ほど留守にしますのでお返事遅れます。すみません