【広告】

Amazonブラックフライデーが12月2日まで開催中です!

個人的には、Anker製品か、コカ・コーラがかなり安くなっているのでおすすめです!

高級キーボードで有名な東プレが最近発売した「REALFORCE R3」もセールをやっていました!詳しくはこちらの記事を確認してみてくださーい。

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

2021年11月20日Stylebot

Twitter のアイコン

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

CSS を使います。

キーワード検索を左側に移動

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

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

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

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

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

注意点

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

ダウンロード方法

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

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

Stylebot のインストール

使い方

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

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

Stylebot のオプション

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

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 の表示設定は、サイドバーの「もっと見る」 → 表示 からアクセスできます。

もっと見る - 表示

自分が見やすい方のテーマを選びましょう。

表示をカスタマイズする

コードを貼り付けたら自動で、キーワード検索ボタンが左側に移動します。パソコンのディスプレイによっては表示位置がずれる可能性があります。下記画像だとちょっと左側にいきすぎですね。

キーワード検索ボタンが左に移動する

そんな時は、CSSの「検索欄を左に移動」の中にある「right: 1060px;」の数字を調整しましょう。

「right: 1060px;」で調節する

僕の環境では、900px にするといい感じに配置されました。ここの数値は人によりけりなので、自分で確認しながら調整してみましょう。

数字は半角数字で入力します。数字以外は無暗に弄らないように注意です。

900pxだとちょーどいい感じに配置される

話題を検索する時、実際に検索した時は通常通り中央上に表示されます。

話題を検索

以下、簡単にCSS の意味を書いときます。どうでもいいよんという方は読まなくてOKです。

検索欄を左に移動

キーワード検索ボタンを左に移動するCSS です。これがないと始まりません。

サイドバーのメニュー項目を少し下にずらす

検索ボタンを移動しただけだと、左側のサイドバーにあるメニュー項目たちとぶつかってしまいます。そこで重ならないように「ホーム」や「話題を検索」のメニュー項目を下にずらしています。

メニュー項目の表示順位(z-index)を下げる

サイドバー左側の主張が激しかったせいで、検索ボタンを移動したところで検索できない問題が発生しました。そこで、サイドバーのメニュー項目のレイヤーを検索欄よりも下の階層にしました。これで検索機能もちゃんと使えるようになります。

左上のTwitter ロゴ画像の非表示

これは人によっては不要なCSS です。個人的に左上のTwitter ロゴはいらなかったので非表示にしただけです。

まとめ

以上、Twitter の検索ボタンを左側に移動する方法についてでした。

Posted by ナポリタン寿司