えーと、CSSを使ったネタですｗ くだらない遊びが好きな人はどーぞ★

Twitterで話しかけられたい人はいますか？

Twitterをやっていると、色んな人と仲良くなったりしますよね。ちょっとやりすぎちゃってる人は何百人とフォローしてしまって、そりゃもうタイムラインがカオスになっていきます。

それはそれで楽しいんですけど、もっとカワイイ女の子やイケメンに話しかけられまくったり、憧れの人物と話してみたいなーとか思いませんか？

ユーザスタイルシートでその夢叶えます

その夢、叶えましょう。

一時的ならめんどくさくもなく、簡単です。ずっとそのままでいたいなら、ちょっと面倒ですけど、お付き合い願いますね！

その方法とは…ユーザスタイルシートです。

ユーザスタイルシートとは

ユーザスタイルシートとは、名前の通りユーザが用意するスタイルシートです。そこに好きなスタイルシートを書けば、どんなサイトであってもあなたが思ったようなスタイルが適用されます。

webページを表示する時、ブラウザはまずブラウザ自体が持つスタイルシートを適用させます。その次にユーザスタイルシート、最後にサイトに書かれたスタイルシート。

本来このユーザスタイルシートは文字が見づらいサイトでも文字を大きくしたり、見やすい背景色に変えたりするために使うものなのだと思いますけど、今回紹介するような使い方もできます。

皆さんがフォローしている人のTwitterのアイコンも当然HTMLに書かれた要素がCSSで装飾されて表示されているので、そこをユーザスタイルシートでいじってあげれば、あなたのタイムラインに表示されるTwitterアイコンは自由自在に変更できるわけです…！

ユーザスタイルシートというモノは昔からありますし、特に目新しい技術でもないんですけど、CSS3なんかを駆使することによってわりとやりたい放題になります。

HTMLを見てアイコンの指定を突きとめる

まずはTwitterのアイコンがどうやって表示されているのか探ってみましょう。

ソースを見て行くと、アイコン自体はimg要素でclass=”avatar”とあります。そしてそのアイコンはclass=”acount-group”と言うクラスの付いたa要素の中にあることが分かります。a要素の中には更にユーザ名(class=”fullname”)、アカウント名(class=”username”)があります。これらは時間(class=”time”)も含めてツイートのヘッダ情報(class=”stream-item-header”)として格納されています。ツイート自体はp要素(class=”js-tweet-text”)に入っています。

とりあえず変えるだけ変えてみる

これが分かれば後は以下のようなCSSを適用出来れば元のアイコンを隠すように好きな画像が表示させることが出来ます。

CSS

/* Twitterのアイコンを全て同じに */
.account-group {
position:relative ;
}
.avatar {display:none ;}

.account-group:before {
content:url("http://placehold.it/48x48");
position:absolute ;
left:-58px ;
top:2px ;
}

ただし当然このやり方だと全てのアイコンが同じになってしまいます。とりあえず、ここはガイ・フォークスの仮面でも使ってみましょうか。

CSS

guy-fawkes.css

完全に怖いですねｗ ちなみに画像はdataURI converterを使用したbase64形式です。画像を呼ばないのでコピペで使っても誰にも迷惑がかかりません。何気に便利。

ココ以降のCSSは全て画像をdataURIを使って指定するため、CSSを記事内に書くと見づらいので実際に試すCSSを見たい場合はリンクをクリックして見てください。ユーザスタイルシートの書き換えはそれを全コピすればOKです。

実際にユーザスタイルシートを書き換える

で、この設定を実際に試すにはユーザスタイルシートを書き換えなければいけません。これはブラウザ毎にやり方が違うようなのですが、

【最新版】ユーザーCSSの使い方【Firefox,Chrome,IE,Opera】 | 10press

こちらの記事で各ブラウザでのユーザスタイルシートの設定の仕方が説明されています。

Firefoxでのユーザスタイルシートの扱いなら以下の記事が更に詳しいです。

■ファイアーフォックス（Firefox）でユーザースタイルシートを使ってみよう――メールとウェブのお役立ちメモ

ここで紹介されているStylishと言うアドオンを使うとお試しでユーザスタイルシートを適用させるのにかなり楽でした。

ブックマークレットを使ってユーザスタイルシートを適用する

