ブログのソーシャルパーツをAMPページのデザインで設置する

以前ソーシャルパーツを外してみるという試みを始めていた．

結果としてはやはりあまり共有されなくなったという印象だった．

かといって元のパーツをそのまま表示するのは幅が合っていないとか読み込みが重いとか押すにはサイズが微妙に小さいとかの問題がありあまり気が乗らなかった．

そんなとき，AMPページを見ると「Twitter」「Facebook」「はてなブックマーク」の3つが均等に表示されていることに気がついた．

f:id:cohalz:20180926020609p:plain — AMPページの表示

せっかくなのでこのAMP用のCSSをそのままPCやスマホに組み込むことにした．

HTML

<div class="entry-footer-module section">
  <ul class="social-share-units">
    <li class="socialarea-twitter">
      <a href="https://twitter.com/share?text={Title} - {BlogTitle}&amp;url={Permalink}" class="social-share-btn btn-tw">
        <span class="social-share-icon">
          <amp-img src="https://cdn.blog.st-hatena.com/images/touch/amp/share-twitter.png?version=eeebf479b64036c9d2599c80d60ec843e39be2aa&amp;env=production" width="13" height="13" class="social-share-icon-img i-amphtml-element i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-layout" style="width: 13px; height: 13px;">
        <img decoding="async" src="https://cdn.blog.st-hatena.com/images/touch/amp/share-twitter.png?version=eeebf479b64036c9d2599c80d60ec843e39be2aa&amp;env=production" class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img></span>
        ツイート
      </a>
    </li>
    <li class="socialarea-bookmark">
      <a href="http://b.hatena.ne.jp/entry/{Permalink}" class="social-share-btn btn-b">
        <span class="social-share-icon">
          <amp-img src="https://cdn.blog.st-hatena.com/images/touch/amp/share-bookmark.png?version=e1ff2c74915f555aa4719ffce8433fa2d31e0356&amp;env=production" width="13" height="13" class="social-share-icon-img i-amphtml-element i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-layout" style="width: 13px; height: 13px;">
        <img decoding="async" src="https://cdn.blog.st-hatena.com/images/touch/amp/share-bookmark.png?version=e1ff2c74915f555aa4719ffce8433fa2d31e0356&amp;env=production" class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img></span>
        ブックマーク
      </a>
    </li>
    <li class="socialarea-facebook">
      <a href="http://www.facebook.com/sharer.php?u={Permalink}" class="social-share-btn btn-fb">
        <span class="social-share-icon">
          <amp-img src="https://cdn.blog.st-hatena.com/images/touch/amp/share-facebook.png?version=e39d2b41adfee1a9239910a17ab9f153c535fcab&amp;env=production" width="13" height="13" class="social-share-icon-img i-amphtml-element i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-layout" style="width: 13px; height: 13px;">
        <img decoding="async" src="https://cdn.blog.st-hatena.com/images/touch/amp/share-facebook.png?version=e39d2b41adfee1a9239910a17ab9f153c535fcab&amp;env=production" class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img></span>
        シェア
      </a>
    </li>
    <li class="socialarea-subscribe">
      <a href="http://blog.hatena.ne.jp/cohalz/core.cohalz.co/subscribe" class="social-share-btn btn-s">
          <i class="blogicon-hatenablog lg"></i>
         読者になる
      </a>
    </li>
  </ul>
</div>

CSS

.i-amphtml-blur,.i-amphtml-fill-content{
display:block;height:0;
max-height:100%;
max-width:100%;
min-height:100%;
min-width:100%;
width:0;margin:auto;
}

.social-share-units{
margin:0 auto;
padding:0;
width:100%;
display:table;
text-align:center;
table-layout:fixed;
}

.social-share-units>li{
display:table-cell;
padding:0 8px 0 0
}

.social-share-units>li:last-child{
padding-right:0
}

.social-share-btn{
padding:.8em .2em;border-radius:.3em;
text-align:center;
font-size:75%;
line-height:1.4em;
vertical-align:middle;
background-color:#f7f8f9;
display:block;background-position:50%;
background-repeat:no-repeat;
background-size:20px 20px;color:#fff;
font-weight:700;
}

.social-share-btn .social-share-icon{
width:13px;height:13px;
display:inline-block
}

.social-share-btn .social-share-icon-img{
vertical-align:middle
}

.btn-tw{
background-color:#55acee
}
a.social-share-btn.btn-tw{
color:#ffffff
}

.btn-fb{
background-color:#3b5998
}

a.social-share-btn.btn-fb{
color:#ffffff
}

.btn-b{
background-color:#008fde
}

a.social-share-btn.btn-b{
color:#ffffff
}

.btn-s{
background-color:#666
}

a.social-share-btn.btn-s{
color:#ffffff
}

f:id:cohalz:20180926020213p:plain

表示はこんな感じ．ついでにブログの読者登録ボタンも作成してみた．

数が増えてもしっかり均等に表示してくれる．