デアゴスティーニっぽいタイトルですが単発です。おひさです、宮野です。
もうすぐTwitterが死ぬということで最近は[email protected]にも入り浸っています。ところで、Twitterには外部サイトに貼り付けられるフォローボタンがあるんですが、mastodonはそんなのがないですね（実はあったらごめんなさい）
あったほうが便利だよねって思ったので作りました。
Pen
See the Pen mastodon follow button by miyacorata (@miyano) on CodePen.
使い方
HTMLの方は以下のような構成になっています
<a href="https://imastodon.net/@miyacorata" class="mstdn">miyacorata<span>imastodon.net</span></a>
※WordPressのエディタがGutenbergになってシンタックスハイライトに少々バグが出てるかもしれません
aタグのclass属性にmstdn、href属性はアカウントのページにします。target属性を_blankにして新規タブで表示するようにするとなおよいと思います。
aの中身にspanがありますが、この中は任意です。何を書くかと言うとインスタンスのドメインです。ぼくの場合は imastodon.net ってなりますね。もしこのインスタンスのアカウント列挙してるからいらねえやって場合はspanなしでいいです。
CSSの構成
コードはCodepenを見てくだしあ（面倒くさがり）
色は joinmastodon.org にあったカラースキームをそのまま使いましたが、hoverしたときの背景色だけ適当にカラーコードいじりました。トランジションかけてあるのでぼわーって色が変わります。わぁい。
マストドンのアイコンは同じく配られていたsvgを無理やりcssに埋め込んで表示して位置を調整しただけです（脳筋）
気が向いたら使ったりしてくださいな
おわりだよ～(o・▽・o)