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

2022年5月16日Stylebot&Stylus

Stylebotのアイコン

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

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

プロフィールアイコンをヘッダーに埋め込んだイメージ画像

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

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

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

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

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

インストール方法

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

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

Firefox・Edgeをご利用の場合

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

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

Stylebot - Chrome ウェブストア

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

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

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

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

/*プロフィールアイコン、各種ボタン(通知、DM)をヘッダーに重ねる*/
.css-1dbjc4n.r-1habvwh.r-18u37iz.r-1w6e6rj.r-1wtj0ep {
  position: absolute !important;
bottom: 27em !important;
}

/*プロフィールアイコンと各種ボタンを横並びにする*/
.r-1w6e6rj {
  flex-wrap: nowrap;
}

/*プロフィール画像の大きさ*/
.r-1xce0ei {
    width: 30%;
}

/*プロフィールのヘッダー画像の角丸具合*/
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^="フォロー中"] {
  background-color: rgb(30 46 62);
}

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

Stylebot Twitterのプロフィールアイコンと各種ボタンをヘッダー内に移動するコードを書き込んだ画面

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

Twitterのプロフィールページを開きます。自身、別の方、僕のページなど、どのページでもOKです。プロフィールアイコンと各種ボタンが上にずれて、ヘッダー画像と重なります。アイコンもかなり縮小されてスッキリします。

Twitterのプロフィールアイコンと各種ボタンがヘッダーの上部に埋め込まれる

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

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

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

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

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

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

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

ディスプレイによっては、プロフィールアイコンが見切れる

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

「プロフィールアイコン、各種ボタン(通知、DM)をヘッダーに重ねる」の「bottom: 27em」を調整する

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

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

例えば、「width: 50%;」にした時の画像を貼っておきます。サイズを変更すると、その都度、位置の微調整が必要です。

プロフィールアイコンを「width: 50%;」にした画像

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

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

本記事のCSSをそのまま適用すると、ライトテーマの時に、ボタン色が違和感

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

「background-color: rgb(30 46 62);」の部分で色調整できる

例えば、薄い水色にする場合、以下のコードになります。

/*ボタンの色*/
div[aria-label="もっと見る"],
div[aria-label="メッセージ"],
div[aria-label="ツイート通知をオンにする"],
/*プロフィールを編集*/
a[data-testid="editProfileButton"],
/*フォロー中*/
div[aria-describedby^="id__"][aria-label^="フォロー中"] {
  background-color: rgb(235 245 255);
}

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

ボタンの背景色を、薄い水色にした画像

感想

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

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

Posted by ナポリタン寿司