こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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

投稿日時 - 2020-03-26 16:38:35

QNo.9727771

困ってます

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

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 のページなどが参考になるでしょう。

解決の糸口になれば幸いです。

投稿日時 - 2020-03-26 21:42:21

お礼

コメントありがとうございます。
きれいになりましたが、トップページ以外はレイアウト崩れです。
上記を参考にトップページと他のページのCSSを振り分けるようにします。

投稿日時 - 2020-03-27 09:31:21

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問