pgkuroneru’s MEMO

プログラミングと趣味について綴るブログ

サイドバーのプロフィールウィジェットをオリジナルのものにしてみた

はてなブログのデフォルトのプロフィールウィジェットを利用していたのですが、ちょっと素っ気無いかな・・・と思ったので、思い切って一から組んでみました。

きっかけ

今回のプロフィールウィジェットを作ったきっかけは、とある学習コンテンツを見て、ふと思いついたからです。

codeprep.jp

「HTMLとCSSで作るWeb名刺」ということで、もしやこんな感じでサイドバーに貼り付ければ良いの感じになるのでは?という発想からでした。

今はサイドバーだけですが、記事下にも設置できたらとも思っていたり・・・。

実際に書いたコード

思いつきでガンガン書いていたら、かなり乱雑なコードになってしまいました・・・。一旦どこかで切り直したい・・・。

完成イメージ

f:id:pgkuroneru:20171113233950p:plain:w300
自作プロフィールウィジェット

HTML

<div class="profile-card">
  <div class="profile">
    <div class="avatar">
      <img src="https://cdn-ak2.f.st-hatena.com/images/fotolife/p/pgkuroneru/20171014/20171014165345.png">
    </div>
    <div class="description">
      <p class="name">名前</p>
      <p>プロフィール文</p>
    </div>
  </div>
  <div class="sns-link">
    <ul>
      <li class="hatena"><a href="http://blog.hatena.ne.jp/(ユーザーID)/(ブログURL)/subscribe" target="_blank"><i class="fa fa-fw fa-white fa-pencil-square-o" aria-hidden="true"></i>読者登録</a></li>
      <li class="rss"><a href="#"><i class="fa fa-fw fa-white fa-feed" aria-hidden="true"></i>RSS</a></li>
      <li class="github"><a href="#"><i class="fa fa-fw fa-white fa-github" aria-hidden="true"></i>GitHub</a></li>
      <li class="twitter"><a href="#"><i class="fa fa-fw fa-white fa-twitter" aria-hidden="true"></i>Twitter</a></li>
    </ul>
  </div>
</div>

CSS

.profile-card {
  background-color: #f5f5f5;
  border: 1px solid lightgray;
  margin-bottom: 10px;
  padding: 10px;
}

.profile-card ul {
  padding: 0;
}

.profile {
  background-color: white;
  padding: 10px;
  margin-bottom: 10px;
}

.profile .name {
  font-size: 1.5em;
  text-align: center;
}

.profile .regist iframe {
  display: block;
  margin: auto 0;
}

.avatar img {
  border-radius: 10%;
  display: block;
  margin: auto;
  width: 50%;
}

.sns-link {
  border-top: 1px solid lightgray;
  font-size: 1.05em;
  text-align: center;
  width: 100%;
}

.sns-link a {
  color: white;
  display: block;
  padding: 10px;
  text-decoration: none;
}

.sns-link ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 10px 0 0 0;
}

.sns-link li {
  width: 45%;
  border: 1px solid lightgray;
  list-style: none;
  transition: 0.3s;
  margin: 5px;
}

.sns-link li:hover {
  transform: scale(1.1);
}

.sns-link .hatena {
  background-color: #696969;
}

.sns-link .rss {
  background-color: #ff8c00;
}

.sns-link .github {
  background-color: black;
}

.sns-link .twitter {
  background-color: #00aced;
}