プロフィール画像の表示サイズを変更する

アメブロカスタマイズのわざめーばです。

こんにちは。

アメブロのサイドバーに表示されるプロフィール画像は、基本的にレイアウト毎に固定サイズで表示されるようになっていますが、

「もっと大きく(或いは小さく)表示したい」

という方もおられますよね。

(ちなみに僕は普通より小さく表示しています)

今回は、サイドバーのプロフィール画像の表示サイズを変更するカスタマイズ方法をご紹介します。

(新旧デザイン両対応です)

やり方は簡単で、以下のような設定をユーザーCSSの末尾に追加すればOKです。

#profile #person li.image img,
div.userProfileImage, div.userProfileImage img {
  width: 255px !important;
  height: auto !important;
}
div.userProfileImageArea {
  width: auto !important;
  height: auto !important;
}

赤文字255pxの部分には、実際にプロフィール画像を表示する横幅を指定してください。

また、上記CSSでは、プロフィール画像の高さは指定した横幅に合わせて自動決定されるようになっていますが、ご自分で指定したい場合には、緑文字autoの部分に設定することができます。

なお、使用しているデザインやレイアウトによっては、プロフィール画像サイズを変更すると、ニックネーム等の位置が不自然になる場合がありますので、ご注意ください。

例として、新デザインの幅広の方のサイドバーのプロフィール画像を、サイドバーいっぱいに大きく表示した場合に、ニックネームなどが左の方に窮屈な感じに寄ってしまうのを、中央寄せで表示するようにするCSSをご紹介しておきます。

.skinSubA .profileUserNicknameArea {
  padding: 10px 0;
  text-align: center;
  width: 260px;
}

以上、サイドバーのプロフィール画像の表示サイズを変更する方法をご紹介しました。

よかったらお試しください。

関連記事

アメブロカスタマイズ用デザイン『CSS編集用デザイン』
CSSの編集によるカスタマイズ

アメブロカスタマイズで人の集まるブログ作り