サポート » 使い方全般 » レイアウト＝サイドバーを上に詰めたい

レイアウト＝サイドバーを上に詰めたい

  • 解決済 zen73

    (@zen73)


    7年、 10ヶ月前

    最前の質問で，맹조さんに，ヘッダー画像の縦幅を縮小して表示する方法を教えていただきました。
    そこで，固定ページのレイアウトと揃えるためにさらに横幅も縮めてみました。
    その結果は次のようになりました。

    　　ヘッダーロゴ
    ――――――――――――――――――――
    　　グローバルメニュー
    ――――――――――――――――――――
    　　　　　　　　　　　　　｜　　　　　　↑
    　　ヘッダー画像　　　　　｜（余白）　　↑　　
    　　　　　　　　　　　　　｜　　　　　　↑
    ――――――――――――――――――――↑
    　　　　　　　　　　　　　｜　　　　　　↑サイドバーを
    　　投稿記事　　　　　　　｜サイドバー　　上に移動させ
    　　　　　　　　　　　　　｜　　　　　　　て余白を埋め
    　　　　　　　　　　　　　　　　　　　　　たい。

    CSSでの設定の仕方をお教え願います。


    /* =LAYOUT----------- */
    #sidebar-primary {
    overflow: hidden;
    float: left;
    width: 300px;
    margin-left: 15px;
    }

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • 천궁 메텔

    (@digitmaetel)

    7年、 10ヶ月前

    スタイルシートを調整する上で、念頭に置いておくべき大事なことがあります。
    多少の遊びが必要なことです。
    その理由は、ブラウザやOSで計算の起点が異なるため、zen73 さんの使用状態では最適でも、他者には文字が重なったり、クリックが出来ない箇所が出てきますよ。

    WordPress のフォーラムでの内容としては、離れてしまうことなのでCSSのフォーラムが向いていると考えます。

    ヘッダーの空いた領域分、サイドバーをマイナス値で動かしてはいかが？

    トピック投稿者 zen73

    (@zen73)

    7年、 10ヶ月前

    맹조さん，ありがとうございます。

    /* =LAYOUT----------- */
    #sidebar-primary {
    overflow: hidden;
    float: left;
    width: 300px;
    margin-left: 15px;
    margin-top: -300px;
    }
    とすると，上の余白部分にサイドバーが表示されることが確認できました。
    しかし，このままですとすべての固定ページでサイドバーが上にずれてレイアウトがくずれてしまいますので，投稿ページのみにmargin-top: -300px;を適用することが必要になります。
    このことは，あらたに質問させていただくことにして，この質問は解決済みとさせていただくことにします。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「レイアウト＝サイドバーを上に詰めたい」には新たに返信することはできません。

トピックタグ

表示