アメブロのサイドバーのプロフィール画像を好みのサイズで表示するカスタマイズ方法

アメブロの新タイプCSS編集用デザインで、サイドバーのプロフィール画像を好みのサイズで表示するカスタマイズ方法です。

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

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

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

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

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

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

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

実は、当カスタマイズでは、アメーバにプロフィール画像として設定した画像ではなく、別の(もちろん同じでもいいですが)お好みの画像をプロフィール画像として表示します(下記「ご注意」の項参照)

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

もし、画像のアップロードと画像のURLの取得方法についてわからない場合はこちらの記事を参考にしてください。

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

CSSを編集してプロフィール画像を好みのサイズで表示する

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

カスタマイズは、ブログデザインCSSの編集で行いますので、もし、CSSの編集の仕方がわからない場合は先にチェックしておいて下さい。

それでは、以下に、実際のコード例を一つご紹介しますので、これを使用してカスタマイズしてみましょう。

手順

手順は、次のようになります。

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

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

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

それでも表示されない場合は、どこか間違っていると思われますので、再チェックしてみて下さい。

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

ですが、こうではなく、次の画像のように中央部分を切り取って、表示サイズで設定した縦横比で表示したい場合もあるかと思います。

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

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

以下のコードも追加して下さい。

ご注意

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

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

また、画像のない記事をFacebookでシェアした時などは、アメーバにプロフィール画像として設定してある方の画像が表示されますので、こちらもご承知おき下さい。

まとめ

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

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

よろしければフォローお願いします

コメントを残す

メールアドレスが公開されることはありません。

ご覧いただきありがとうございます。どうぞお気軽にコメント下さい。ただし、コメントでのご質問の方は、記事内容に関することだけに限定させていただきます。ご了承下さい。