[WP]マストドンの意識を乗っ取った話

ヘッダーメニューやプロフィールボックスからスレッズのリンクを貼って誘導したいのに、そもそもURL入力欄がなくない?と気づいてしまい。

試しにマストドンの場所にURLを入れてみたけど、自動出力されたのはマストドンのアイコンでした(それはそう)

でもこれ擬似要素を使ってそれぞれのソーシャルサービスに対応したアイコンを表示しているだけなので、cssでアイコンを上書きしちゃえばいいんですよね。
ソースを見ると、こうなってました。

.icon-mastodon-logo:before {
    font-family: "Font Awesome 5 Brands";
    content: "\e927";
}

Font Awesomeが使われてます。これのe927の部分をいじればOK。


その前に、スレッズのロゴマークはVer.6からの実装なので、現在5を使っている私はCDNを取得し直す一手間が必要でした。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
Threads Icon | Font Awesome
Threads brand icon. Available now in Font Awesome 6.

使いたいアイコンのunicodeはe618。
content:のe927をe618に置き換えて完了としたいところですが……

Font AwesomeはVer.6から擬似要素の指定方法がこれまでとは違っているので、それだとうまくいきません。下記のように記述します。

.icon-mastodon-logo:before {
   font: var(--fa-font-brands);
   content: "\e618";
}

向かって左から3番目の変化にご注目ください。できました!!

ヘッダーメニューの部分も置き換わりました。
お前は今日からスレッズとして生きていくんだよ。

雑な力技だけどSEOとか無関係な個人サイトならこのくらい適当でいいと思ってます。

何者だ!

スレッズです

よし通れ!

タイトルとURLをコピーしました