Discordコミュニティを作りました! 参加する

フォーラム

トピックを立てる前にチェック
  1. フォーラムガイドライン」に必ず目を通してください。
  2. バージョンアップデート後に表示がおかしくなった場合は、
    「SWELL設定」>「リセット」からキャッシュクリアを先にお試しください。
  3. フォーラム内検索で過去に同じようなトピックがないか検索してみてください。
Instagramの埋め込みがスマホに...
 
通知
すべてクリア

[解決済] Instagramの埋め込みがスマホにだけ反映されません

6 投稿
3 ユーザー
0 Likes
3,662 表示
odekake
(@odekake)
投稿: 2
メンバー
Topic starter
 

カスタムHTMLにインスタグラムの埋め込みURLを入れて更新していますが、PCには普通に反映されて問題なく見れるのに、携帯で記事を見ても、インスタグラムの部分は表示されません。

CocoonからSWELLに移行してからの症状です。過去の埋め込みのある記事に関しても、新しく作った記事に関しても同様です。アドバイスくださいますと幸いです。

一例ですが以下のURLでインスタグラムの埋め込みをしています。

https://odekake.de/erdbeeren_duesseldorf/

https://odekake.de/grossmarkt/

https://odekake.de/picknick/

確認項目
利用規約に同意します*, ガイドラインを読み、内容を把握しています*, よくある質問を先にチェック済みです*, 過去に同じようなトピックがないか検索済みです*, WordPress更新後、SWELLは最新版にしましたか?, Googleなどでも検索してみました
問題が確認できるページのURL
利用中のSWELL本体のバージョン
2.6.5
利用中のWordPressバージョン
6
利用中のプラグイン一覧

Akismet Anti-Spam (v.4.2.4)
All-in-One WP Migration (v.7.61)
Category Order and Taxonomy Terms Order (v.1.6.1)
Complianz | GDPR/CCPA Cookie Consent (v.6.2.4)
Contact Form 7 (v.5.6)
Google Language Translator (v.6.0.15)
Regenerate Thumbnails (v.3.1.5)
Revision Control (v.2.3.2)
SEO SIMPLE PACK (v.2.4.2)
Site Kit by Google (v.1.77.0)
WP Fastest Cache (v.1.0.2)
WP Multibyte Patch (v.2.9)
XML Sitemap & Google News (v.5.3.3)
【SWELL】乗り換えサポート from Cocoon (v.1.1.2)

 
投稿済 : 30/06/2022 6:26 am
山本大介
(@b4rskbe5)
投稿: 127
メンバー
 

ご自身で以下の CSS を設定しているようです。
599px 以下の場合には非表示にするという設定ですね。こちらを解除しましょう。

@media (max-width: 599px) {
	.instagram-media, .twitter-tweet {
		box-sizing: border-box!important;
		display: none!important;
		max-width: 88vw!important;
		min-width: 0!important;
		width: 100%!important;
	}
}

試しにスマホを横向きにしてみて下さい。おそらく表示されると思いますよ。

自分でカスタマイズしているコード等がある場合は、トピックを立てる前に確認することをおすすめします。

お仕事のご依頼は https://web.analogstd.com/request/contact からお願いします。
WordPress プラグインも開発しています。
Image Quality Control ・・・ 画像最適化のプラグイン
Combine Social Photos ・・・ Instagram 埋め込みブロックのプラグイン

 
投稿済 : 30/06/2022 10:16 am
山本大介
(@b4rskbe5)
投稿: 127
メンバー
 

あ、すみません。
どうやらこの CSS は SWELL に組み込まれているようでした。大変失礼しました。

外観 → カスタマイズ → 追加 CSS に打ち消すような CSS を書けば表示されます。
(読込順は、追加 CSS が後ろなので .post_content はなくてもいいですが、念のため)

@media (max-width: 599px) {
	.post_content .instagram-media {
		display: block!important;
	}
}

元々 display: none; が指定されているので表示されると何か不具合があるのかもしれません。
その他の表示などに影響がないかよくご確認をお願いします。

お仕事のご依頼は https://web.analogstd.com/request/contact からお願いします。
WordPress プラグインも開発しています。
Image Quality Control ・・・ 画像最適化のプラグイン
Combine Social Photos ・・・ Instagram 埋め込みブロックのプラグイン

 
投稿済 : 30/06/2022 11:01 am
odekake
(@odekake)
投稿: 2
メンバー
Topic starter
 

@b4rskbe5

アドバイスありがとうございます!!!

CSSの事は全くわからない素人のため、本当に助かりました!
SWELLでも携帯で表示できてる人もいるようだったので、不思議に思っていましたが、
色々検索しても見つけられず。。。

ご教示いただいた、CSSを追加したら携帯でも表示できるようになりました。

本当にありがとうございます。

 
投稿済 : 30/06/2022 5:04 pm
了
 
(@loos_ryo)
投稿: 1248
メンバー Admin
 

モバイルだと(ラッパーをoverflow:hiddenにしてても)画面幅を超えて表示されてしまうことがあったため、instagram-media-renderedが付く前はdisplay:noneにしています。

レンダリング後のinstagram-media-renderedに対してはdisplay:blockで上書きするようにしていますので、そのCSSは関係ないかと思います。

本日、一時的にインスタの接続に不具合があったみたいなので、その影響で表示されなかったのかもしれません。

SWELL開発者です。

 
投稿済 : 30/06/2022 10:46 pm
山本大介
(@b4rskbe5)
投稿: 127
メンバー
 

@loos_ryo

ご確認ありがとうございます。
今みたら instagram-media-rendered クラスがちゃんと付与されて打ち消されていますね。

失礼しました!

@odekake

Instagram の不具合の影響だった可能性があるようです。
現在は、追加 CSS がなくても表示されましたので、一度ご確認をお願いします。

お仕事のご依頼は https://web.analogstd.com/request/contact からお願いします。
WordPress プラグインも開発しています。
Image Quality Control ・・・ 画像最適化のプラグイン
Combine Social Photos ・・・ Instagram 埋め込みブロックのプラグイン

 
投稿済 : 30/06/2022 10:59 pm
共有: