【イモっぽいデザインから脱却したい!】プロフィールのデザインを SNS 風にする【ラスト】

【イモっぽいデザインから脱却したい!】ということで進めてますが、今回で一度デザイン改修を終了としたいと思います。今回、改修したところは、サイドバーのプロフィールイメージです。以前からこの部分に手を加えたかったのですが、まだ時期尚早だろうということで後回しにしてました。(おいしいところは最後に的な!)この部分を派手にすることでブログのイメージを大きく変えることができるポテンシャルを秘めていると思います。

SNS 風にしてみた

今回デザインを改修した部分は、サイドバーのプロフィールです。アバターイメージの背景にさらにイメージを表示させる感じにしてみました。

このほうがリッチな感じで、ブログのデザインを賑やかにすることができますよね。コードは実現したかったものにはできなかったのですが、備忘録として掲載しておきます。

ちなみにアバターは WordPress 推奨?の「Gravatar」というサービスで登録しているものを表示させています。気になる方は関連記事をご覧ください。

HTML コードはこちら

<div id="profile-sidebar-3" class="widget_profile-sidebar sidebar-wrapper">
 <div class="profile-sidebar">
  <div class="profile-sidebar__header">
   <figure class="profile-sidebar__avatar-wrapper">
    <img class="avatar-img" src="アバターのURL">
   </figure>
  </div><!--/.profile-sidebar__header-->
  <div class="profile-sidebar__body">
   <h4 class="profile-sidebar__name">ユーザー名</h4>
   <p class="profile-sidebar__description">プロフィール説明</p>
   <div class="sns-btns--center">
    <a href="SNSのURL" class="btn-sns btn-sns-twitter" target="_blank"></a>
   </div><!--/.sns-btns--center-->
  </div><!--/.profile-sidebar__body-->
 </div><!--/.profile-sidebar-->
</div><!--/.content__sidebar-->

今回はアバターイメージを囲ってるdivbackground-imageを設定することで、希望のデザインを実現しました。

CSS コードはこちら

.profile-sidebar{
  overflow:hidden;
  padding-bottom:3rem;
  border-radius: 8px 8px 8px 8px;
  background-color:#fff;
}
.profile-sidebar__header{
  width:100%;
  padding-top:calc(300px / 1.91 - 300px * 0.2);
  background-image:url("背景画像のURL");
  background-size:cover;
  background-position:center bottom calc(300px * 0.2);
  background-repeat:no-repeat;
}
.profile-sidebar__profile-header-wrapper{
  width:100%;
}
.profile-header-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.profile-sidebar__avatar-wrapper{
  width:40%;
  margin:auto;
}
.profile-sidebar__name{
  display:inline-block;
  width:100%;
  margin-top:2rem;
  text-align:center;
  font-weight:normal;
  font-size:1em;
}

いろいろなやり方があると思いますが、今回私は、background-positionで背景の底辺をアバターの中心に合わせるというやり方でやってみました。

calc( )を使って何やらごちゃごちゃ計算してますが……。レスポンシブに対応させるための(失敗したのですが……)成れの果てです。

レスポンシブを考えずに、わかりやすくするならこんな感じでしょうか。

.profile-sidebar__header{
  width:100%;
  padding-top:100px;
  background-image:url("背景画像のURL");
  background-size:cover;
  background-position:center bottom 60px;
  background-repeat:no-repeat;
}
.profile-sidebar__avatar-wrapper{
  width:120px;
  margin:auto;
}

特に難しいことをやっているわけではないですね。ただbackground-positionでアバターの高さの半分をbottomに設定してあげただけです。

それをレスポンスだなんだとごにょごにょやってたら汚いコードになってしまいました。しかも失敗に終わるという、、、。

本当はやりたかったけど、できなかったこと

『背景イメージの表示の比率を 16 : 9 にしたかった』ということと

『背景イメージの底辺をアバターの中心に合わせたかった』ということ、

かつ
『レスポンシブに対応させたかった』のですが、、

これは私には無理でした……。

特に『アバターの下の要素との幅を維持したい』という思惑が、現状の私のスキルではクリアすることができず……といった感じです。

レスポンシブに対応させなければこんなごちゃごちゃなコードではなく整理すればいいのにと思われるかもしれませんが、またそのうち挑戦したいと思い、その成れの果てという感じです。。。

最終的なトップページの
ビフォーアフター

過去含めて9記事に渡り、デザイン改修をしてきたわけなのですが、最終的なビフォーアフターはこんな感じになりました。

まだまだ改善の余地はありますが、だいぶマシになったような気がします!ここに広告だなんだと掲載できるようになったらさらに“それっぽく”なるような感じはしてきます!

今回の改修はいったん終了しますが、これからも少しずつブログのデザインに手を加えながら見やすいブログを目指していけたらと思います。

また、ブログを改修しながら新たに学んだことなどは別途記事にしていけたらと思います。

トップへ戻る