Smash Balloon Social Photo Feedの表示崩れの対応方法

Smash Balloon Social Photo Feedで画像が崩れちゃうにゃん

WordPressにInstagramのフィード投稿を埋め込むプラグインといえば「Smash Balloon Social Photo Feed」が有名ですよね。無料で使え、フィードの表示数なども無料範囲でカスタマイズ可能な便利なプラグインです。

このSmash Balloon Social Photo Feedを使ってフィードを埋め込んだところ、「表示が崩れている」「2枚の投稿が重なって見える」という事象がありました。

にゃん花子のサイトで崩れた時の対応策をご紹介するにゃん！

こんなことで困ったら….

私の方でよくあった事象は、下記の2パターン。同じようなパターンでお困りの際は、参考になると思います。

対応はCSSを追加するだけ

対応としては、Smash Balloon Social Photo FeedにCSSを追加するだけ！

1#sb_instagram .sbi_photo img{
2width: 100%;
3height: 100%; /*高さを指定*/
4object-fit: cover; /*画像を表示範囲に合わせる*/
5}

縦長画像は正方形にトリミングされて、キレイに揃いました！お疲れ様です！

にゃん花子

FacebookInstagram

「コード書くには苦手」「コピペで動けば、それでOK」な、ノンプログラマー向け | マニアック・ピンポイントなWordpress TIPSが多め｜文系から独学でWeb屋さんになった人｜インフラ分野のわかるWebディレクター｜主にWordpressのサイト立ち上げ、リプレイス、運用をしています｜Shopifyもはじめました | アニメ・映画・ドラマを聴きながら、ブツブツ呟きながら、制作するのが好きです | ブログ収益を保護猫活動に使いたいので、頑張る人 | 夜型人間から朝方に切り替え中｜小学１年生の壁に負けじと２０２４年も奮闘します