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

Stylebot&Stylus

Stylebotのアイコン

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

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

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

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

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

通常のPC版Instagramのフォロー中(フォロワー)ページは、高さ制限が設けられていて見にくい

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

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

前提

この記事は、既にStylebotをインストールして、なおかつ簡単な使い方を知っている前提です。ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能です。

まだインストールしていない方は、以下の記事を参考にしてみてください。

Firefox・Edgeをご利用の場合

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

Vivaldiブラウザを利用していて、サイドバーのウェブパネルにもCSSを適用したい場合は、「Stylus」がおすすめです。こちらは、ウェブパネル内にもCSSを適用できます。

CSS

Instagramにアクセスします。Stylebotを使っている人は、右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

拡張機能ボタン Stylebotを開く

Firefoxで、Stylusを使っている方は、右上の拡張機能アイコン→「次のスタイルを書く」の「」をクリックします。新しいタブでスタイルシートが表示されるので、書き込んでいきます。書き込めたら、忘れずに「保存」をクリックします。

書き込むコードは、以下になっています。Stylebot、Stylusどちらも一緒です。

/*Instagramのフォロー・フォロワーページを見やすく広げる*/
div[aria-label="フォロワー"] .qF0y9.Igw0E.IwRSH.eGOV_.acqo5.vwCYk,
div[aria-label="フォロー中"] .qF0y9.Igw0E.IwRSH.eGOV_.acqo5.vwCYk {
  max-height: unset !important;
}

/*【必要に応じて使う】フォロー・フォロワーページの横幅*/
div[aria-label="フォロワー"],
div[aria-label="フォロー中"] {
  min-width: 50% !important;
}

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

Stylebot 「Instagramのフォロー・フォロワーページを見やすく広げるコード」を書き込んだ画面

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

Stylebot 「www.instagram.com」がオンになっていることを確認する

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

Instagramにアクセスして、「フォロワー」、「フォロー中」ページを開く
ナポリタン寿司のInstagram

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

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

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

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

横幅も広げた状態の画像

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

感想

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

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

Posted by ナポリタン寿司