mmahhiの随筆

この随筆にもTwitterのシェアボタンを設置しています。共有してくれると嬉しいですからね。ただ、どれくらい使われているかわかりませんが……。

ところでこのボタン、一見公式のもの見えますが、実は違います。
こちら側で作ったものです。

なぜ公式のを使わないのか

理由は簡単です。「まだTwitterでいてほしいから」。
そして「ダークモード時に背景が白くなるから」です。
公式経由で実装すると、iframeで埋め込まれるがために、こちら側からCSSを適用してデザインを変更して使用することができません。仕方ないのでそのまま使っていましたが、やはり目立ちます。
そこで、自分で作ることにしました。とはいっても、デザインを考えるのは面倒なので「どうせなら公式まんまのものを作ってしまえ！」ということにしました。

作ったコード

中身はTwitterのそのままでいいとも思われそうですが、TwitterのCSSにはかなり無駄も多いので、今回はデザイン以外は別物となっています。

また、アイコンには「Fork-Awesome」を使用しています。ダウンロードしてサーバーに設置して使用することもできますが、サイトの「Get Started」のUse a CDNからすぐ下のコードをコピーしても使えます。どちらでも変わりません。

HTML
※(())部分は適宜修正を加えてください。
<a class="twitter-share" href="https://twitter.com/intent/tweet?url=((URL))&text=((タイトル))&related=((投稿後に表示させるユーザー))" target="_blank" rel="nofollow" title="この記事をTwitterでシェア"><span class="fa fa-twitter" aria-hidden="true"></span>ツイート</a>

CSS
.twitter-share {
display: inline-block;
height: 20px;
box-sizing: border-box;
padding: 1px 12px 1px 12px;
background-color: #1d9bf0;
color: #fff !important;
text-decoration: none !important;
border-radius: 9999px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
vertical-align: top;
font-size: 12px;
line-height: 18px;
}
.twitter-share:active, .twitter-share:focus, .twitter-share:hover {
background-color: #0c7abf;
}
.twitter-share .fa.fa-twitter {
display: inline-block;
font-size: 14px;
margin-right: 3px;
position: relative;
top: 0.5px;
}

HTMLを次のように変更すると、フォローボタンを作ることもできます。((ユーザー名))部分には、@から始まるユーザー名を入れてください（例：@mmahhi_1）。
なお、「title=""」や「((ユーザー名))をフォロー」部分は、お好きなものに差し替えることもできます。
<a class="twitter-share twitter-follow" href="https://twitter.com/intent/follow?screen_name=((ユーザー名))" target="_blank" rel="nofollow" title="((ユーザー名))をフォローしましょう"><span class="fa fa-twitter" aria-hidden="true"></span>((ユーザー名))をフォロー</a>