mastodonのフォローボタンを作る

デアゴスティーニっぽいタイトルですが単発です。おひさです、宮野です。

もうすぐTwitterが死ぬということで最近はim@stodonにも入り浸っています。ところで、Twitterには外部サイトに貼り付けられるフォローボタンがあるんですが、mastodonはそんなのがないですね(実はあったらごめんなさい)

Twitterのフォローボタン

あったほうが便利だよねって思ったので作りました。

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)

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です