Wordpress

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

記事内に商品プロモーションを含む場合があります
おなやみにゃん
おなやみにゃん
Smash Balloon Social Photo Feedで画像が崩れちゃうにゃん

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

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

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

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

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

おなやみにゃん
おなやみにゃん
縦長の画像をインスタグラムで投稿しており、Smash Balloon Social Photo Feedで読み込むと、正方形・縦長の画像で高さが変わってしまう。
おなやみにゃん
おなやみにゃん
縦長画像を複数投稿していると、Smash Balloon Social Photo Feedで読み込んだ時に、2枚目の画像が1枚目に重なって表示されてしまう

対応はCSSを追加するだけ

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

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

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

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

COMMENT

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

wp-puzzle.com logo