会員サイトをリニューアルしました! 新サイトはこちら

スマホ表示の幅が狭くなる現象(記事詳細ページのみ) < SWELLに関する質問

フォーラムをリニューアルしました!
今後は、新フォーラムをご利用ください。

スマホ表示の幅が狭くなる現象(記事詳細...
 
通知
すべてクリア

スマホ表示の幅が狭くなる現象(記事詳細ページのみ)

10 投稿
2 ユーザー
1 Likes
1,484 表示
seer1118b
(@seer1118b)
Active Member
Topic starter
 

SWELLを購入させていただき、初期設定などいじっていたところ、いつの段階からかスマホでの表示が画面の横幅の7割くらいの大きさになっていました。

私がなにかしてしまったのかもしれません。スマホでも、横幅を画面いっぱいに表示したいので、どのようにすれば良いかご教示ください。

URL https://www.seer1118.work/

→トップページは通常通り、投稿記事ページのみ不具合

例: https://www.seer1118.work/entry/no-retain-telework

固定ページは「お問い合わせ」など不具合→ https://www.seer1118.work/contact

プロフィールなどは大丈夫なようです。→ https://www.seer1118.work/profile

・iPhone11のGoogle Chrome、Safariで不具合を確認

・キャッシュクリア済み

・JIN→SWELLへ移行(専用プラグイン使用)

・SWELL非推奨プラグインはいれていません

・SWELLバージョン2.1.9.1 →最新

※スクショを撮ったのですが、投稿画面に「ファイルをアップロード」のボタンがなく、添付することができませんでした。(私だけでしょうか…)

 
投稿済 : 09/08/2020 12:30 pm
了(開発者)
(@ryo)
Illustrious Member Admin
 

僕が今確認した感じでは、お問い合わせページでだけ変になっていて、記事ページは大丈夫でした...!(iPhone11で確認しました)

お問い合わせページではフォームの横幅が、画面サイズを超えたサイズに指定されてしまっているのが原因だと思うので、

.wpcf7-form{max-width:100% !important}

みたいなCSSで対処できるかなと思います(上記のCSSだけで解決するかどうかは、ちょっとわからないですが...!)

 
投稿済 : 09/08/2020 3:18 pm
seer1118b
(@seer1118b)
Active Member
Topic starter
 

@ryo

ご確認ありがとうございます。
外観→カスタマイズ→追加CSSの箇所に、教えていただいたCSSを追加しましたが、直りませんでした…。

・SWELL、ブラウザのキャッシュクリアして確認済

そもそも、Contact formの設定画面で、横幅を変えられる箇所がないですよね。今まで変えたことなかったですし、JINのときは普通に表示されていたはず…。

Invisible reCaptchaが怪しいかもとのことだったので、一度プラグイン停止してみたのですが、そちらも変化なしでした!

※やはりこのフォーラム投稿欄に「ファイルをアップロード」が出てこない・・

 
投稿済 : 09/08/2020 4:43 pm
了(開発者)
(@ryo)
Illustrious Member Admin
 

えっとですね...テーマごとに色々機能も違うので、「前のテーマがこうだったから」と全部同じようには表示されるものではないということを、まずはご理解いただきたいです。特にプラグイン周りは...。

まだ僕の方でも調べてみますが、「プラグインは基本的に自己責任で導入していただくもの」だという認識も持っておいていただけると助かります。

同じプラグインでも、テーマによって色々挙動が異なったりします。
(それが明らかにテーマによる不具合が影響しているのであれば、もちろん修正させていただきます!)

 
投稿済 : 10/08/2020 12:51 am
了(開発者)
(@ryo)
Illustrious Member Admin
 

Contact form を僕も使ってみたのですが同じことにはならず、もしかして別のところに影響があるかもですが、とりあえずフォーム周りに対しての別のコードをご提案させてただきます。

以下のCSSを追加するとどうなるでしょうか?

.wpcf7 {
max-width: 100%;
overflow: hidden;
}

 
投稿済 : 10/08/2020 12:54 am
了(開発者)
(@ryo)
Illustrious Member Admin
 

ファイルの添付についてですが、テキストエリアの下側に「添付ファイル」というエリアが表示されてはいないでしょうか?

 
投稿済 : 10/08/2020 12:55 am
了(開発者)
(@ryo)
Illustrious Member Admin
 

次回アップデートで少し対策もしてみますので、上記コードで解決しない場合はそちらをお待ちいただくか、別プラグインでフォームを設置してもらうといいかもしれません...!(フォームは関係ないかもですが...)

横幅が飛び出てしまう問題に関しては、色々な機能との兼ね合いで「テーマ側で強制的に防ぐ便利な手法」が使えない状態になっているんですが、自動で制御できるように対策してみます。

 
投稿済 : 10/08/2020 1:02 am
seer1118b
(@seer1118b)
Active Member
Topic starter
 

@ryo

ご返信ありがとうございます。

テーマごとに仕様が大きく異なること、理解していたつもりでしたが、今一度再認識致します。その点も踏まえて移行させていただいた次第です。

他のテーマだったら…という件は、どの環境でもこのような不具合が起こっていたわけではないと現状をお伝えすることが、解決に近づくヒントになる可能性もあるかと考えて書き込ませていただきました。出過ぎた真似を致しましたこと、ご気分を害されたら誠に申し訳ございません。

教えていただいたCSSを追加したところ、お問い合わせページの横幅は無事表示されるようになりました。ありがとうございます。

Contact formをはじめ、プラグインの導入は自己責任とのことですので、次になにか不具合があった場合は、Googleフォーム等に変更するなどの措置をとろうと思います。

*添付ファイルについて

私の画面には、了さんのアップしてくださったスクショのような枠がなく、コメントを書き込む枠の下に「Subscribe〜〜」、その下に「Preview」などが来ています。Chrome、Safariともに同様でした。

 
投稿済 : 10/08/2020 1:11 am
了(開発者)
(@ryo)
Illustrious Member Admin
 
投稿者:: @seer1118b

私の画面には、了さんのアップしてくださったスクショのような枠がなく、コメントを書き込む枠の下に「Subscribe〜〜」、その下に「Preview」などが来ています。Chrome、Safariともに同様でした。

あら、本当ですか、すみません...!
ちょっと設定見直してみます... 🤔 

 
投稿済 : 10/08/2020 1:20 am
seer1118b
(@seer1118b)
Active Member
Topic starter
 

@ryo

今確認したところ、添付ファイルのアップロード枠が表示されました。

こちらの不手際でお手数をおかけし、重ね重ね申し訳ございません。

 
投稿済 : 10/08/2020 3:56 am
共有: