Travelogue

InstaWidgetをレスポンシブにした時に崩れるケースと解決方法

公開日:

InstaWidget(インスタウィジェット)はインスタへ投稿した写真を自分のサイトに読み込んで表示できるブログパーツです。
この記事では、InstaWidgetの簡単な紹介やレスポンシブ対応方法と、レスポンシブにした時になぜか崩れるケースとその回避方法について書きます。

InstaWidgetは簡単でシンプルで使いやすい

Webサイトにインスタの写真を埋め込む時、とにかく簡単に済ませる方法としてInstaWidgetはかなり使えるサービスだと思います。
使い方は簡単すぎて解説不要でしょう。

さらに、余計なものを省いて写真のサムネイルだけに出来るのが良いです。
例えばユーザー名、フォローボタン、枠、背景とかを出さなくて済みます。
自分のサイトのデザインに溶け込ませるために、ここまでシンプルに出来るのは非常に使いやすいと思います。

レスポンシブにも簡単に対応できる

InstaWidgetをレスポンシブにしたい時は、コード生成画面の「ブログパーツ幅」という欄で何かするのではなく、発行された埋め込みコードをちょっとだけ編集します。
やり方は公式サイトのよくある質問に書いてあります。

例えばコード発行画面の「ブログパーツ幅」をデフォルトの300pxのままでコードを生成したのであれば、発行された埋め込みコードの中に「width=300px」というところがあるはずです。
これを「width=100%」に変更すればOKです。

レスポンシブで表示が崩れるケース

ところでこのInstaWidgetは、レスポンシブで使おうとした時になぜか表示が崩れる時があるようです。
そんなに多くのパターンを試したわけではないので限定的な状況しか把握してませんが、とりあえず自分が崩れた時の設定は以下の通り。

  • ブログパーツ幅を500pxにしてコードを発行し、発行されたコードをwidth=100%に変更
  • 写真アルバム以外の項目はすべて「非表示」を選択
  • 写真間の間隔は5pxにした
  • レイアウトは6×2にした

ウィンドウが大きい状態では問題ないのですが、

ウィンドウが大きい状態では問題ない

ウィンドウを狭くすると、カラム落ち?のように右端のサムネイルが一段下の行になります。

ウィンドウを狭くした状態

しかし、必ずしもこの表示崩れが発生するわけではないような気がして、いくつか別のパターンを試したところ、以下のようにすると表示崩れはおきませんでした。

  • 写真間の間隔を0pxにすると表示崩れは起きない
  • 写真間の間隔を5pxにしたとしても、ブログパーツ幅を300pxにしてコードを発行し、発行されたコードをwidth=100%に変更すると表示崩れは起きない

繰り返しになりますが、そんなに多くのパターンを試したわけではなく、あくまで自分が試した限定的な設定状態の例ですので、他の設定で表示崩れが起きる・起きないというケースもあると思います。
ちなみに今回はMacのChromeでのみの確認です。

というわけで結論ですが、写真間の間隔を空けるにしろ空けないにしろ、どうせwidth=100%にするのであれば、設定画面のブログパーツ幅は300pxのままにしてコードを発行するのが良さそうです。

右と下に余白が開くケース

これは表示崩れというわけではありませんが、InstaWidgetを設置すると右と下にちょっと余白が空いてしまうケースがあります。

右と下に余白が開くケース

まず、右側の余白ですが、これは写真間の間隔を開けた場合に発生するようです。
設定画面で写真間の間隔を0pxにすると、ウィンドウ幅ぴったりの100%になってくれます。

下側の余白ですが、これはGoogleMap等を読み込んだ時とかにも出てくるiframeの余白です。
CSSで以下のようにすれば下側の余白は無くなります。

iframe {
    vertical-align: bottom;
}

ただ、ブラウザのウィンドウがPCサイズくらいの場合はこれで問題ないと思いますが、スマホくらいまで狭くした時にはもっと大きめの余白が下側に出ることがあるようです。
詳しくは検証していないのですが、CSSで下に続く要素のmargin-topをマイナスの値で上にずらし、ウィンドウ幅に応じて調整するのが簡単そうです。
この時、要素がInstaWidgetの下に隠れてしまう場合は、z-indexで上にもってきましょう。
z-indexはpositionがstaticだと効かないので、relativeとかにすると適用されます。

Copyright © 2004-2019 Travelogue.

Pagetop