SNSシェアボタンをカスタマイズ - 忘れるための備忘録

デフォルトままでも良かったんだけど、CSS触るの楽しいので記事ページに表示されるSNSシェアボタンの表示をカスタマイズしました。

参考サイト
HTMLの変更
- アイコンをにしたい場合
CSSの変更

参考サイト

こちらの「左にアイコンを配置したシェアボタンその2」を参考にさせて頂きました。
LINE用のボタンを追加するためにちょっと変更して使わせてもらっています（感謝）。
基本的な設定説明はこちらのサイトを見るのが確実だと思うので、変更した箇所だけ備忘録。

HTMLの変更

LINEのボタンを追加しています。
LINEのアイコンはではなくにしました。
だとサイズ的に潰れてしまって見栄えが良くなかったので。

<!-- ここからシェアボタン -->
<div class="share-btn-type6">
    <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加" class="share-btn__item share-btn__item--hatebu" target="_blank"> 
        <span class="share-btn__icon"><i class="blogicon-bookmark lg"></i></span>
        <span class="share-btn__small-text">hatena</span>
    </a>

    <a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="share-btn__item share-btn__item--facebook" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" target="_blank">
        <span class="share-btn__icon"><i class="blogicon-facebook lg"></i></span>
        <span class="share-btn__small-text">facebook</span>
    </a>

    <a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="share-btn__item share-btn__item--twitter" target="_blank">
        <span class="share-btn__icon"><i class="blogicon-twitter lg"></i></span>
        <span class="share-btn__small-text">Twitter</span>
    </a>

    <!-- LINE用を追加しました -->
    <a href="https://line.me/R/msg/text/?{Title} {URLEncodedPermalink}" class="share-btn__item share-btn__item--line" target="_blank">
        <span class="share-btn__icon"><i class="fas fa-comment"></i></span>
        <span class="share-btn__small-text">LINE</span>
    </a>

    <a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="share-btn__item share-btn__item--pocket" target="_blank">
        <span class="share-btn__icon"><i class="fab fa-get-pocket"></i></span>
        <span class="share-btn__small-text">Pocket</span>
    </a>
</div>
<!-- シェアボタンここまで -->

アイコンをにしたい場合

<i class="fas fa-comment"></i>

の部分を

<i class="fab fa-line"></i>

にします。

CSSの変更

こちらもLINEボタン分の設定を追加。
追加してボタン数が増えた分、1つ1つのボタンの大きさを小さくして横一列に収まる調整もしています。

.share-btn-type6 {
  margin: 1.2em 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.share-btn-type6 .share-btn__item {
  display: flex;
  width: 49%;
  height: 36px;
  margin-bottom: 8px;
  line-height: 36px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  color: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: all .3s;
}

.share-btn-type6 .share-btn__item:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}

.share-btn-type6 .share-btn__item--hatebu {
  background-color: #36b8e6;
}

.share-btn-type6 .share-btn__item--facebook {
  background-color: #378af3;
}

.share-btn-type6 .share-btn__item--twitter {
  background-color: #3cb0f7;
}

/* LINE用を追加しました */
.share-btn-type6 .share-btn__item--line {
  background-color: #06c755;
}

.share-btn-type6 .share-btn__item--pocket {
  background-color: #f75e6f;
}

.share-btn-type6 .share-btn__icon {
  width: 30%;
}

.share-btn-type6 .share-btn__item--hatebu .share-btn__icon{
  background-color: #00A4DE;
}

.share-btn-type6 .share-btn__item--facebook .share-btn__icon{
  background-color: #1778F2;
}

.share-btn-type6 .share-btn__item--twitter .share-btn__icon{
  background-color: #1BA1F3;
}

/* LINE用を追加しました */
.share-btn-type6 .share-btn__item--line .share-btn__icon{
  background-color: #00B900;
}

.share-btn-type6 .share-btn__item--pocket .share-btn__icon{
  background-color: #EF4155;
}

.share-btn-type6 .share-btn__small-text {
  width: calc(100% - 42px);
  padding-left: 12px;
  box-sizing: border-box;
  letter-spacing: .04em;
  text-align: left;
  font-size: 12px;
}

@media (min-width: 768px){
  .share-btn-type6 .share-btn__item {
    width: 19%;
  }
}

どんな感じに仕上がるのかは実際にこのページの↓の表示を見てみてね。

参考サイト

HTMLの変更

アイコンを にしたい場合

CSSの変更

アイコンをにしたい場合