目次

【アメブロカスタマイズ】サイドバーのプロフィール画像を大きいサイズに変更する方法

「新CSS編集用デザイン」向けです

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

新CSS編集用デザインの初期状態では、サイドバーのプロフィール画像が120ピクセルの大きさで円形に切り抜かれた状態で表示されます。

この120ピクセルというサイズは、新CSS編集用デザインのサイドバーに表示するにしてはずいぶん小さいので、プロフィール画像周りがスカスカでみっともないと感じてしまう方も多いのではないでしょうか。

そこで、当記事では、このサイドバーのプロフィール画像を、もっと大きく、お好みのサイズで表示できるカスタマイズ方法をご紹介します。

サイドバーのプロフィール画像を大きいサイズで表示する

それでは、以下、手順を説明していきます。

プロフィール画像として表示する画像をアメブロにアップロードしてURLを取得する

まず、プロフィール画像として表示したい画像をアメブロにアップロードして、アップロードした画像のURLを取得しましょう。

アメブロのカスタマイズに使う画像のアップロード方法と画像のURLの取得方法
アメブロのカスタマイズに利用する画像はアメブロにアップロードして使いますが、そのアップロード方法と、アップロードした画像をCSS等から呼び出すのに必要なの画像のURLの取得方法についてまとめます。

取得した画像のURLはあとで使いますので、メモ帳などに貼り付けておいて下さい。

なお、当記事のカスタマイズ方法では、アメーバのシステムにプロフィール画像として設定した画像ではなく別のお好みの画像をプロフィール画像として表示します(もちろん同じでもいいですが)。

画像の大きさは自由ですが、新CSS編集用デザインのサイドバーの横幅が、広い方は300px(2カラムの場合はこちら)、狭い方は200pxですので、これを目安に調整してアップロードされることをお勧めします。

CSSを編集してアップロードしたプロフィール画像を表示する

画像をアップロードしてその画像のURLを取得できたら、そのURLを使ってサイドバーのプロフィール欄にプロフィール画像として表示します。

カスタマイズは、CSSを編集する方法ですので、もしCSSの編集の仕方がわからない場合は先にマスターしておいて下さい。

CSSを編集してアメブロをカスタマイズをする手順
アメブロをカスタマイズするための専用のデザイン「CSS編集用デザイン」に用意されている「ブログデザインCSS」を編集してアメブロをカスタマイズする手順について説明します。

では、CSSに追加する実際のコード例を一つご紹介します。

/* プロフィール画像を好みの画像、好みのサイズで表示する */
.skin-profileAvatar img {
  display: none;
}
.skin-profileAvatar a {
  display: block;
  margin: auto;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px dotted #dddddd;
  background: no-repeat center transparent;
  background-size: contain;
  background-image: url(【プロフィール画像にする画像のURL】);
  width: 300px; /* 表示サイズ(横幅) */
  height: 300px; /* 表示サイズ(高さ) */
}

これを使って以下の手順でカスタマイズしてみて下さい。

  1. 上記コード全体をコピー
  2. CSSの編集画面でCSSの末尾に貼り付ける
  3. 「【プロフィール画像にする画像のURL】」の部分を、アップロードしてある画像のURLに変更する
  4. コード中の注釈コメントを参考に、表示サイズ(横幅・高さ)を設定する
  5. 表示を確認する(プレビュー)
  6. 編集内容を保存する
  7. ブログを開いて確認する

これで、設定した画像をプロフィール画像として好みのサイズで表示できると思います。

もし、ブログを開いてもプロフィール画像が表示されない場合、または変更されていない場合は、「Ctrl+F5」や「Command+R」でページを再読み込みしてみて下さい。

それでも表示されない場合は、どこか間違っている可能性が高いので[こちらの記事](/ameblo/css-not-applied.html}などを参考に、再度チェックしてみて下さい。

なお、アップロードした画像の縦横比が上記手順で設定した表示サイズの縦横比と合っていない場合は、次の画像のように長辺が設定サイズに合うように自動的に縮小されます。

画像の中央部を拡大表示する

また、次の画像のように中央部分を切り取って表示サイズいっぱいに表示したい場合もあるかと思います。

その場合は、以下のコードもCSSに追加することで実現できます。

/* プロフィール画像をトリミングして枠いっぱいに表示する */
.skin-profileAvatar a {
  background-size: cover;
}

画像を丸く切り抜いて表示する

あと、意味があるのかどうかはわかりませんが、丸くくり抜いて表示したいという場合も大丈夫です。

以下のコードも追加すれば、丸くくり抜かれます。

/* プロフィール画像を丸く切り取る */
.skin-profileAvatar a {
  border-radius: 50%;
}

注意事項

当記事のカスタマイズ方法で好みの画像をプロフィール画像として表示するようにしても、アメーバのシステムに設定したプロフィール画像は変更されません。

例えばフォロワーのチェックリストなどには、アメーバに設定してあるプロフィール画像の方が表示されますので、サイドバーのプロフィール欄に別の画像を表示するようにした場合はご注意下さい。

まとめ

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

ここを変えるだけでも、ブログの印象がずいぶん変わることがありますので、もしよかったら試してみて下さい。

(準備中)
(準備中)