<!-- 個別記事ページ -->
<b:includable id='single-post'>
  <div class="post-area">

    <!-- 個別記事を表示させる処理（前回の記事を参照） -->

    <!-- SNSボタン -->
    <b:include name='sns' />
  </div>
</b:includable>

<!-- SNSボタン -->
<b:includable id='sns'>
  <div class="share-area">
    <ul>
      <!-- Facebook -->
      <li class="facebook">
        <a expr:href='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:post.url'
          expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;'
          expr:title='data:top.shareToFacebookMsg' rel='nofollow' target='_blank'><i class="fab fa-facebook-f"></i></a>
      </li>
      <!-- Twitter -->
      <li class="twitter">
        <a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' expr:title='data:top.shareToTwitterMsg'
          rel='nofollow' target='_blank'><i class="fab fa-twitter"></i></a>
      </li>
      <!-- はてな -->
      <li class="hatena">
        <a expr:href='&quot;https://b.hatena.ne.jp/add?mode=confirm&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'
          rel='nofollow' target='_blank' title='Hatena で共有する'>B!</a>
      </li>
      <!-- Pocket -->
      <li class="pocket">
        <a expr:href='&quot;https://getpocket.com/edit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'
          rel='nofollow' target='blank' title='Pocket で共有する'><i class="fab fa-get-pocket"></i></a>
      </li>
      <!-- LINE -->
      <li class="line">
        <a expr:href="&quot;http://line.me/R/msg/text/?&quot; + data:post.url" rel='nofollow' target='_blank'
          title='LINE で共有する'><i class="fa fa-comment"></i></a>
      </li>
    </ul>
  </div>
</b:includable>

/* SNSボタン
---------------------------------------------------------------------------- */

.share-area {
  padding-top: 20px;
  margin: 0 25px;
}

.share-area ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.share-area li {
  height: 50px;
  line-height: 50px;
  width: 100%;
  text-align: center;
}

.share-area a {
  display: block;
  text-decoration: none;
  font-size: 20px;
  color: white;
}

.share-area ul li {
  margin-left: 0;
}

.share-area ul li a:hover {
  opacity: 0.6;
}

.facebook a {
  background-color: #35629a;
}

.twitter a {
  background-color: #55acee;
}

.hatena a {
  font-family: Verdana;
  font-weight: bold;
  background: #2c6ebd;
}

.pocket a {
  background: #ee4056;
}

.line a {
  background: #00B900;
}