SWELL開発者の了さんよりコメントをいただきました。
WordPressテーマSWELLに限らず、アップデートを行うことで、表示が崩れたり画面が真っ白になったりと様々なことが起こることがある。誰かの役に立てばと思い、今回はアップデート後にワードプレステーマのSWELLで起こった、表示崩れの紹介と解決方法を書いていく。
今回のアップデートで起こった画面表示崩れはこちら。
表示崩れがわかりやすいように、上と下のタブを残したが、明らかに表示がおかしくなっている。
CSSで改善を試みる
——————————————————————
.wrap {
overflow: hidden;
}——————————————————————
CSSを張り付ける場所は、
①SWELLの設定→エディター設定→カスタム書式用CSS
もしくは
②外観→カスタマイズ→追加CSS
HTMLで余白をなくす。
——————————————————————
<div class=”wrap”>
<header></header>
<div class=”contents”> <p>コンテンツ</p> </div>
<footer></footer>
</div>
——————————————————————
基本的にはこのCSSで改善するはず。
しかし、私は改善しなかった。
根本的な原因と解決方法。
私の場合、直接の原因はフォームプラグイン『Contact Form 7』が影響していた。
氏名や件名のフォーム欄が長くなっていたため、表示が崩れていた。
フォームをこのように改善することによって、不具合が解消された。
——————————————————————
お問い合わせ頂きまして誠にありがとうございます。
執筆のご依頼につきましてもこちらのフォームからお願いいたします。
執筆・寄稿記事を無償でご提供しております。
商品レビューにつきましては、レビュー品の提供をお願いしております。
<div class="wrap">
<header></header>
<div class="contents">
<p><label> 氏名
[text* your-name] </label></p>
</div>
<footer></footer>
<header></header>
<div class="contents">
<p><label> メールアドレス
[email* your-email] </label></p>
</div>
<footer></footer>
<header></header>
<div class="contents">
<p><label> 題名
[text* your-subject] </label></p>
</div>
<footer></footer>
<label> お問い合わせ内容
[checkbox* checkbox-227 use_label_element "製品レビュー記事依頼" "寄稿記事依頼" "リクルート支援ツール掲載依頼""その他"]
<label> どのような経由でこちらのページにたどり着きましたか？
[radio radio-570 use_label_element default:1 "Google検索" "Twitter" "ブログランキング" "その他のリンク"]
<header></header>
<div class="contents">
<p><label> メッセージ本文 (任意)
[textarea your-message] </p>
</div>
<footer></footer>
</div>
[submit "送信"]——————————————————————
SWELL開発者、了さんよりコメント
twitter 埋め込み時のチラツキ防止のためにスマホでは#content に対してoverflow hidden をテーマ側で付けていたのですが、
最近の埋め込み処理が改善されてそろそろ不要になったっぽいのと、このCSSによってフルワイドブロックをコンテンツ先頭に持ってきたときに上部の境界線が描画できない問題があったため今回取り除いてみました。
なので、今後は埋め込みコンテンツや問い合わせフォームなどで横幅指定が大きくはみ出してしまうものについては自身で調整して頂く必要がでてきてしまうのですが、あまりにも多そうでしたらすぐに戻します…。
コメント