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

2022年4月29日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どちらも一緒です。

/*フォロー・フォロワーページの高さ*/
div[role="dialog"] ._ab8w._ab94._ab99._ab9f._ab9m._ab9o {
  min-height: 727px !important;
  max-height: unset !important;
}

/*フォロー・フォロワーページの横幅*/
.po7qtp8z.po7qtp8z {
  width: 600px;
}

書き込めたら、右上の「×」でスタイルシートを閉じます。

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

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

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

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

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

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

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

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

横幅も広げた状態の画像

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

感想

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

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

Posted by ナポリタン寿司