サイドバーのプロフィールの私、写り悪くない？
どれどれ・・・
・・・確かに写り悪いです。めっちゃぼやけてますね。
はてなブログではプロフィール画像を設置できますが、はてなデフォルトの設定のままではこのように画像がぼやけてしまうことがあります。
せっかくイラストレーターさんに綺麗なイラストを描いてもらったのに、このままでは台無しなのでちゃんと映えるプロフィール画像に修正していきたいと思います。
【ステップ１】はてなフォトライフに画像をアップロードする
まず、はてなフォトライフに画像をアップロードします。
次に、「リンク」からHTMLタグを取得
メモ帳などにペーストしてimgタグのみを抜き出し、タグ内にclass="profile-photo"を追記します。
【ステップ２】サイドバーのモジュールを編集
「ダッシュボード」👉「デザイン」👉「カスタマイズ（スパナ）」👉「サイドバー」👉「プロフィール」
「プロフィール画像」の"表示する"のチェックを外し、自己紹介の欄に先ほど編集したimgタグを貼り付けます。
すると、このように画像が表示されます。
このままだとサイズが大きいので、CSSで編集していきます。
【ステップ３】デザインCSSを編集
「ダッシュボード」👉「デザイン」👉「カスタマイズ」👉「デザインCSS」
ここに、以下のコードを貼り付けてください
.profile-photo{ width:64px; height:fit-content; border-radius:12px; }これで、ぼやけていた画像がはっきりしました！
サイズはデフォルトに合わせています。
見やすい！
widthの値を変えることで画像の大きさを調節できます。border-radiusで角の丸みを調節します。border-radius:100%;で円形にできます。
まとめ
たったこれだけの作業で、
ぼやぼやして残念な感じだったプロフ画像が・・・
ぼやけが解消されて見違えるように良くなりました。
ついでにちょっとサイズを大きくして、円形にしてみたら一気におしゃれに！
５分くらいでできるので、プロフ画像のぼやけが気になる方はぜひ試してみてください！
