【Twitter】プロフィールアイコンとボタンを上にずらすCSS
この記事では、Twitter（PCウェブサイト版）のプロフィールアイコンと、各種ボタンを上にずらすCSSについて書きます。コンパクトになります。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。
本記事で紹介するCSSを使えば、Twitterのプロフィールページにあるアイコンと各種ボタンを上にずらせます。
上にずらして、ヘッダーの下部にボタンが重なるようにすれば、通常よりもスッキリしたプロフィールページにできます。
先日、プロフィールアイコンの縮小＆ヘッダーの上部に重ねるCSSを、以下の記事で紹介しました。こちらは、アイコン自体を縮小するので、かなりスッキリします。しかし、ごっそりレイアウトが変わってしまうので、人によっては好みじゃないかもしれません。
https://www.naporitansushi.com/twitter-profile-header-css/
そこで、基本的な画面構成は維持したまま、少しだけコンパクトにするCSSを、本記事で紹介します。もっと見る、DM、通知、フォロー中、プロフィールを編集などのボタンが、ヘッダー画像の下部に揃うように配置できます。
上記記事のCSSと併用すると、レイアウトが崩れる可能性があるので、どちらかだけを利用してみてください。
「色々ヘッダーに重ねたい年頃だぜぇ！スタイリッシュにしてみてぇ！」という方、ぜひ参考にしてみてください。逆に、プロフィールアイコンを下にずらして、背景のヘッダー画像を全部見れるようにすることも可能です。
実際に適用してみた動画を貼っておきます。
Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。
Chromeウェブストアからインストールできます。
https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
「Chromeに追加」でインストールできます。
右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
プロフィールアイコンとボタンを動かすCSS
「Twitter」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。
/*プロフィールアイコンとボタンを上にずらす*/
.css-1dbjc4n.r-1habvwh.r-18u37iz.r-1w6e6rj.r-1wtj0ep {
margin-top: -8%;
}
/*ボタンの色*/
div[aria-label="もっと見る"],
div[aria-label="メッセージ"],
div[aria-label="ツイート通知をオンにする"],
a[data-testid="editProfileButton"],
div[aria-describedby^="id__"][aria-label^="フォロー中"],
div[aria-label^="フォロー @"][role="button"] {
background-color: rgb(30 51 64);
}下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。
再度拡張機能ボタンを押して、登録したサイト（例：twitter.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。
プロフィールページにアクセスして、確認してみます。プロフィールアイコン、もっと見る、DM、通知、フォローなどのボタンが少しだけ上にずれています。全てのプロフィールページが対象です。（自身、それ以外の方全員）
ボタンは、これまで通り利用できます。
一時的に無効化したい場合は、Stylebot→「twitter.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
位置の微調整
他のCSSや、モニターのサイズによっては、アイコンの微調整が必要な場合があります。
その場合、「プロフィールアイコンとボタンを上にずらす」項目の「margin-top: -8%;」の数値を調整します。
上にずらしたい場合は、数値を増やします。数字の前の「-」記号と、最後の「％」記号は必要なので、消さないように注意です。全角ではなく、半角数字です。
ライトモード利用時のボタン背景色
上記CSSは、僕が使っているダークブルー用に最適化したコードです。ライトモードだと、ボタンの背景色が浮いてしまい、見にくくなります。
この場合、「ボタンの色」の「background-color: rgb(30 51 64);」を調整します。HTMLカラーコードや、RGBで指定します。
例えば、真っ白にする場合は、以下のようになります。
/*ボタンの色*/
div[aria-label="もっと見る"],
div[aria-label="メッセージ"],
div[aria-label="ツイート通知をオンにする"],
a[data-testid="editProfileButton"],
div[aria-describedby^="id__"][aria-label^="フォロー中"],
div[aria-describedby^="id__"][aria-label^="フォロー中"] {
background-color: rgb(255 255 255);
}ボタンが白くなり、ライトテーマに合うようになります。カラーコードで指定する場合は、「background-color: #fff;」といった風になります。
プロフィールアイコンの画像サイズ
おまけで、プロフィールアイコンの画像サイズを縮小するコードを紹介します。上にずらすだけでなく、画像サイズを少し小さくしたい方、参考にしてみてください。
/*プロフィール画像の大きさ*/
div[data-testid^="UserAvatar-Container"]:has(div[aria-label="プロフィール画像を開きます"]) {
width: 13%;
margin-top: -10%;
}
「width: 13%;」が画像サイズ、「margin-top: -10%;」が位置調整です。
小さくしたい場合は、「width」の数値を小さくします。数値を弄ると、その分、アイコンの位置も変わってしまうので、「margin-top」で微調整しましょう。
どのフォントサイズ、テーマにしていても、適用されるはずです。
アイコン画像とボタンを下にずらして、ヘッダー画像全体を表示
本記事の趣旨は、アイコンとボタンを上にずらして、スッキリするというものです。しかし、逆の発想で、下にずらして、ヘッダー画像全体が見れるようにすることも可能です。
以下のCSSになります。ボタンの位置は変えずに、アイコン画像だけ位置調整しています。
/*プロフィールアイコン画像の位置調整*/
div[data-testid^="UserAvatar-Container"]:has(div[aria-label="プロフィール画像を開きます"]) {
margin-top: -8px;
}「-8px」を好きなように調整してみてください。アイコン画像が下にずれて、ヘッダー画像全体が確認できるようになります。
感想
以上、Twitterのプロフィールページにあるプロフィールアイコンと、もっと見る、DM、通知、フォロー中などのボタンを上にずらして、ヘッダー画像と重ねるCSSについてでした。
個人的には、冒頭に貼った記事よりも、本記事のカスタマイズの方が好きです。