【Twitter】プロフィールアイコン、ボタンをヘッダーに重ねるCSS

​2022年5月16日​​Twitter

Twitterのアイコン

この記事では、Twitterのプロフィールアイコン、ボタンをヘッダー画像の上に重ねるCSSについて書きます。

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

Twitterのプロフィールアイコンと各種ボタンをヘッダー画像内に埋め込んた比較画像

本記事で紹介するCSSを使えば、Twitterのプロフィールアイコン、ボタン（もっと見る、DM、通知、フォロー中、プロフィールを編集）を、ヘッダー画像の上に重ねることができます。

重ねることで、余計なスペースを取らなくなり、スッキリします。画像サイズ、位置は自由に調整できます。

「Twitterをもっとコンパクトにしたい！プロフィールアイコン少し大きすぎる！」という方、ぜひ参考にしてみてください。いつでもオンオフできます。

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

合わせて読みたい

人によっては、本記事のカスタマイズは大胆すぎて微妙かもしれません。そんな方には、下記記事がおすすめです。ちょっとだけ上にずらすCSSを紹介しています。

そこまでデザインを改造せず、コンパクト化したい方におすすめです。本記事とは併用できないので、どちらかだけを利用します。アイコンを下にずらして、ヘッダー画像全体を見れるようにすることも可能です。

実際に使ってみた動画を貼っておきます。動画内のCSSはちょっと古いです。2022年10月に本記事を更新して、CSSも変えました。

インストール方法

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

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

Firefox・Edgeをご利用の場合

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

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

Stylebot - Chrome ウェブストア

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

プロフィールアイコン・ボタンをヘッダー画像に重ねるCSS

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

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

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

/*プロフィールアイコン、各種ボタン（通知、DM）をヘッダーに重ねる*/
.css-1dbjc4n.r-1habvwh.r-18u37iz.r-1w6e6rj.r-1wtj0ep {
  position: relative;
  bottom: 15vh;
}

/*プロフィール画像の大きさ、位置調整*/
div[data-testid^="UserAvatar-Container"]:has(div[aria-label="プロフィール画像を開きます"]) {
  width: 20%;
  position: relative;
  top: 8vh;
}

/*ヘッダー画像より下を、上にずらす*/
.css-1dbjc4n.r-1ifxtd0.r-ymttw5.r-ttdzmv {
  margin-top: -55px;
}

/*プロフィールのヘッダー画像の角丸具合*/
a[href$="/header_photo"] {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
}

/*色々な部分透明化(プロフィールアイコン周りの枠線など）*/
/*ライト*/
.css-1dbjc4n.r-14lw9ot.r-1pi2tsx.r-13qz1uu,
/*ダークブルー*/
.css-1dbjc4n.r-yfoy6g.r-1pi2tsx.r-13qz1uu,
/*ダーク*/
.css-1dbjc4n.r-kemksi.r-1pi2tsx.r-13qz1uu {
  background-color: transparent;
}

/*ボタンの色*/
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 46 62);
}

下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。

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

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

Twitterのプロフィールページを開きます。

自身、別の方、僕のページなど、どのページでもOKです。プロフィールアイコンと各種ボタンが上にずれて、ヘッダー画像と重なります。アイコンもかなり縮小されてスッキリします。位置がおかしい場合は、こちらに飛んでください。

ボタンとプロフィールアイコン画像を、CSSで上にずらした画像1

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

【余談】タイムラインの横幅調整コードとも併用可能

僕は、右側のサイドバーを非表示にして、タイムラインの横幅を大きく広げています。

その場合でも、本記事で紹介したコードが使えます。ただし、広げているサイズによってはアイコンの位置がずれるので、「プロフィールアイコン、各種ボタン（通知、DM）をヘッダーに重ねる」の「bottom」の数値を微調整しましょう。

タイムラインの横幅を広げるCSSと併用した画像

プロフィールアイコンが見切れる、位置がおかしい場合

人によっては、下記画像のようにアイコン画像が見切れるかもしれません。

ボタンとプロフィールアイコン画像を、CSSで上にずらした画像2

その場合は、コード内にある「プロフィールアイコン、各種ボタン（通知、DM）をヘッダーに重ねる」項目の「bottom」の数値を調整します。これで、いい感じに配置できるはずです。

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

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

プロフィールアイコンの画像サイズを調整したい場合は、「プロフィール画像の大きさ、位置調整」の「width」の数値を調整します。数値を大きくすると、画像サイズも大きくなります。

「top」が、プロフィールアイコン画像の位置調整です。サイズを変更したら、その分ずれると思うので調整します。

ライトテーマを使っている場合

ライトテーマをお使いの方は、各種ボタンの背景色、文字色が気に食わないと思います。僕はダークブルーを使っていて、そのテーマ用に最適化しているので、ライトテーマだと色が浮いてしまい、違和感です。

ボタンとプロフィールアイコン画像を、CSSで上にずらした画像3

その場合、「ボタンの色」の「background-color: rgb(30 46 62);」を調整します。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-label^="フォロー @"][role="button"] {
  background-color: rgb(235 245 255);
}

薄い水色になります。カラーコードなどはネットで調べてみてください。こちらのサイトとか、初心者でも見やすいと思います。カラーコードで指定する場合は、「background-color: #ebf5ff;」といった風になります。

ボタンとプロフィールアイコン画像を、CSSで上にずらした画像4

感想

以上、Twitterのプロフィールアイコン、各種ボタン（もっと見る、DM、通知、フォロー中、プロフィールを編集）を、ヘッダーに埋め込んでコンパクトにするCSSでした。

最近は、なんでもかんでもスッキリさせたい年頃です。

​2022年5月16日​​Twitter