Instagramのフォロー・フォロワーページを見やすく広げるCSS
この記事では、「Instagram」のフォロー・フォロワー一覧ページを、見やすく広げるCSSについて書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。
本記事で紹介するCSSを使えば、Instagram（PC版）のフォロー・フォロワーページの一覧を見やすく広げることができます。好きな高さ、幅にできます。
PCでInstagramのフォロー・フォロワーページを見ると、かなり狭い幅・高さで見にくいです。なんで、こんなデザインにしたのか疑問です。もっと高かったら見やすいんですけどね。CSSを使うことで、自由自在に変更できます。
自分のPC上だけの変更で、元に戻したい時は、いつでも戻せます。
Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。
Chromeウェブストアからインストールできます。
https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
「Chromeに追加」をクリックしてインストールします。
右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
https://www.naporitansushi.com/stylebot/フォロー・フォロワーページを広げるCSS
「Instagram」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。
/*フォロー・フォロワーページの高さ*/
div[role="dialog"]>div>div[style*="max-height"][style*="min-height"] {
min-height: 727px !important;
}
/*フォロー・フォロワーページの横幅*/
.x13wlyjk.x13wlyjk {
width: 900px !important;
}それぞれの数値を調整することで、横幅や高さを変えられます。自身のモニターサイズによって変えてみてください。
右上の「×」でスタイルシートを閉じます。
再度拡張機能ボタンを押して、登録したサイト（例：www.instagram.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。
有効にした状態で、誰でもいいのでフォロー・フォロワーページを開きます。
高さ制限が撤廃されて、見やすくなります。1ページに表示されるアカウント名が増えます。
「フォロー・フォロワーページの横幅」のコードは、人によっては不要かもしれません。横幅を調整するコードです。
書き込んだ場合は、下記画像のように横幅も広がります。横幅は広げなくていいという場合、「フォロー・フォロワーページの高さ」のコードだけ使います。
無効にしたい場合は、「www.instagram.com」をオフにします。
感想
以上、Instagramのフォロー・フォロワー一覧ページの高さ制限を廃止して、見やすくするCSSについてでした。
ちょくちょくInstagramは、セレクタ（CSS専門用語）を変えてくるので、いつの間にか使えなくなっている場合があります。その場合は、問い合わせから連絡していただけたらなと思います。