【WordPress】TwitterなどのSNSシェアボタンの設置方法（オリジナル編）

<div class="share">
  <ul>
    <li class="twitter">
      <a href="https://twitter.com/intent/tweet?url=https://125naroom.com/web/3327&text=【WordPress】TwitterなどのSNSシェアボタンの設置方法（オリジナル編）%20%40125naroom%20%23125naroom" target="_blank" rel="nofollow">
        <i class="fab fa-twitter"></i><span>tweet</span>
      </a>
    </li>
    <li class="facebook">
      <a href="https://www.facebook.com/sharer.php?u=https://125naroom.com/web/3327&t=【WordPress】TwitterなどのSNSシェアボタンの設置方法（オリジナル編）" target="_blank" rel="nofollow">
        <i class="fab fa-facebook"></i><span>facebook</span>
      </a>
    </li>
    <li class="pinterest">
      <a href="https://pinterest.com/pin/create/button/?url=https://125naroom.com/web/3257&media=https://125naroom.com/wp/wp-content/uploads/2019/11/web_w_006.png&description=【WordPress】TwitterなどのSNSシェアボタンの設置方法（オリジナル編）" target="_blank" rel="nofollow">
        <i class="fab fa-pinterest-square"></i><span>Pinterest</span>
      </a>
    </li>
    <li class="hatena">
      <a href="https://b.hatena.ne.jp/add?mode=confirm&url=https://125naroom.com/web/3327" target="_blank" rel="nofollow">
        <i class="fab fa-hatena"></i><span>はてな</span>
      </a>
    </li>
    <li class="pocket">
      <a href="https://getpocket.com/edit?url=https://125naroom.com/web/3327" target="_blank" rel="nofollow">
        <i class="fab fa-get-pocket"></i><span>Pocket</span>
      </a>
    </li>
    <li class="feedly">
      <a href="https:/feedly.com/i/subscription/feed/https://125naroom.com/feed" target="_blank" rel="nofollow">
        <i class="fas fa-rss"></i><span>Feedly</span>
      </a>
    </li>
  </ul>
</div>

.share {
  margin: 50px 0;
}
.share ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.share ul li {
  width: 15.666%;
  margin: 0 1.2% 0 0;
}
.share ul li:last-child {
  margin: 0;
}
.share ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 16px;
  height: 45px;
  border: none;
  text-decoration: none;
  transition-property: all;
  transition-duration: 0.3s;
}
.share ul li a:hover {
  font-size: 24px;
}
.share ul li a i {
  font-style: normal;
}
.share ul li.twitter a {
  background-color: #55acee;
}
.share ul li.facebook a {
  background-color: #35629a;
}
.share ul li.pinterest a {
  background-color: #d4121c;
}
.share ul li.feedly a {
  background-color: #2bb24c;
}
.share ul li.pocket a {
  background-color: #ee4056;
}
.share ul li.hatena a {
  background-color: #2c6ebd;
}
.share ul li.hatena a .fa-hatena:before {
  content: 'B!';
  font-weight: bold;
}
.share ul li a span {
  display: none;
}