Instagramのフォロー・フォロワーページを見やすく広げるCSS

2022年4月29日Stylebot&Stylus(CSS)

「Instagram」のアイコン

この記事では、「Instagram」のフォロー・フォロワー一覧ページを、見やすく広げるCSSについて書きます。

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

Instagramのフォロー中ページの高さ制限を廃止した画像

本記事で紹介するCSSを使えば、Instagram(PC版)のフォロー・フォロワーページの一覧を見やすく広げることができます。好きな高さ、幅にできます。

PCでInstagramのフォロー・フォロワーページを見ると、かなり狭い幅・高さで見にくいです。なんで、こんなデザインにしたのか疑問です。もっと高かったら見やすいんですけどね。CSSを使うことで、自由自在に変更できます。

通常のPC版Instagramのフォロー中(フォロワー)ページ画像

自分のPC上だけの変更で、元に戻したい時は、いつでも戻せます。

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

インストール方法

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

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

Firefox・Edgeをご利用の場合

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

「Chromeに追加」をクリックしてインストールします。

Stylebot - Chrome ウェブストア

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

フォロー・フォロワーページを広げるCSS

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

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

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

/*フォロー・フォロワーページの高さ*/
div[role="dialog"]>div>div[style*="max-height"][style*="min-height"] {
  min-height: 727px !important;
}

/*フォロー・フォロワーページの横幅*/
.x13wlyjk.x13wlyjk {
  width: 900px !important;
}

それぞれの数値を調整することで、横幅や高さを変えられます。自身のモニターサイズによって変えてみてください。

右上の「×」でスタイルシートを閉じます。

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

有効にした状態で、誰でもいいのでフォロー・フォロワーページを開きます。

Instagramのスクリーンショット
ナポリタン寿司のInstagram

高さ制限が撤廃されて、見やすくなります。1ページに表示されるアカウント名が増えます。

高さ制限が撤廃されて、見やすくなったインスタのフォロワーページ画像

「フォロー・フォロワーページの横幅」のコードは、人によっては不要かもしれません。横幅を調整するコードです。

書き込んだ場合は、下記画像のように横幅も広がります。横幅は広げなくていいという場合、「フォロー・フォロワーページの高さ」のコードだけ使います。

Instagramのフォロー・フォロワーポップアップの横幅を広げた画像

無効にしたい場合は、「www.instagram.com」をオフにします。

感想

以上、Instagramのフォロー・フォロワー一覧ページの高さ制限を廃止して、見やすくするCSSについてでした。

ちょくちょくInstagramは、セレクタ(CSS専門用語)を変えてくるので、いつの間にか使えなくなっている場合があります。その場合は、問い合わせから連絡していただけたらなと思います。

2022年4月29日Stylebot&Stylus(CSS)