【iPhoneユーザー必見!】プライム会員でAmazon ミュージック Unlimitedを月額880円にする手順

SWELLでサイト型トップページ画面がずれた時、この方法で解決しました

悩み人

SWELLでサイト型トップページ画面がずれた時に、トップページがずれて困ってます。

そんな疑問にお答えします。

どうも、ブログ運営者のポチ(@sunrise_033)です。

この記事では、ワードプレステーマ「SWELL」でサイト型トップページ画面がずれた時に実際に試して解決した方法を紹介します。

下記のこのような項目に当てはまる人向けの記事になりますので、ご承知ください。

  • サイト型にしてPC画面のトップページがずれる
  • 投稿・固定ページはずれない
  • フルワイドを使って編集している
この記事を書いた人
「高コスパ」大好きブロガー:日の出ポチ

「日常のお得なもの」「グルメ」をテーマにしたブログ2つを運営

当ブログの特徴Amazonサービス・Yahooトラベル・節約Wi-Fi・ダイソー・ワークマン

月間54,000PV/収益5桁達成

目次

swellでサイト型トップページ画面がずれた時、この方法で解決しました。

サイト型にトップページを作り替えた時に画面が左に数センチずれてしまう現象が起きました。

・サイト型にしてPC画面のトップページがずれる
・投稿・固定ページはずれない
・フルワイドを使って編集している


このような状態でした。

結論から先にいうと下記の方法で解決しました。フルワイドブロックを重ねて使用していたのですが、

外側のフルワイドブロックの横幅を「フルワイド」にして、内側のフルワイドブロックを「サイド幅」にする。

外側のフルワイドブロックの横幅を「フルワイド」にする

内側のフルワイドブロックを「サイド幅」にする。

結論からすれば簡単な問題だったのですが、困っている時は焦りが出て来るものでわからなくなるものですね(笑)

原因と解決の詳細

ポチ

まず今回のトラブル原因はフルワイドブロックの横幅設定ミスでした。

フルワイドブロックは横幅を3パターンに変更できるのですが外側のブロックを狭くして中側のブロックを広くしていたのでズレが発生したと考えた方が打倒でしょう。

イメージはこんな感じ。

トップページ全体を構成するフルワイドブロックが狭くて、中身のパーツが広いとズレてしまうのもわかりますよね。

横幅が元々狭いスマホ表示ではズレてなかったのでピンときました。

まとめ 

・サイト型にしてPC画面のトップページがずれる
・投稿・固定ページはずれない
・フルワイドを使って編集している

このような状況でフルワイドブロックを重ねて使用してる場合は各項目の横幅設定を見直してみてください。

もしかしたら外側の設定が狭くなってるかもしれません。


また、フルワイドブロック以外でもバナー広告なども幅の問題でズレることがあるので、その場合は広告を外して表示を見るなどしてみると解決するかもしれません。

「ブログ村ランキング」参加中!
PVアクセスランキング にほんブログ村

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

独自の高速化技術と高セキュリティで、ブログの読み込み速度と安全性を最大限に保ちます。

月額900円から利用できる高コスパのレンタルサーバーです。

\ 【PR】最速サーバーを、今すぐ無料お試し!/

コメント

コメントする

目次