アメブロ旧CSS：サイドバーのプロフィール画像を大きく表示するカスタマイズ方法

アメブロの旧CSS編集用デザインで、幅広の方のサイドバーにあるプロフィール画像をもっと大きなサイズに拡大するカスタマイズ方法をご紹介します。

新CSS編集用デザイン向けはこちら

アメブロの新CSS編集用デザインで、サイドバーのプロフィール欄に表示されるサイズの小さいプロフィール画像を、もっと大きなサイズに拡大（変更）して表示するカスタマイズ方法について解説します。

初期状態の画像では小さすぎるという声をよく聞きますので、そんなときはこの方法をお試し下さい。

なお、カスタマイズはCSSの編集で行いますので、やり方がわからない場合は事前に確認しておいて下さい。

CSSを編集する手順：カスタマイズで必須の基本操作です！

CSS編集用デザインをベースにアメブロをカスタマイズするためにCSSを編集するときの手順について解説します。アメブロのカスタマイズ時には必須で頻繁に行う作業ですのでマスターしておくことをお勧めします。

1 CSSにコードを追加する
2 保存して確認
3 まとめ

CSSにコードを追加する

では、CSSの末尾に以下のようなコードを追加して下さい。

/************************************************
  旧CSS：サイドバーのプロフィール画像を大きく表示
************************************************/
.skinSubA .userProfileImage, .skinSubA .userProfileImage img {
  width: 100%;
  height: auto;
}
.skinSubA .userProfileImageArea {
  float: none;
  width: 260px;
  height: auto;
  margin-bottom: 4px;
}
.skinSubA .profileUserNicknameArea {
  float: none;
  width: auto;
  text-align: center;
}

もし、プロフィール欄をシンプルにする方法と併用している場合は、フォローボタンがプロフィール画像内の中途半端な位置に移動してしまいます。

それを解消するためには、以下のコードを併用して、ユーザー名の下の中央に移動すると良いと思います。

/* フォローボタンの位置を調整 */
.skinSubA .profileBtnArea li:first-of-type {
  position: static;
  margin-left: 50%;
  transform: translatex(-50%);
}

保存して確認

CSSにコードを追加できたら、保存して表示を確認して下さい。

サイドバーのプロフィール画像が、無事に大きく表示されていれば成功です。

まとめ

以上、アメブロの旧CSS編集用デザインで、幅広の方のサイドバーにあるプロフィール欄に表示される小さなサイズのプロフィール画像を、もっと大きなサイズで表示するカスタマイズ方法をご紹介しました。

CSSにコードをコピペするだけで簡単にできますので、よかったら参考にして下さい。