MITライセンスなので煮るなり焼くなりしてください。
A Pen by Takuro Niitsuma on CodePen.
<!-- 記事上 --> | |
<div class="u-share-button-wrapper"> | |
<div class="u-share-button hatena"> | |
<a href="http://b.hatena.ne.jp/entry/{Permalink}" rel="nofollow" target="_blank"> | |
<i class="fa-hatena"></i> | |
</a> | |
</div> | |
<div class="u-share-button twitter"> | |
<a href="https://twitter.com/share?url={Permalink}&text={URLEncodedTitle} - {URLEncodedBlogTitle}&related=otakumesi" rel="nofollow" target="_blank"> | |
<i class="fab fa-twitter"></i> | |
</a> | |
</div> | |
<div class="u-share-button facebook"> | |
<a href="http://www.facebook.com/share.php?u={Permalink}" rel="nofollow" target="_blank"> | |
<i class="fab fa-facebook"></i> | |
</a> | |
</div> | |
<div class="u-share-button pocket"> | |
<a href="http://getpocket.com/edit?url={Permalink}&title={URLEncodedTitle} - {URLEncodedBlogTitle}" rel="nofollow" target="_blank"> | |
<i class="fab fa-get-pocket"></i> | |
</a> | |
</div> | |
</div> | |
<hr> | |
<!-- 記事下 --> | |
<div class="u-share-button-wrapper"> | |
<div class="u-share-button with-text follow"> | |
<a href="https://twitter.com/intent/follow?screen_name=otakumesi" rel="nofollow" target="_blank"> | |
<i class="fab fa-twitter-square"></i> | |
<span class="u-share-button-text">フォローする?</span> | |
</a> | |
</div> | |
<div class="u-share-button with-text reader"> | |
<a href="https://blog.hatena.ne.jp/otakumesi/www.skyrocketing.work/subscribe" rel="nofollow" target="_blank"> | |
<i class="fa-plus"></i> | |
<span class="u-share-button-text">読者になる?</span> | |
</a> | |
</div> | |
<div class="u-share-button with-text twitter"> | |
<a href="https://twitter.com/share?url={Permalink}&text={URLEncodedTitle} - {URLEncodedBlogTitle}&related=otakumesi" rel="nofollow" target="_blank"> | |
<i class="fab fa-twitter"></i> | |
<span class="u-share-button-text">ツイートする?</span> | |
</a> | |
</div> | |
<div class="u-share-button with-text hatena"> | |
<a href="http://b.hatena.ne.jp/entry/{Permalink}" rel="nofollow" target="_blank"> | |
<i class="fa-hatena"></i> | |
<span class="u-share-button-text">ブクマする?</span> | |
</a> | |
</div> | |
<div class="u-share-button with-text facebook"> | |
<a href="http://www.facebook.com/share.php?u={Permalink}" rel="nofollow" target="_blank"> | |
<i class="fab fa-facebook"></i> | |
<span class="u-share-button-text">シェアする?</span> | |
</a> | |
</div> | |
<div class="u-share-button with-text pocket"> | |
<a href="http://getpocket.com/edit?url={Permalink}&title={URLEncodedTitle} - {URLEncodedBlogTitle}" rel="nofollow" target="_blank"> | |
<i class="fab fa-get-pocket"></i> | |
<span class="u-share-button-text">Pocketにいれる?</span> | |
</a> | |
</div> | |
</div> |
.u-share-button { | |
a { | |
height: 70px; | |
text-decoration: none; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
color: #fff; | |
} | |
&-wrapper { | |
width: 100%; | |
margin: 15px 0; | |
padding: 0 10px; | |
display: flex; | |
flex-wrap: wrap; | |
align-content: space-between; | |
} | |
padding: 0 15px; | |
flex: 1; | |
&.with-text { | |
min-width: 250px; | |
} | |
.u-share-button-text { | |
margin-left: 10px; | |
font-size: 1.2em; | |
font-weight: bold; | |
} | |
i { | |
font-size: 2.5em; | |
} | |
.fa-hatena:before { | |
content: "B!"; | |
font-family: Verdana; | |
font-style: normal; | |
font-weight: bold | |
} | |
.fa-plus:before { | |
content: "+"; | |
font-family: Verdana; | |
font-style: normal; | |
font-weight: bold | |
} | |
&.hatena { | |
background-color: #008fde; | |
} | |
&.twitter { | |
background-color: #1da1f2; | |
} | |
&.facebook { | |
background-color: #3b5998; | |
} | |
&.pocket { | |
background-color: #ef4056; | |
} | |
&.follow { | |
background-color: #657786; | |
} | |
&.reader { | |
background-color: #f9971c; | |
} | |
} |
<link href="https://use.fontawesome.com/releases/v5.7.1/css/brands.css" rel="stylesheet" /> | |
<link href="https://use.fontawesome.com/releases/v5.7.1/css/fontawesome.css" rel="stylesheet" /> |