でもちょっとブラウザ毎にやり方が違うと(主に説明が)面倒なので、ブックマークレットにしてしまいましょう。ブックマークレットはお気に入りにしておくだけで、使うとJavaScriptを実行してくれるというものです。

JAVASCRIPT::BOOKMARKLET

上記のリンク先で紹介されている「スタイルをテスト」というブックマークレットを使います。

このリンクを右クリックしてお気に入りに追加し、スタイルを適用したいページで開くと、別ウィンドゥが出てきて、そこに記入したCSSが当該ページに即時適用されます。わーこれ便利。ちなみに上記サイトのブックマークレットには面白いものもたくさんあるのでこれを機に色々登録しておいてもいいでしょう。

これはユーザスタイルシートを保存するわけではなくあくまでお試しなので、遊びでやったり実験用です。まあミニFirebugと言った感じですね。いつ開いても常にTwitterのアイコンが変わった状態にしたいのであれば前項の方法で実際にユーザスタイルシートをいじりましょう。

TLの指定したアカウントを別のモノに差し替える

では実際に指定して行きましょう。

とはいえ今回はブックマークレット以外CSSしか使ってないので(webcre8自身にあんまりスキルがない＞＜)そんな込み入ったことはできませんし、これはかなり力技ですｗ

個別のアカウントごとに差し替える

先ほどは全てのツイートに共通する情報としてaccount-groupというクラスを使いましたが、これだと全てのツイートが対象になってしまいます。なのでユーザごとに固有の属性の値を見つけないと行けません。IDやCLASSに固有のものはないみたいなんですが、属性にはdata-user-idと言うものがあるので、

要素名[属性名="値"]

の様に属性セレクタを使えば決めたアカウントにのみ常に同じ画像を指定することが出来ます。

適当に美女の画像を探し、それを48×48サイズの画像にクロッピングし、base64形式にしたものを複数用意します。決まったdata-user-idを持つ人のツイートに表示されるアイコンはココで指定したものに差し替えられます。

CSS

beauty.css

こちらは皆さんがフォローしている相手が同じではないので、それぞれのユーザIDを.account-group[data-user-id=””]に入れる必要があります。

これを片っ端からフォローしている人全てにやっていけばいずれTLは美女のみになりますねー。写真を使う訳ですが、自分の環境で表示させるだけなので特に問題もないと思います。他の人が見てもユーザスタイルシートでどんな指定をしているかは分かりませんから好き勝手に出来ますｗ

…ていうか大丈夫ですか？ついてきてますか？ｗ

TLを無差別に違うモノに差し替える

それじゃ次は無差別に全てのアイコンを色んなモノに換えてしまいましょう。webcre8の好みとしては美女、とかではなくどっちかと言うともっと違う風に、アカデミックな感じにしたいと思ったので、全部哲学者にしてみようと思います。

:nth-childセレクタを使う

哲学者の画像を探し、それを48×48サイズの画像にクロッピングし、base64形式にしたものを複数用意します。

IDを指定するやり方はユーザそれぞれになってしまうのでwebcre8が自分のフォロワを変更するために作ったものをそのまま人が使う事ができません。なので今度はアイコンを一人一人に割り当てるのは諦めて、適当に画像を当てはめて雰囲気だけ楽しむことにします。

:nth-childセレクタを使い、20個も割り当てればとりあえずはバラエティ豊かな感じになります。このコードは公開しますので、手軽に試すことが出来ます。先ほどのスタイルをテストのブックマークレットを起動後、以下のCSSをコピペすれば哲学者タイムラインになりますよ！(美女とかイケメンじゃなくてすみません＞＜)

philosopher.css

Twitterクリア後の廃人向け上級プレイ

アイコンを差し替えるだけじゃ空き足りないアナタは.account-groupのa要素ごとdisplay:noneにしてみてください。名前やアカウント名まで消せますから、完全に誰と話しているかわからなくなります。発言者が誰であるかではなく、常にプレーンな気持ち、内容のみでツイートの良し悪しが判断できますね！ｗ

hidden.css

Twitter以外でも遊べます

他にもこれを応用すると同僚のGoogle画像検索の結果を全部カツカレーにしたりとか、わりと好き勝手出来ます。イマジネーションは無限大、皆さんもユーザスタイルシートで色々楽しんでくださいね★

katsu-curry.css

これはGoogle画像検索ページで使ってみてください。