Instagramのフォロー・フォロワーページを見やすく広げるCSS
この記事では、Instagramのフォロー・フォロワー一覧ページを見やすく広げるCSSについて書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。
本記事で紹介するCSSを使えば、Instagram（PC版）のフォロー・フォロワーページの一覧を見やすく広げることができます。好きな高さ、幅にできます。
PCでInstagramのフォロー・フォロワーページを見ると、かなり狭い幅・高さで見にくいです。なんでこんなデザインにしたのか疑問です。もっと高かったら見やすいんですけどね。CSSを使うことで、自由自在に変更できます。
自分のPC上だけの変更で、元に戻したい時は、いつでも戻せます。
Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。
前提
この記事は、既にStylebotをインストールして、なおかつ簡単な使い方を知っている前提です。ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能です。
まだインストールしていない方は、以下の記事を参考にしてみてください。
Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
Vivaldiブラウザを利用していて、サイドバーのウェブパネルにもCSSを適用したい場合は、「Stylus」がおすすめです。こちらは、ウェブパネル内にもCSSを適用できます。
CSS
Instagramにアクセスします。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）がオンになっていることを確認します。オンになっている間は有効になっているということです。
有効にした状態で、誰でもいいのでフォロー・フォロワーページを開きます。
高さ制限が撤廃されて、見やすくなります。1ページに表示されるアカウント名が増えます。
「フォロー・フォロワーページの横幅」のコードは、人によっては不要かもしれません。横幅調整コードです。
書き込んだ場合は、下記画像のように横幅も広がります。横幅は広げなくていい場合は、「フォロー・フォロワーページの高さ」のコードだけ使います。
無効にしたい場合は、「www.instagram.com」をオフにします。
感想
以上、Instagramのフォロー・フォロワー一覧ページの高さ制限を廃止して、見やすくするCSSについてでした。
ちょくちょくInstagramは、セレクタ（CSS専門用語）を変えてくるので、いつの間にか使えなくなっている場合があります。その場合は、コメント欄や問い合わせから連絡していただけたらなと思います。