【Ubuntu 20.04、XAMPP 7.4.6-0環境 】インスタンス「Qiitadon」のタイムラインのほとんどのユーザーに認証済みバッジをつける方法

今回はQiitaユーザーおなじみのマストドンのインスタンス「Qiitadon」のタイムラインのほとんどのユーザーに認証済みバッジをつける方法をまとめていきたいと思います。

##環境
・Ubuntu 20.04 LTS
・XAMPP for Linux 7.4.6-0
・Google Chrome バージョン 83.0.4103.97

##準備
###1. XAMPPを起動する
以下のコマンドを打ってアプリケーションを開きます。

sudo /opt/lampp/manager-linux-x64.run

その後、Go To Applicationをクリックすると、サーバーを動かすか聞かれるので、Start Serversをクリックして、XAMPPを起動しましょう。

###2.認証済みバッジの画像をダウンロードしておく
認証済みバッジの画像をダウンロードしておきます。
ダウンロード

###3.認証済みバッジの画像のファイル名を変える
分かりづらいので、ファイル名を変えてしまいましょう。ファイル名を変えるには、mvコマンドを使用します。
※louisのところは自分のUbuntuユーザー名に変えて下さい。他のコマンドでも同じように書き換えて下さい。

mv /home/louis/ダウンロード/bYtqan9.png /home/louis/ダウンロード/verified.png

###4.画像をコピーする
ファイルのコピーはコマンドcpを使います。/home/louis/ダウンロード内にあるverified.pngを/opt/lampp/htdocs/内にコピーさせます。

cp /home/louis/ダウンロード/verified.png /opt/lampp/htdocs/verified.png

##実行
###1. Chrome拡張機能「My Style」をインストールする
まず、CSSを追加できるGoogle Chromeの拡張機能「My Style」をインストールします。

###2. Qiitadonを開く
Qiitadonをブラウザで開きます。

###3. Ctrl+Mを押す
CtrlキーとMキーを同時に押してターミナルを開きます。

###4. CSSをコピーする
下記のCSSをターミナルにコピーして貼り付けます。

.account__display-name strong, .status__display-name strong:after{
  content: '';
  display: inline-block;
  width: 17px;
  height: 17px;
  background-image: url(http://localhost/verified.png);
  background-size: contain;
  vertical-align: middle;
}

###5. Ctrl+Mを押して閉じる
再度CtrlキーとMキーを同時に押して、ターミナルを閉じます。

###6. 認証済みバッジが表示されていれば成功
認証済みバッジがほとんどのアカウントに表示されていれば成功です。お疲れ様でした。

##注意点
・この方法を使うと、フォローとフォロワーページ、通知のフォロワーが追加されたときのアカウント名が一文字目と認証済みバッジが重ね合わせになります。このバグを直す方法を見つけた人がいましたら、ぜひコメントをよろしくお願い致します。
・一部ユーザーには文字数の関係で認証済みバッジが表示されません。ご了承下さい。
・ユーザーアカウントページには認証済みバッジは表示されません。表示されるのはあくまでタイムラインのみです。

##簡単にする方法
上記の手順では難しいと考えられる方がいるかもしれないので、簡単な方法を書いておきます。

###1. Chrome拡張機能「My Style」をインストールする
まず、CSSを追加できるGoogle Chromeの拡張機能「My Style」をインストールします。

###2. Qiitadonを開く
Qiitadonをブラウザで開きます。

###3. Ctrl+Mを押す
CtrlキーとMキーを同時に押してターミナルを開きます。

###4. CSSをコピーする
下記のCSSをターミナルにコピーして貼り付けます。

.account__display-name strong, .status__display-name strong:after{
  content: '';
  display: inline-block;
  width: 17px;
  height: 17px;
  background-image: url(https://i.imgur.com/bYtqan9.png);
  background-size: contain;
  vertical-align: middle;
}

###5. Ctrl+Mを押して閉じる
再度CtrlキーとMキーを同時に押して、ターミナルを閉じます。