どうにか続きました第2回です。
今回はMastodonにアイドルを、もりくぼを召還したいと思います。
何をするか
これをやります。
Mastodonのトゥートの下側がすこーし寂しいので、ユーザースタイルを書いてもりくぼを召還します
今回は私が参加している[email protected]に対して設定していますがMastodonのインスタンスであれば同じように設定できます。
前準備
拡張の導入
今回はユーザースタイルシートを書く都合上、Chrome拡張の「Stylish」を先に導入しておいてください。Firefoxなどにも同様の拡張機能があると思います。
使いたい画像をBase64エンコードする
画像をそのままCSSのコードに埋め込むために画像をBase64エンコードします。適当なツールなどを用いて使いたい画像（今回はもりくぼぷちデレラ）をいい感じにリサイズしてBase64エンコードしておきましょう。
ユーザースタイルシートって何 (雑な説明)
その名のとおりユーザーが指定できるスタイルシートです。スタイルシートは基本的にWebサイト側から渡されたものを元にブラウザが描画をしてくれるのですが、ユーザースタイルシートを使うことでこのスタイルシートを追記・上書きしたように、つまり自分好みの設定で表示させるということが可能になります。
例えをあげるとするなら、最近デフォルトが丸アイコンになってしまったTwitterのアイコンを角丸四角形にすることなどができます。
ユーザー固有のスタイルシートなので、ほかのユーザーの見た目は変わりません。ということは好きなように書き換えて自分好みのスタイルにすることもできるわけです。すばらしい。
もっと知りたい方はググりましょう（丸投げ）
コードを書く
適用したいマストドンのインスタンスにアクセスし、Stylishのアイコンをクリックし、右上の団子三兄弟(メニュー)から[ スタイルを作る ]をクリックするとユーザースタイルシートの設定画面が開かれます。
ここにコードを書いていきます
コードおよび解説
.drawer__inner{
background-image: url(data:image/png;base64;/*クソ長いので省略*/);
background-position: 20px bottom;
background-repeat: no-repeat;
background-attachment: scroll;
}
まず、今回もりくぼを召還したい場所を開発者ツールで調べると drawer__inner というクラス属性が指定されているようです。ということはこれをクラスセレクタにすればこの部分にスタイルが適用できますね！
background-image は読んで字のごとく背景画像を指定します。今回はBase64エンコードした画像を用いるためめっちゃ長くなります。ビビらずにコピペしましょう。
background-position は背景画像の位置を指定します。1つ目の値が左端からの位置、2つ目は上端からの位置となります。本来は background-position:left bottom; で左下に寄ってくれるのですが、これだと左側が窮屈になってしまうため左端からの位置は直接値を指定します。
background-repeat は背景画像の繰り返しを指定します。パターン画像を用いるときなどに縦方向横方向の繰り返しを指定したりします。今回はもりくぼは一人でいい（怪文）ので no-repeat （繰り返さない）を指定します。
background-attachment は背景画像の位置をどうするかを指定します。位置をどうするか、というのは前回紹介しましたpositionで言うところのabsoluteにするかfixedにするかみたいな感じです。scrollにするのが一番いいと思います。一見fixedでよさそうに見えますがこれを使うとビューポート（ウィンドウ内の表示領域と考えるとよさそう）に対して固定されるのでズレます。ヤヴァイ。
書き終わったら名前をつけて [ 保存 ] ボタンをクリック！即座に反映されます。
終わり
ね？簡単でしょう？（ほんまか）
今回はもりくぼを召還しましたが、画像さえあればきらりんロボでもエヴァンゲリオンでも召還できるのでぜひお試しください。くれぐれも画像の大きさには気をつけてくださいね…
さぁあなたも、Mastodonに担当を召還してHave a good Mastodon Life!