• ベストアンサー
  • 困ってます

サイドのウィジェットが下がってしまっている

  • 質問No.9727771
  • 閲覧数63
  • ありがとう数1
  • 回答数1

お礼率 65% (319/490)

http://yesdeafcan.com/
右のサイドのウィジェットが下がっています。
ボックスのはみ出しだと思うのですが、うまくいきません。
アドバイスをお願いします。

質問者が選んだベストアンサー

  • 回答No.1
  • ベストアンサー

ベストアンサー率 74% (118/158)

WordPressのテーマ「First」(http://themehaus.net/ja/themes/first/)をカスタマイズして作られているものと思います。
元のテーマは#content直属の子要素が#primaryと#secondaryの2つしかありませんが、そこに.content-areaやマージン用の空のdiv要素を独自に追加しているため、右の要素(#secondary)が下がってしまっています。

ここでは手っ取り早い解決策として
1. #content直属の子要素を#primaryと#secondaryのみにする
2. #secondaryにposition: absolute;をセットする
の2つを挙げます。

まず1.ですが、元のテンプレートと同様のHTML構造にすることでレイアウト崩れをなくす方法です。#primaryより後で#secondaryより前にある要素をすべて#primaryの子要素にすれば解決すると考えられます。

HTML構造を変えられない、もしくは変えたくないという状況は良くあります。そこで、2.は#secondaryのcssを変更することで問題を解決します。cssを下記の通り変更すると機能します。
・#contentにposition: relative;をセット
・#secondaryで
  ・float: left;を削除
  ・position: absolute; top: 0; right: 0; を追加
PC版以外の見た目にも影響を及ぼすので注意してください。

これら以外に、グリッドレイアウトを利用するという先進的でスマートな解決方法があります。
#contentを縦横それぞれ2分割し、そこに要素を配置するイメージです。
ここでは詳細な実装を省きますが、https://coliss.com/articles/build-websites/operation/css/learn-css-grid-in-5-minutes.html のページなどが参考になるでしょう。

解決の糸口になれば幸いです。
お礼コメント
nkmyr

お礼率 65% (319/490)

コメントありがとうございます。
きれいになりましたが、トップページ以外はレイアウト崩れです。
上記を参考にトップページと他のページのCSSを振り分けるようにします。
投稿日時:2020/03/27 09:31
関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