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

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

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

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

初期状態の直径120ピクセルの円形に切り抜かれた画像では小さすぎるという人向けのカスタマイズ方法です。

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

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

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

厳密には「大きく表示」ではなく、アメブロのプロフィール写真としてアップロードした画像とは「別の画像をプロフィールの位置に表示」する方法です。

写真の男性はサンプルとして用意したもので、こちらのサイトでダウンロードしたフリー素材です。

記事冒頭の画像はこちらのプロフィール欄をシンプルにする方法も使っています。

1 プロフィール画像として表示する画像を準備する
2 CSSにコードを追加する
3 追加したコードを修正
4 保存して確認
5 画像の中央を枠内いっぱいに表示する
6 注意事項
7 まとめ

プロフィール画像として表示する画像を準備する

まず、プロフィール画像として表示したい画像を準備します。

画像の大きさは自由ですが、小さすぎると意味がありませんし、大きすぎると通信データ量が無駄に大きくなってしまいます。

新CSS編集用デザインは、広い方のサイドバーの幅が300ピクセル（2カラムの場合はこちら）、狭い方が200ピクセルですので、これを目安に調整すると良いと思います。

新CSS編集用デザインのヘッダーやカラムのレイアウトとサイズ

アメブロの新CSS編集用デザインをカスタマイズする際に参考になる、初期状態でのヘッダーの幅や、2カラム・3カラム各々の場合のメ記事領域やサイドバーの幅など、重要な部分のレイアウトとサイズについて説明します。

画像を準備できたらアメブロにアップロードして画像のURLを取得しておいて下さい。

カスタマイズに使う画像のアップロード方法と画像のURLの取得方法

アメブロで画像を使ったカスタマイズをする場合に必要な、カスタマイズで使用する画像をアメブロにアップロードする方法と、アップロードした画像をCSSなどから呼び出すために必要な画像のURLを取得する方法について解説します。

CSSにコードを追加する

画像の準備ができたら、CSSの末尾に以下のようなコードを追加して下さい。

/************************************************
  新CSS：プロフィール画像を好みの画像・サイズで表示
************************************************/
/* 元のプロフィール画像を隠す*/
.skin-profileAvatar img {
  display: none;
}
/* プロフィール画像の位置に任意の画像を表示 */
.skin-profileAvatar a {
  display: block;
  background: no-repeat center transparent;
  background-size: contain;
  background-image: url(画像のURL);
  height: 400px; /* 表示サイズ(高さ) */
}

追加したコードを修正

CSSにコードを追加したら、プロフィール画像を表示できるように、追加したコードを修正します。

コード中の「画像のURL」の位置に、プロフィール画像として表示するためにアメブロにアップロードした画像のURLを入力て下さい。

「表示サイズ(高さ)」には（仮に400pxを設定してありますが）プロフィール画像を表示する高さを設定します。

プロフィール欄を表示するサイドバーと使用する写真の形による目安を書いておくと、

幅の広い方のサイドバーの場合: 縦長→400px～450px; 正方形→300px; 横長→200px～225px
幅の狭い方のサイドバーの場合: 縦長→266px～300px; 正方形→200px; 横長→133px～155px

といったところだと思います。

なお、プロフィール画像の幅は、（サイドバーの幅を最大値として）「表示サイズ(高さ)」に設定した値と画像の縦横比によって自動的に決まります。

保存して確認

CSSの編集ができたら、保存して表示確認して下さい。

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

画像の中央を枠内いっぱいに表示する

用意した画像の大きさに関わらず、枠内の上下左右いっぱいにプロフィール画像を表示したい場合は、以下のコードもCSSに追加してみて下さい。

/* プロフィール画像の中央を枠内いっぱいに表示する */
.skin-profileAvatar a {
  background-size: cover;
}

この場合、もし画像が外枠の大きさや形に合っていなければ、以下の画像のように画像の中央部が拡大・縮小されて枠内いっぱいに表示されます。

この画像のプロフィール写真は記事冒頭と同じものですが、上下が切り取られた正方形で表示されています。

注意事項

ここで紹介したカスタマイズ方法でブログに表示されるプロフィール画像を変更しても、アメーバのシステムに設定したプロフィール画像は自動的には変更されません。

プロフィールページやフォロワーのチェックリストなどに表示されるプロフィール画像も変更したい場合は、アメーバのプロフィール編集ページでプロフィール画像を変更して下さい。

まとめ

以上、アメブロの新CSS編集用デザインのサイドバーのプロフィール画像に、好みの画像を、好みのサイズで表示できるカスタマイズ方法をご紹介しました。

これだけでもずいぶん印象が変わると思いますので、よかったら参考にして下さい。