【Instagram】4列グリッド表示&画像保存できるようにする拡張機能

2022年3月2日Instagram関連

Layoutify: Improved Layout for Instagramのアイコン

この記事では、Instagram(PC版ウェブサイト)を4列のグリッド表示して見やすくするChrome拡張機能「Layoutify: Improved Layout for Instagram」について書きます。

PC版Instagramがぐぐっと見やすくなります。

Layoutify: Improved Layout for Instagramのスクリーンショット

PC版Instagramのデザインを4列のグリッド表示にするChrome拡張機能です。

インストールするだけで機能が有効になり、インスタグラムのデザインが、ごっそり変化します。4列にすることで、PCの横幅を最大限活用できます。1ページに表示される投稿数がぐっと増えるので、サクサク他の方の投稿を確認できます。

いいね、コメントの確認等はこれまで通りできます。見やすくレイアウトを変更するだけです。ダブルクリックでいいねできる機能はそのまま使えます。

設定からコメントのオンオフ、ダークモードの切り替え、1列あたりの投稿数、横幅などを調整できます。4列ではなく、6列にするといったこともできます。

ストーリーは、右側にサイドバーとして配置されます。マウスを乗せるとひょっこり表示されます。

まさに、PC版Instagramのデザインを最適化する拡張機能です。CSSを利用すれば、自分でもデザインをグリッド表示にできますが、プログラミングができない方にとっては、かなり大変な作業です。

本拡張機能を使うことで、CSSを全く理解できていなくても、簡単にグリッド表示にできます。「PCで見たときのInstagramのデザインをもっと見やすくしたい!」という方におすすめです。

また、本拡張機能を導入することで、右クリック→画像の保存ができるようになります。

Instagram公式は、画像の右クリックに対応していません。(2022年3月時点)あくまで、スマホ用に最適化されており、PC用サービスではないためです。普通のウェブサイトだと、画像の右クリックで「名前を付けて画像を保存」できます。

本拡張機能を導入することで、画像として認識してくれるようになるので、右クリックからの保存ができるようになります。

提供元:Jacob “kurtextrem" Groß
記事執筆時のバージョン:3.11.3(2022年3月23日)

ダウンロード方法

Chromeウェブストアからインストールできます。

本拡張機能は、Chrome拡張機能のみで、Firefoxアドオンは公開されていないので気を付けてください。

「Chromeに追加」をクリックします。

Layoutify: Improved Layout for Instagramのインストール - Chrome ウェブストア

拡張機能ボタンが追加されればOKです。

拡張機能ボタンが追加されればOK

設定にアクセスする時以外は利用しないので、右クリック→ボタンを隠すで非表示にしておくといいかもしれません。

使い方

Instagramにアクセスします。本拡張機能を導入する前に、開いていた場合は、ページをリロード(F5)します。

グリッド表示

拡張機能を導入した状態で、インスタにアクセスすると、グリッド表示が適用された画面が表示されます。

Layoutify導入前と導入後の比較画像

マウスのスクロール、画像上のダブルクリックでの「いいね」など問題なく利用できます。説明文・コメントも表示されます。

4列にすることで、1ページに表示される投稿の件数が増えます。マウスを大量にスクロールしなくても、サクッと投稿された内容を閲覧できます。

「いいね」も、より素早く多くの人にできます。

サイドバー(ストーリー)

ストーリーは、右側にサイドバーとして配置されます。マウスを乗せると、ひょっこり顔を出します。

僕の環境では、背景が透明になっていたり、完全にサイドバーが展開されないなど、若干のデザイン崩れがありましたが、許容範囲です。気になりません。

ストーリーをクリックすると、大画面で表示されます。

InstagramのストーリーをPCで確認してみた画像

画像の保存

保存したい画像を右クリックします。今までは、画像として認識してくれなかったので、ページの右クリックメニューが表示されていました。

本拡張機能を導入した後だと、画像として認識してくれるので、「名前を付けて画像を保存」の項目が表示されます。

Instagramの画像の右クリック 名前を付けて画像を保存

問題なく画像を保存できます。

インスタグラムの画像を保存できる

