• ベストアンサー

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

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

  • nkmyr
  • お礼率67% (403/600)
  • HTML
  • 回答数1
  • ありがとう数1

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

  • ベストアンサー
  • Proof4
  • ベストアンサー率78% (151/192)
回答No.1

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
質問者

お礼

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

関連するQ&A

  • CSS フッターのコピーライトが最下位に配置しない

    フッターのコピーライトが一番下に配置していません。右側のウィジェットサイドのより下になりたいです。ボックスのはみ出しだと思うのですが、うまくいきません。 教えてください。 よろしくお願いしいます。 http://yesdeafcan.com/

    • ベストアンサー
    • CSS
  • ウィジェットを消すには?

    添付画像のようなウィジェットがパソコンを立ち上げると表示されます。 毎回、「閉じる」でいちいち閉じてるのですが、 再度パソコンを立ち上げると表示されます。 これを常に非表示にする方法はありますか? ちなみにこれは、win8の機能ではなく、キングソフト(ウイルス対策ソフト)の機能でしょうか? 添付画像は、ウィジットを右クリックした状態です。

  • ウィジェットの仕様 (メモ管理ソフトが欲しい)

    こんにちは。 OS X 10.4 のウィジェットは HTML, CSS をベースに作成できると知りました。 そこで、質問なのですが、ウィジェットを作成する際、 1. 「書類を開く」「新規作成」「書類を保存」といったファイルの操作。 2. ウィジェット内でのフォーム (テキストエリア、コンボボックス、ラジオボタンなど) の使用。 3. 印刷の制御 4. ウィジェット自身の設定ファイルの使用 といったことは、できるのでしょうか? アップル公開のウィジェットの技術仕様 PDF には目を通しましたが、いまいち詳しくなかったので… 実は、かんたんなメモ管理アプリケーションが欲しいのですが、本格的なプログラミング知識がありませんので、ウィジェットではどうか、と思った次第です。 ちなみに、現在 Mac を持ってません。ウィジェットの仕様が良ければ Mac を買おうと思っています。ちなみに、買った後、結局期待通りの仕様でなくても、Omni Outliner を次点として考えています。

    • ベストアンサー
    • Mac
  • Yahoo!ウィジェットがインストール出来ません

    こんにちは。 検索してみた所、以前同じ質問をされていた方がいらっしゃったのですが、解決していなかったようですので、再度質問させて頂きます。 まず、Yahoo!ウィジェットのページからWindows版のインストーラーをダウンロードし、実行しました。 インストール先を選択し(この時は「D:\Program Files\Yahooウィジェット」としました)、インストールを開始。問題なくファイルの展開が行われ、完了までのゲージも問題なく進んで行きました。 そしてインストールが完了し、インストール終了の際のオプションで「Yahoo!ウィジェットを起動する」みたいなチェックボックスがあったので、チェックを入れてインストーラーを終了しました。 しかし、Yahoo!ウィジェットは起動しませんでした。 おかしいと思い調べてみると、インストール先として指定した場所をいくら探してみても、全くインストールされた形跡が無いのです。 再度インストーラーを起動し、同じインストール先を選択してインストールしてみましたが、やはり同じ状況です。 この際、スタートメニューへの登録・デスクトップにショートカットを作るオプションを選んでいたのですが、当然の事ながらどちらも登録・作成されませんでした。 Yahoo!のFAQにもこういった状況は書いていなかったので、どうしたものかと悩んでいます。 どうぞよろしくお願い致します。

  • スマートフォンのホームアプリ、ウィジェットについて

    閲覧ありがとうございます。 今回はスマートフォンのホームアプリ、ウィジェットアプリについて教えて下さい。 http://blog-imgs-47.fc2.com/l/o/v/lovelivepress/GuTIMyU.jpg この画像を例に挙げます。 1、画面下の6つのアイコンがありますが、私のスマートフォン(アンドロイド)では横列には4 つまでしかアイコンを置けません。6つを置くことはできますか。 2、画面左側のキャラクターですが、これはどのように置いているのでしょうか。Desktop VisualizeRなどで画像を切り取る時、A×B、のように四角形での切り取りになること思います。しかし今回の場合だと、このキャラクターを四角形で切り取ると、その余白の背景まで切り取ることとなり、ホーム画面の背景から浮いてしまうことになってしまいます。画像からキャラクターの輪郭だけをぴったり切り抜いているのでしょうか。 3、これは別の内容になりますが、Desktop VisualizeRの使い方が分かりません。まず任意のサイズのウィジェットを設置し、そこに画像を埋め込むのですが、画像とウィジェットのサイズが合わず、ウィジェットの隅が開いてしまいます。画像を埋め込む前に、そのウィジェット大に画像をトリミングすればいいかと思いましたが、それでも画像とウィジェットがぴったり合ってくれません。 以上3つもまとめて質問させていただきました。 ご存知の方はいづれかだけでもお教えください。 回答お待ちしています。

  • サイドメニューがめりこみました

    MTでブログを作り・・画像を使い、サイドメニューの コンテンツを角丸の枠で囲って整理しようとしたら、 何故か勝手に右に移動したらしく、▼こうなってしまいました。 http://10hoho.com/test/test1.jpg CSSの何処を修正すれば、位置の調整がきくのか 教えてもらえませんか?自分でも色々やってみたものの、 ピクリとも動かず困りはててます。 今までサイドメニューコンテンツのヘッダーに使ってた 画像からサイズを割り出してるため、角丸画像がサイズ オーバーしてるハズは無いのですが・・ どなたか、(何処をいじればサイドメニューそのものが 動くのか)分かる方が居りましたら、ご教授ください!

  • 見れないサイドがあるのです

    OSは、WINXPですが IEで見れないサイドが有るのです 企業情報のプレエントリーのサイドが見れないのです IEのプロバテイで明細設定は、見れるパソコンの設定と同じなのに・・・ ちなみに見れば無いサイドは http://www.odakyu-co.com/recruit/info4.html でプレエントリーを押すとサイドが無いと出るのです 他のPCからは見れるのですが・・・ 何処の設定を治したら良いか教えて下さい

  • サイドバック

    色々と右サイドバックについて質問をさせてもらっているのですが、サイドバックに必要な要素はなんなのでしょうか? 例えばフォワードなら決定力、ボランチならゲームメーカーなど。 右サイドバックはどうでしょうか? どのようなプレーを心掛ければ良いですか? あまり関係がないと思いますが、憧れの選手はセルヒオ・ラモスです。

  • サイドボックスの商品名

    来月、イントルーダークラシック400の購入を考えている者です。 それにしたがい、初回工費が無料なのでいくつかカスタムしたいと考え、カスタムの一つとして、サイドバッグ(革製)かサイドボックス(ハードのやつ。金属orプラスチック??)を装着しようと思っているのです。 自分の中では 『容量の大きいもの』 『雨に濡れても平気なもの』 これを最大の条件と考えていろいろと探しており、 目指すカスタムが 「ハーレー」ツーリングファミリーのFLHRロードキングを目標に考えているので、サイドボックスを装着しようと考えています。 それに従い、あのロードキングのサイドボックスのようなサイドボックス(平行四辺形のやつ)を装着しているイントルーダークラシックの画像を探し、いくつか見たのですが、あれは何という商品名のサイドボックスなのか? それがわかりません。 革のサイドバッグは雨に濡れないようにいちいち取り外して家に持ち帰らなければいけないと聞いたのと、上記の見た目の理由により、ほぼサイドボックスに気持ちは固まりつつあるのですが、機能面が優れていなければ意味がありません。 サイドバッグとサイドボックスでは容量はどちらが大きく、ロングツーリングに適しているのでしょうか? 大きな買い物だけにしっかりと調べて後悔しないよぅにしたいので、 サイドボックスの商品名(お値段も教えていただけると幸いです) サイドバッグとサイドボックスのメリットデメリット サイドボックスを装着した際の強度問題(外れてしまったという報告があったため) を教えてほしいのですが、アドバイスなども含めましてよろしくお願いします。 あと、主題とは関係ありませんが、 エンジンガードも装着しようと考えています。 キジマ製のエンジンガードは精度の問題??で一部干渉してしまうという情報(ステップボードなどと干渉)を聞いたので、他に 「迫力がある」エンジンガードを教えてほしいです。 自分の中ではYSPのエンジンガードor輸入物のエンジンガード(LINDBY Custum製 LINBARハイウェイバー&エンジンガード)を考えています。

  • スタイルシート両サイドメニューについて

    スタイルシートでメニューをdivでヘッダー、とメインと両サイドにふたつメニューをhttp://www.famima.com/ このように作りたいのですが2つならフロートで右と左に分ければいいのですが3つの場合はどうしたらいいのでしょう?教えて下さい。

専門家に質問してみよう