PC1台で自由に人生をデザインするリクのブログ

Instagram Feedのスマホ表示をレスポンシブサイズにカスタマイズする方法

今回は自分自身の備忘録としての意味も含めて、WordPressプラグイン「Instagram Feed」のスマホ表示をレスポンシブサイズに設定する方法について解説していきます。実際にそういったキーワードで検索をかけてみると案外解説されている記事がなかったので、もし同様のカスタマイズを施したい誰かの参考になれば幸いです。

Instagram Feedのスマホ表示をレスポンシブサイズにカスタマイズする方法

まずそもそもの話として、Instagram Feedはデフォルトの状態ではどのような表示になっているのか?ということについて、スマホ画面のキャプチャを実際に確認してみましょう。

このようにしてみると一体何が何だかわからないかもしれませんが、InstagramをWordPressに埋め込むためのプラグイン「Instagram Feed」では、このように画像が大きく表示されるようデフォルトの設定が施されています。

でも、個人的にはなんだかスクロールが多くなってしまい億劫だなと感じたことや、何よりカラム数が少なく「インスタ感」があまりないなと思ったので、今回のカスタマイズに至ったところです。

実際にレスポンシブサイズに対応させると、埋め込まれたInstagramの画面が次のような表示に変更されます。

このようにして見ると一目瞭然で、まるでInstagramのホーム画面をそのまま埋め込んだかのように、画像がいくつかのカラムに分けて表示されるようになります。この方がどちらかといえばインスタ感があるということや、何より少ないスクロール幅でページを閲覧することができるようになるので、ブログを見ているユーザーにも快適な体験を提供することができますね。

ぜひ、このような表示にしたい!という場合は、ここからの解説を参考にインスタの表示をレスポンシブ対応させていきましょう(設定自体は一瞬で済みます)。

Instagram Feedをインストールしよう

まず前提として、プラグイン「Instagram Feed」をまだインストールしていないという場合には、次の記事を参考にプラグインのインストールを済ませておきましょう。

WordPressサイドバーにInstagramを表示させるプラグインを紹介

 

無事にインストールならびに有効化が済んだら、実際に設定を施していきます。

「Customize」から設定を施そう

最初にWordPressのダッシュボード画面から、左側のメニューバーにある「Instagram Feed」という項目をクリックしましょう。するとプラグインの設定画面が開かれるので、次のように「2.Customize」という項目をクリックしていきます。

 

すると、WordPressにInstagramを埋め込む際の詳細なカスタマイズ設定を施すことができる画面に移るので、その中から「Layout」という項目を見つけましょう。

そして、Layout内の一番下にある「Disable mobile layout」という項目が、今回設定すべきものにあたります。

 

こちらを直訳すると「モバイルレイアウトを消す」ということになるわけですが、「What does this mean?」という文字をチェックしてみると次のような文言が表示されます。

By default on mobile devices the layout automatically changes to use fewer columns. Checking this setting disables the mobile layout.

こちらをそのままGoogle翻訳さんに任せると、「デフォルトでは、モバイルデバイスではレイアウトが自動的に変更され、使用する列が少なくなります。 この設定をチェックすると、モバイルレイアウトが無効になります。」という意味だということがわかります。これはつまり、「この項目にチェックを入れると、カラム数が少なくなって画像が大きく表示されるよ」ということですね。

 

ここで僕自身も一瞬「ん?」となってしまったわけですが、どうやらInstagram Feedでは冒頭であげたような画像が大きく表示されてしまうパターンが「レスポンシブ対応した表示」となっているようです。

ですので結果として、今回この記事で解説していく内容については、実は「レスポンシブ設定を外す」ということになるわけです。まあわかりにくかったらあまり考えなくてもOKなので、とりあえず今回は「インスタっぽいカラム数のある表示をスマホでも実現する」という風に捉えていただければと思います。

 

ということで、今回は先ほどもお見せした「Layout」内にある「Disable mobile layout」という項目のチェックを外しておきましょう。チェックを外したら、忘れずに「変更を保存」もクリックしておいてくださいね。

 

これで無事にInstagramの表示を、レスポンシブサイズに設定することができました(設定上はレスポンシブ設定を解除しましたが…)。実際にスマホでの表示を確認してみると、次のように画像がカラム数に沿って並べられており、よりインスタらしいスタイリッシュなデザインになりましたね。

最後に

以上、Instagram Feedのスマホ表示をレスポンシブサイズにカスタマイズする方法ということで、非常にカンタンではありましたが設定方法について解説しました。いかがだったでしょうか?

レスポンシブ対応させるつもりだったのに実はレスポンシブ設定を外すことになるという、非常に矛盾しているような内容でしたが、無事に実現したいデザインを再現することができたと思います。細かい配慮ではありますが、単純にスクロールが短くなるということやインスタ感を演出するという目的に沿って設定をしていくことで、その配慮が読者に快適さを少しずつ与えていくことになるわけです。

そういった小さなこだわりの上に「質の高いブログ」というのは成り立っていくと思うので、ぜひ今回のInstagram Feedのカスタマイズについても参考になさってくださいね。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です