【Twitter】検索ボタンを左側に表示する方法。CSSを使ってみよう

2021年11月20日2021年11月29日Stylebot

この記事では、パソコン版Twitter の検索ボタンを左側に表示する方法について書きます。

CSS を使います。

ウェブサイトをCSS で自由にカスタマイズできるChrome拡張機能「Stylebot」を使うことで、Twitter の検索ボタンを左側に移動できます。

現在、パソコン版Twitter の検索ボタン（キーワード検索）はサイドバー右側に表示されています。その検索ボタンを左側のサイドバーの上に移動できます。

Stylebot は、初心者でも簡単にCSSを使える拡張機能です。めちゃくちゃ便利です。Twitter だけでなく、色々なサイトを自由に自分好みにカスタマイズできます。これをするためだけに、CSS を少し学んでもいいくらいの価値はあります。

Stylebot については簡単ですが、以下の記事に書いているので参考にしてみてください。

参考：【Twitter Pro】「プロモーションする」を非表示にする方法。CSSを使ってみよう！

注意点

本記事を書いているのは、CSS初心者です。そのため、上級者さんからすると汚いCSS と思われるかもです。あくまでCSS全く分からない初心者さん向けです。

1. ダウンロード方法
2. 使い方
3. まとめ

ダウンロード方法

以下のサイトからダウンロードできます。

Stylebot - Chrome ウェブストア

ウェブの外観を瞬時に変更

https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...

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

使い方

インストールできたら、Twitter にアクセスします。

Stylebot のアイコンをクリック → Stylebot を開くをクリックします。

CSS を書き込める場所が表示されます。

以下のCSS を丸ごとコピペします。初心者なりにせせこらと作成したCSSです。

/*検索欄を左に移動*/
.css-1dbjc4n.r-1awozwy.r-aqfbo4.r-yfoy6g.r-18u37iz.r-1h3ijdo.r-6gpygo.r-15ysp7h.r-1xcajam.r-ipm5af.r-1hycxz.r-136ojw6 {
    position: relative;
    z-index: 100;
    width: 250px;
    right: 1060px;
    padding-top: 10px;
}

/*サイドバーのメニュー項目を少し下にずらす*/
.css-1dbjc4n.r-aqfbo4.r-1pi2tsx.r-1xcajam.r-ipm5af {
    top: 60px;
}

/*検索欄が使えるように、メニュー項目の表示順位(z-index）を下げる*/
header.css-1dbjc4n.r-obd0qt.r-16y2uox.r-lrvibr.r-1g40b8q {
  position: relative;
  z-index: 0;
}

/*左上のTwitter ロゴ画像の非表示*/
.css-1dbjc4n.r-dnmrzs.r-1vvnge1 {
    display: none;
}

/*左下のユーザーアイコン＋ユーザー名を少し上に移動*/
div.css-18t94o4.css-1dbjc4n.r-1awozwy.r-sdzlij.r-6koalj.r-18u37iz.r-1ny4l3l.r-xyw6el.r-o7ynqc.r-6416eg {
    bottom: 100px;
  }

注意点

このCSS は、Twitter の表示設定がダークブルー、かつフォントサイズが普通でないと動作しません。

テーマが、白だとCSS を書いても動作しません。

11月21日追記

ライト用のCSS も作成しました。ホワイトのテーマ（デフォルトテーマ）をお使いの方は、以下のCSS を利用してみてください。

コードを見る

/*-----------テーマカラー白用のCSS--------------*/
/*---------------------------------------------*/
/*---------------------------------------------*/
/*検索ボタンを左側に移動*/
div.css-1dbjc4n.r-1awozwy.r-aqfbo4.r-14lw9ot.r-18u37iz.r-1h3ijdo.r-6gpygo.r-15ysp7h.r-1xcajam.r-ipm5af.r-1hycxz.r-136ojw6 {
    position: relative;
    z-index: 100 !important;
    width: 250px;
    right: 900px;
    padding-top: 10px;
  }


/*サイドバーのメニュー項目を少し下にずらす*/
.css-1dbjc4n.r-aqfbo4.r-1pi2tsx.r-1xcajam.r-ipm5af {
    top: 60px;
  }

/*検索欄が使えるように、メニュー項目の表示順位(z-index）を下げる*/
header.css-1dbjc4n.r-obd0qt.r-16y2uox.r-lrvibr.r-1g40b8q {
  position: relative;
  z-index: 0;
}

/*左上のTwitter ロゴ画像の非表示*/
.css-1dbjc4n.r-dnmrzs.r-1vvnge1 {
    display: none;
  }

/*左下のユーザーアイコン＋ユーザー名を少し上に移動*/
div.css-18t94o4.css-1dbjc4n.r-1awozwy.r-sdzlij.r-6koalj.r-18u37iz.r-1ny4l3l.r-xyw6el.r-o7ynqc.r-6416eg {
    bottom: 100px;
  }
/*--------------------------------------------------*/
/*-----------テーマカラー白用のCSS終了----------------*/

Twitter の表示設定は、サイドバーの「もっと見る」 → 表示からアクセスできます。