Skip to content

Instantly share code, notes, and snippets.

@otakumesi otakumesi/.markdown
Last active Feb 10, 2019

Embed
What would you like to do?
はてなブログ用のシェアボタンを作るぞ

はてなブログ用のシェアボタンを作るぞ

MITライセンスなので煮るなり焼くなりしてください。

A Pen by Takuro Niitsuma on CodePen.

License.

<!-- 記事上 -->
<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" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.