【PC版Instagram】ホームの「おすすめの投稿」を非表示にするCSS
PC版「Instagram」のホームは、最初にフォローしている人の投稿が、時系列順で表示されます。それらの投稿が終わると、「以上です」と表示されて、それ以降はフォローしていない人の「おすすめの投稿」が続く仕様になっています。
読者様から、「おすすめの投稿を非表示にできますか？」と質問をいただいたので、CSSで消してみます。確かに、人によっては、無駄な時間を過ごしてしまう不要な要素かもしれません。いちお消せましたが、若干動作が怪しいです。それでもいいという方のみ利用しましょう。
本記事は、PCウェブサイト版での解説です。スマホ版やアプリ版ではありません。
下記記事にて、CSS以外を使って非表示にする方法を紹介しています。気になった方は、参考にしてみてください。
https://www.naporitansushi.com/instagram-home-recommended-po...インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」を利用します。
Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。
https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...「Chromeに追加」をクリックします。
「拡張機能を追加」をクリックします。
拡張機能のオーバーフローメニューに追加されたらOKです。
頻繁に開く場合は、拡張機能のオーバーフローメニューを開いて、「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。
詳しい使い方を知りたい方は、以下の記事を参考にしてみてください。
「Instagram」の「おすすめの投稿」を消す手順
「Instagram（インスタグラム）」にアクセスします。インストールした「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。以下のコードを書き込みます。
/*フォローしていない人の投稿非表示（おすすめの投稿）*/
main div>article:has(>div>div:nth-of-type(1)>div>div:nth-of-type(2)>div>div:nth-of-type(1)>div:nth-of-type(3)) {
display: none !important;
}
/*おすすめの投稿というテキスト非表示*/
main article+div>div:has(img[alt="チェックマーク"])+div {
display: none !important;
}
/*おすすめの投稿のロード中ボタン非表示*/
main ._aalg {
display: none !important;
}
/*下部に自動生成される余白除去*/
main div:has(>article) {
padding-bottom: 0 !important;
}本記事のCSSは僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。
もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で修正したいと思います。
おすすめ欄に表示される投稿内には、特定の目印が存在していました。その目印が含まれる投稿を非表示にすることで、おすすめの投稿を実質削除しています。
右上の「×」でスタイルシートを閉じます。
再度拡張機能ボタンを押して、登録したサイト（例：www.instagram.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。
「Instagram」のホームを開きます。フォローしている人の、最後の投稿までスクロールします。「以上です」の下にある「おすすめの投稿」が表示されなくなります。
ただし、「おすすめの投稿」は、「JavaScript」か何かで、常に表示しようと抗ってきます。今回のCSSだと、一瞬非表示にする力が負けてしまって、「おすすめの投稿」が表示される可能性があります。その後、「あっ、ダメだダメだ。ここは非表示にしなくちゃ…」って感じで、CSSが発動します。
表示させようとするインスタ側の抵抗と、CSSとの戦いにより、スクロールにちょっと悪影響があるかもしれません。
一瞬「おすすめの投稿」が表示されるせいで、フォローしている人の投稿下にある「以上です」より、下にスクロールできてしまったり、その後非表示になるせいで、「以上です」周辺にスクロールが戻ったり、ここらへんは不安定です。
投稿だけでなく、「以上です」の下にある「おすすめの投稿」というテキストも非表示にしています。
「おすすめの投稿」を非表示にしても、謎のぐるぐるロード中ボタンが、ページ下部に表示されたので、合わせて非表示にしています。「おすすめの投稿」を非表示にしている場合は、いくら待っても表示されないので、このロード中ボタンは不要です。
一時的に無効化したい場合は、右上の「Stylebot」アイコンを左クリック→「www.instagram.com」をオフにします。完全に使わなくなった場合は書き込んだコードを削除します。
【余談】フッター（最下部のバー）を非表示にするCSS
ページの一番下には、フッターと呼ばれるコンテンツがあります。各種リンクなどの情報が記載されています。人によっては不要かもしれません。同じくCSSを利用することで非表示にできます。
以下のCSSを追加で「Stylebot」のスタイルシートに書き込みます。
/*フッター非表示*/
footer {
display: none !important;
}本コードの注意点
「Instagram」は、結構複雑で、簡単にCSSが設定できないような作りになっています。例えば、以下のような感じです。
- 分かりやすいクラス名がないので、探すだけでも一苦労
- 他の要素と同じクラスが使われていることで、特定のポイントを指定するのが難しい
- 頻繁にクラス名（構造）が変わるので、対応に追われる
ベテランさんなら余裕かもしれませんが、僕みたいなCSS初心者には、かなりハードルが高いです。「JavaScript」などを使えば、もっと簡単にできそうな感じですが、僕は、CSSしかできないので、何とか食いついている状態です。
いずれ、完全にできなくなる可能性もあります。とりあえず使ってみて、正常に動かないor思わぬところが消える場合は、問い合わせより教えていただければなと思います。僕の力がある限り、頑張ってみたいですが、できなかったらすみません。
感想
以上、PC版「Instagram」のホームに表示される「おすすめの投稿」を非表示にするCSSでした。
余談ですが、同様にCSSを使って、検索結果ページの「人気投稿」を消すことも可能です。
本記事で利用させていただいたアイコン画像:社会-メディアは instagramでは スクエア – ソーシャルメディアとロゴ アイコン