【Twitter】プロフィールアイコンとボタンを上にずらすCSS

2022年5月16日Twitter

Twitterのアイコン

この記事では、Twitter(PCウェブサイト版)のプロフィールアイコンと、各種ボタンを上にずらすCSSについて書きます。コンパクトになります。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。

プロフィールアイコンとボタンを上にずらした前と後の比較画像

本記事で紹介するCSSを使えば、Twitterのプロフィールページにあるアイコンと各種ボタンを上にずらせます。

上にずらして、ヘッダーの下部にボタンが重なるようにすれば、通常よりもスッキリしたプロフィールページにできます。

先日、プロフィールアイコンの縮小&ヘッダーの上部に重ねるCSSを、以下の記事で紹介しました。こちらは、アイコン自体を縮小するので、かなりスッキリします。しかし、ごっそりレイアウトが変わってしまうので、人によっては好みじゃないかもしれません。

上記記事で紹介しているCSSを適用してみたTwitterプロフィール画面

そこで、基本的な画面構成は維持したまま、少しだけコンパクトにするCSSを、本記事で紹介します。もっと見る、DM、通知、フォロー中、プロフィールを編集などのボタンが、ヘッダー画像の下部に揃うように配置できます。

上記記事のCSSと併用すると、レイアウトが崩れる可能性があるので、どちらかだけを利用してみてください。

「色々ヘッダーに重ねたい年頃だぜぇ!スタイリッシュにしてみてぇ!」という方、ぜひ参考にしてみてください。逆に、プロフィールアイコンを下にずらして、背景のヘッダー画像を全部見れるようにすることも可能です。

実際に適用してみた動画を貼っておきます。

Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。

インストール方法

ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。

Chromeウェブストアからインストールできます。

Firefox・Edgeをご利用の場合

Chrome拡張機能だけでなく、Microsoft EdgeFirefox版もあります。

「Chromeに追加」でインストールできます。

Stylebot - Chrome ウェブストア

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。

プロフィールアイコンとボタンを動かすCSS

Twitter」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

Stylebotのスクリーンショット1

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。

/*プロフィールアイコンとボタンを上にずらす*/
.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です。右上の「×」でスタイルシートを閉じます。

Stylebotのスクリーンショット2

再度拡張機能ボタンを押して、登録したサイト(例:twitter.com)がオンになっていることを確認します。オンになっている間は有効になっているということです。

プロフィールページにアクセスして、確認してみます。プロフィールアイコン、もっと見る、DM、通知、フォローなどのボタンが少しだけ上にずれています。全てのプロフィールページが対象です。(自身、それ以外の方全員)

プロフィールページのアイコンと各種ボタンを上にずらした画像

ボタンは、これまで通り利用できます。

「もっと見る」ボタンをクリックしたときのポップアップメニュー

一時的に無効化したい場合は、Stylebot→「twitter.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。

位置の微調整

他のCSSや、モニターのサイズによっては、アイコンの微調整が必要な場合があります。

その場合、「プロフィールアイコンとボタンを上にずらす」項目の「margin-top: -8%;」の数値を調整します。

上にずらしたい場合は、数値を増やします。数字の前の「-」記号と、最後の「%」記号は必要なので、消さないように注意です。全角ではなく、半角数字です。

Stylebotのスクリーンショット3

ライトモード利用時のボタン背景色

上記CSSは、僕が使っているダークブルー用に最適化したコードです。ライトモードだと、ボタンの背景色が浮いてしまい、見にくくなります。

ライトモードだと、ボタンの背景色が浮いてしまい、違和感

この場合、「ボタンの色」の「background-color: rgb(30 51 64);」を調整します。HTMLカラーコードや、RGBで指定します。

Stylebotのスクリーンショット4

例えば、真っ白にする場合は、以下のようになります。

/*ボタンの色*/
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;」といった風になります。

Stylebotのスクリーンショット5

プロフィールアイコンの画像サイズ

おまけで、プロフィールアイコンの画像サイズを縮小するコードを紹介します。上にずらすだけでなく、画像サイズを少し小さくしたい方、参考にしてみてください。

/*プロフィール画像の大きさ*/
div[data-testid^="UserAvatar-Container"]:has(div[aria-label="プロフィール画像を開きます"]) {
    width: 13%;
    margin-top: -10%;
}
Stylebotのスクリーンショット6

「width: 13%;」が画像サイズ、「margin-top: -10%;」が位置調整です。

小さくしたい場合は、「width」の数値を小さくします。数値を弄ると、その分、アイコンの位置も変わってしまうので、「margin-top」で微調整しましょう。

どのフォントサイズ、テーマにしていても、適用されるはずです。

アイコン画像とボタンを下にずらして、ヘッダー画像全体を表示

本記事の趣旨は、アイコンとボタンを上にずらして、スッキリするというものです。しかし、逆の発想で、下にずらして、ヘッダー画像全体が見れるようにすることも可能です。

以下のCSSになります。ボタンの位置は変えずに、アイコン画像だけ位置調整しています。

/*プロフィールアイコン画像の位置調整*/
div[data-testid^="UserAvatar-Container"]:has(div[aria-label="プロフィール画像を開きます"]) {
  margin-top: -8px;
}

「-8px」を好きなように調整してみてください。アイコン画像が下にずれて、ヘッダー画像全体が確認できるようになります。

Stylebotのスクリーンショット7

感想

以上、Twitterのプロフィールページにあるプロフィールアイコンと、もっと見る、DM、通知、フォロー中などのボタンを上にずらして、ヘッダー画像と重ねるCSSについてでした。

個人的には、冒頭に貼った記事よりも、本記事のカスタマイズの方が好きです。

2022年5月16日Twitter