設定

Instagramのプロフィールアイコン横の三点ボタンか、Layoutify: Improved Layout for Instagramのアイコン拡張機能ボタンの右クリック→オプションから設定に飛べます。

Layoutifyの設定ページアクセス方法

プロフィール横の三点ボタンからアクセスした場合は、さらに右上の「Options」をクリックする必要があります。

Layoutify Options

設定画面が開きます。

Layoutifyの設定画面

「ここを見ておくといいかも?」という項目に絞って書きます。設定を反映させるには、Instagramのページをリロード(F5)する必要があります。

Layoutify: Improved Layout for Instagramの設定項目
Watch in Background?バッググラウンド通知を有効にするかどうか。オフにすると、インスタを閉じている時に通知が来ない
Enable Night Themeナイトテーマ(ダークモード)の有効化
Night Mode Start Hourナイトモードの開始時間(例:夜19時から開始したい場合は、「19」と入力)
Night Mode End Hourナイトモードの終了時間(ずっとナイトモードにしたい場合は、開始と同じ時間を指定する)
System Night Modeシステムのテーマ設定に合わせる(Windowsでダークにしている場合は、自動的にインスタもダークになる)
Show pictures only写真のみ表示(文章非表示)
Hide all Storiesすべてのストーリーを隠す?(サイドバーのデザイン)
No Space between Posts投稿と投稿の間の余白を消す
Remove all style modificationsスタイルの変更を全て削除する(一時的に拡張機能の無効化)
Posts per row1行あたりの投稿数
4-Row Posts Width4列のポスト幅
2-Row Posts Width2列のポスト幅

Enable Night Theme(ダークモード)

背景を黒にして、ダークモードにします。目に優しいです。

インスタのダークモードとライトモードの比較画像

ブラウザ、Windowsをダークモードにする方法は、下記記事を参考にしてみてください。

合わせて読みたい

Instagramをダークモードにする専用のChrome拡張機能「Night Mode for Instagram」というのもあります。「グリッドとかどうでもいいから、とにかくダークにしたい!」といった方は、こちらがおすすめです。

導入するだけでダークモードになるシンプルな拡張機能です。

Show pictures only(写真のみ表示)

オンにすると、文章が非表示になります。投稿写真だけ見れればOKな人は、オンにした方がすっきりするのでおすすめです。

Show pictures only(写真のみ表示)

個人的には、インスタは写真だけで十分だと思っているので、設定で文章非表示にできるのはありがたいです。

Hide all Stories(サイドバーのおすすめユーザーの非表示)

翻訳によると、「全てのストーリーを隠す」だそうです。

しかし、CSSの不具合か、作者のミスなのか分かりませんが、実際はサイドバーにある「おすすめユーザー」が非表示になりました。ストーリーはそのまま閲覧できます。

Hide all Stories(サイドバーのおすすめユーザーの非表示)

おすすめユーザーが不要な方は、オンにした方がすっきりします。

No Space between Posts(投稿間の余白をなくす)

オンにすると、投稿と投稿の間にある余白をなくして、ぴったりくっつくようになります。

No Space between Posts(投稿間の余白をなくす)

Remove all style modifications(一時的に機能オフ)

オンにすると、本拡張機能が一時的に無効になります。通常のInstagramのデザインが表示されます。

Remove all style modifications(一時的に機能オフ)

再び使いたくなったら、オフにしましょう。

Posts per row(グリッド数)

1行に表示する投稿数を設定できます。デフォルトでは4列になっています。

2列、6列にした時の比較画像を貼っておきます。

Posts per row(グリッド数) 2列と6列表示の比較画像

感想

以上、PC版Instagramのデザインを見やすいように刷新するChrome拡張機能「Layoutify: Improved Layout for Instagram」についてでした。

最初は、CSSを書いて実装していたんですが、自分の力だと限界がありました。そこで、「Chrome拡張機能でどなたかが公開してないかな?」と思い、調べてみると、本拡張機能にたどり着きました。

自分で書いていた時と違って、動作も安定していて、おすすめです。

Posted by ナポリタン寿司