【Instagram】インスタを4列グリッド表示にして見やすくするCSS
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です。
書き込むだけで、CSSが適用されて、デザインが変化します。
動画を貼っておきます。画像上でダブルクリックすると、「いいね」します。
コメント・文章表示
上記CSSは、投稿のコメント・説明文が非表示になります。
僕は、画像を見るためにInstagramを利用しているので、コメントは不要です。
もし、文章も見たい場合は、上記CSSの中にある以下のコードを探してください。
/*文章非表示*/
.cv3IO {
display: none !important;
}見つけたら、こちらのコードを以下のように書き換えます。
/*文章非表示
.cv3IO {
display: none !important;
}*/コードの文字色が緑色になるかと思います。コメントアウトといって、コードを使わないという意味です。
文章が表示されます。
画像を大画面で見る
4列にすることで、デフォルトのデザインと比べて、1つ1つの投稿サイズがかなり小さくなっています。
そこで、いざという時に画像を拡大して確認する方法を紹介します。
拡大したい投稿の右上の三点ボタンをクリックします。
「投稿へ移動」をクリックします。
画像が大きく表示されます。
注意点
今回紹介したCSSの注意点です。
マウスのスクロールが少ない場合、正常にスクロールされず、元に戻ってしまいます。何か対策があるかもしれませんが、僕の力では無理でした。
よって、グリッド表示にした時は、”しっかりスクロールする”ことが大切です。しっかりスクロールすると、ちゃんと下にスクロールされます。
感想
以上、Instagramの投稿を1列から4列表示にするCSSについてでした。
「インスタはスマホで見るもの～」というのが公式の考えなのか、PC版のデザインが少しおろそかな気がします。
いずれ、オプションでグリッド表示が実装されたら嬉しいなと思います。