New ツイッター：背景をデザインする時のガイド サイドバー透明化も
なかなか厄介な New ツイッターの背景のデザイン。みなさんは何か工夫されてますか？今回 New ツイッターのサイズに合わせて、背景を少し変えてみたんですけど、その時に試行錯誤した事をまとめてみました。
先日、私のツイッターもやっとNewになりました。嬉しい反面、ちょっと残念なことも …。それは以前のツイッターに合わせて作った背景が、全く見えなくなってしまった事。新しいツイッターの画面は横幅が1,040px（小さいディスプレイ時は920pxの可変）もあって、1280pxのディスプレイでは背景がほとんど見えません …。
過去記事：ツイッター入門：背景画像をデザインする時のルールが、私のブログの中で意外にアクセスが多いのですが、情報が古いので、Newツイッターの背景を作る時のガイドを考えてみました。
New ツイッターの画面
ツイッターの画面、背景の見え方は、ディスプレイのサイズで変ってしまうので、全てのディスプレイでキチンと意図した通りに表示させるのは難しいです。でも、よく使われてるディスプレイサイズでは、ちゃんと見えるようにしたいかも。私の環境は1280px と1680pxの二種類なんですが、せめて自分の環境ではキチンと見えるようにしたいです。
まずは、New ツイッターの画面を確認してみましょう。
ディスプレイサイズ：1280px
横に広がったせいで、左も右も113pxしかスペースがありません（右側はスクロールバーがあるため）。前のツイッターのサイズに合わせて作った背景だと、こんなことになっています。
ロゴが半分しか見えてないし…
ディスプレイサイズ：1600px
ちょっと大きくなって、1600pxサイズだとこんな感じです。
左側に 270px 程の余裕があるので、これなら十分なスペースですね。
1280px 対策：サイドバー表示時
1280px のディスプレイサイズでは、左側、右側ともに 110px程度 しかスペースがありません。
ですからロゴを小さくしたり、縦を有効利用したりするしかなさそうです。
一応、New ツイッターのスタイルシートを覗いてみると、サイドバーは90%の不透明度が設定されていて、ほんの少し透けています（IEで見ると透けません）。サイドバーが少し透けているのを利用して、右のスペースを有効利用するのもアリですねー。とりあえず、私のツイッターの背景は、1280px 時、こんな風にしてみました。
1600px 対策：サイドバー表示時
1600px の時は、左側に十分なスペースがあるので、思う存分好きなものを表示できます。私は左側にも写真が表示されるようにしてみました。逆に 1280px のディスプレイで見えていた右側の写真は、1600px だとちょうど隠れて見えなくなります（透けてますが … ）。
1600px の時には右側の開いてるスペースも有効活用できますね。
サイドバーを透明にする
ツイッターのサイドバーって、実は透明にする裏技があるんです（今更ですけど）。ツイッターのデザインを変更する画面、設定 → デザイン に行くと、サイドバーの色を変更する画面がありますよね。そこで色を選ぶ訳ですが、ここで色を指定しなければ無色（透明）になるという …。
でも、空欄にしようとすると勝手に #000000 が代入されてしまい、サイドバーが真っ黒になってしまいます。そこで以下の魔法の Javascript の登場です！
Javascript
javascript:document.getElementById("user_profile_sidebar_fill_color").value = '';document.getElementsByTagName('h3')[0].innerHTML = 'ページ下部の保存するボタンを押してください';void(0);
設定 → デザイン の画面に移動したら、ブラウザの URL が表示されてるところに上のコードを貼り付けて Enter キーを押してください。
すると以下のように表示されます。
追記
2011年 10月現在：各ブラウザもアップグレードしていて、透明化できなくなっています。例えば Chrome と Firefox は、アドレスバーにコードを入れて Enter キーを押すと検索として機能してしまいます。Safari、IE はアドレスバーに検索機能がついていないため透明化できますが … そろそろこの裏技は使えなくなってきましたねー。
ページ下部の保存するボタンを押せば、下の画像のようにサイドバーが透明になります！
もとに戻す時は、もう一度 設定 → デザイン へ移動して、サイドバーの色を選んで保存をすればOKです。
別に怪しいスクリプトではないので安心してくださいね。サイドバーの背景色を指定する色番号（#000000など）を空白（色なし）に入れ替えているだけです。
1280px 対策：サイドバー透明時
サイドバーを透明にしたからといって、サイドバー部に凝った背景を置くと、文字が読みにくくなってしまいます。サイドバーを透明にするなら、文字が読み易くなるような工夫をしたほうがよさそうですね！
もうひとつ、サイドバーを透明にしたおかげで、必ず表示できるセーフティーゾーンが生まれます。それは広告の横の空白部分。将来広告サイズが大きくなることも考えられますが…
1600px 対策：サイドバー透明時
1600pxの時にはさっきのセーフティーゾーンは広告の裏に隠れてしまいます。なので 1280px より右側にもう一個ロゴを置いてみました。
ユーザー環境によって見え方が違うツイッター画面 … 納得のいくデザインにするのは中々難しそうですね…。ここまでブログを書いてなんですが、シンプルにデザインした方がいいかもという気になってきました … X(
おすすめのアイデアなどあったら、教えていただけると嬉しいです！