【Instagram】インスタを4列グリッド表示にして見やすくするCSS

2022年2月24日Stylebot&Stylus

Stylebotのアイコン

この記事では、Instagram(インスタグラム)を1列表示から、4列のグリッド表示にするCSSについて書きます。

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

PCで見たときのInstagramのデザインを4列グリッド表示にしてみた画像

PCで見たときのInstagramのデザインを、4列のグリッド表示にするCSSです。

4列にして、PCの横幅を最大限活用するので、見やすくなります。

画像上のダブルクリックで「いいね」する機能は、これまで通り利用できます。

通常のデザインだと、画像の大きさの関係で、1ページに1つくらいの投稿しか表示されません。PCで見たときに、かなり不便です。

横に並べることで、マウスのスクロール量が減ります。

CSSでレイアウトを調整しているだけなので、元に戻したい時は、いつでも戻せます。

「PCでインスタ結構見るけど、今よりもマウスのスクロール量を減らしたい!」という方におすすめです。

前提

この記事は、既にStylebotをインストールして、なおかつ簡単な使い方を知っている前提です。

ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能です。

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

ポイント

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

こちらは、ウェブパネル内にもCSSを適用できます。

CSS

書き込むコードは、以下になっています。

/*-----------------------------------
グリッド表示(4列)
-------------------------------------*/

/*グリッド表示メイン*/
div.cGcGK>div>div {
	display: grid;
	grid-auto-columns: min-content !important;
	grid-column-gap: 40px !important;
	grid-template-columns: 300px 300px 300px 300px !important;
}

/*全体をちょっと右に寄せる*/
section._1SP8R.C3uDN.j9XKR {
	margin-left: 110px;
}

/*文章非表示*/
.cv3IO {
	display: none !important;
}

/*投稿ブロック(影+角丸化)*/
article[role="presentation"] {
	box-shadow: -3px 10px 8px #c8c8c8;
	border-radius: 10px;
	overflow: hidden;
}

/*-----------------------------------
グリッド表示(4列)終了
-------------------------------------*/


/*-----------------------------------
ストーリー部分関連
-------------------------------------*/
/*ストーリーの横幅リセット*/
.C3uDN, .j9XKR {
	max-width: none !important;
}

/*ストーリーの横幅を新規に調整*/
.cGcGK {
	max-width: 80% !important;
}

/*ストーリーの中身の横幅*/
.ku8Bn {
	display: block !important;
}

/*ストーリー角丸化*/
.zGtbP.IPQK5.VideM {
	border-radius: 10px;

}

/*-----------------------------------
ストーリー部分関連終了
-------------------------------------*/


/*-----------------------------------
いらない要素非表示
-------------------------------------*/

/*サイドバーのおすすめとか*/
main section .COOzN.MnWb5.YT6rB,
/*おすすめ*/
._8Rm4L.bLWKA.vboSt._6E_wP.ccgHY.GZkEI,
/*「コメントを追加」非表示*/
section.sH9wk._JgwE {
	display: none !important;
}

/*-----------------------------------
いらない要素非表示終了
-------------------------------------*/

以下画像のようになればOKです。

インスタグラム4列グリッド表示CSSをStylebotに書き込む

書き込むだけで、CSSが適用されて、デザインが変化します。

グリッド表示CSS 適用前と適用後の比較画像

動画を貼っておきます。画像上でダブルクリックすると、「いいね」します。

コメント・文章表示

上記CSSは、投稿のコメント・説明文が非表示になります。

僕は、画像を見るためにInstagramを利用しているので、コメントは不要です。

もし、文章も見たい場合は、上記CSSの中にある以下のコードを探してください。

/*文章非表示*/
.cv3IO {
	display: none !important;
}

見つけたら、こちらのコードを以下のように書き換えます。

/*文章非表示
.cv3IO {
	display: none !important;
}*/

コードの文字色が緑色になるかと思います。コメントアウトといって、コードを使わないという意味です。

Instagramの文章非表示コードをコメントアウトさせる

文章が表示されます。

コメント・説明文が表示される

画像を大画面で見る

4列にすることで、デフォルトのデザインと比べて、1つ1つの投稿サイズがかなり小さくなっています。

そこで、いざという時に画像を拡大して確認する方法を紹介します。

拡大したい投稿の右上の三点ボタンをクリックします。

投稿の右上にある三点ボタンをクリック

「投稿へ移動」をクリックします。

「投稿へ移動」をクリック

画像が大きく表示されます。

インスタの投稿を拡大画像で確認できる

注意点

今回紹介したCSSの注意点です。

マウスのスクロールが少ない場合、正常にスクロールされず、元に戻ってしまいます。何か対策があるかもしれませんが、僕の力では無理でした。

グリッド表示CSSの欠点 少ないスクロールだとページが元に戻って正常にスクロールされない

よって、グリッド表示にした時は、”しっかりスクロールする”ことが大切です。しっかりスクロールすると、ちゃんと下にスクロールされます。

感想

以上、Instagramの投稿を1列から4列表示にするCSSについてでした。

「インスタはスマホで見るもの~」というのが公式の考えなのか、PC版のデザインが少しおろそかな気がします。

いずれ、オプションでグリッド表示が実装されたら嬉しいなと思います。

Posted by ナポリタン寿司