ヘッダにプロフィール画像を追加するCSS

目的

muragonのカスタマイズ。

ヘッダにカスタムタグを用いプロフィール画像を追加する。表示されるプロフィール画像サイズは128×128px。
サイドバーにプロフィールの追加は不要。

CSS

#blog-header-inner img {
margin-top : プロフィール画像位置;
border-radius : 50%;
border : 5px solid #fff;
}

#blog-header-inner {
display : flex;
flex-direction : column;
justify-content : center;
align-items : center;
padding : 0 10px;
background-position : top center;
background-repeat : no-repeat;
background-color : #fff;
}
プロフィール画像位置(px)=背景画像の高さ-69
プロフィール画像高さ128/2+border幅5=69

HTML

<div id="blog-header-inner" class="blog-header-inner">の下に追加。

<img src={profileImageUrl}>