rcmdnk's blog

20131120_css_200_200

Octopressの初期設定だとブログの幅を狭くしていくと サイドバーが下に回る様になってるんですが、 なんとなくそれを止めようと思って試した時に ちょっとハマった所について。

Sponsored Links

CSSについての勘違い

Octopressのページ構成を物凄く簡略化するとこんな感じ。

1
2
3
4
5
6
7
8
9
10
11
12
<html>
  <body>
    <div id="content">
      <div class="entry-content">
        Article
      </div>
      <aside class="sidebar">
        Sidebar
      </aside>
    </div>
  </body>
</html>

これで、各要素がこんな感じ。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
body{
    -webkit-text-size-adjust:auto;
    max-width:400px;
    min-width:300px;
    position:relative;
    margin:0 auto;
}
#content{
    overflow:visible;
    margin-right:150px;
    position:relative;
}
#content>div{
    width:100%;
    float:left;
}
aside.sidebar{
    width:150px;
    padding:0;
    clear:none;
    float:left;
    margin:0 -100% 0 0;
}

実際、最初のclassicテーマだと、レスポンシブな感じになってますが その辺りは省いてます。

これで、上のままだとこんな感じ:

サイドバーがそのまま留まる

ブラウザを狭くして行ってもらうとわかると思いますが、最小限まで行くと、 サイドバーの方がそのままはみ出していきます。

で、この時に、Sidebarの幅を150pxのまま、 Articleの方を100pxとかSidebarより狭くしたい、と思ってそうしてたんですが、 上のbodyの幅を短くしてmarginはそのまま残してもこんな感じで狭くしていくと サイドバーが下に行ってしまいます。

サイドバーが下に行ってしまう

しっかり理解してなかった点は、margin-left:-100%みたいな感じで右に ずらしていても、元のスペースに充分に余白がないと駄目、ということです。

上だとArticle部分はmarginを引いて100pxまでは必ず残るんですが (全体が250pxになると100pxになる)、 全体幅が300px切るとSidebarは左の元の部分に充分な幅が無くなって下に落ちてしまってます。

取り敢えず、単にCSSをよく知らなかっただけ、です。。。 floatで横にmarginを使って持ってきたい時は簡単には幅の広い方を メインにしてやらないと駄目、ということ(で正しいはず)。

1px borderの罠

この辺を切り替えるのは面倒なので、取り敢えず両方等幅にして 過ごそうと思ったんですが、どうもギリギリまで狭めると やはり下に行ってしまうことが。

Octopressで基本的に幅等を決めてるのはsass/base/_layout.scss の中なので、この中で計算してmarginやら色々変えて正しく出来てるはずなのに、 どうしても出来ないという事態に。

そんな中、ふとsass/ase/_theme.scssを見てみると一番下にこんな記述。。。

sass/ase/_theme.scss
1
2
3
4
5
6
7
8
9
10
body {
  > div {
    background: $sidebar-bg $noise-bg;
    border-bottom: 1px solid $page-border-bottom;
    > div {
      background: $main-bg $noise-bg;
      border-right: 1px solid $sidebar-border;
    }
  }
}

そう言えばこのボーダーの色を背景と一緒にして消してたので忘れてましたが、 確かにサイドバーとの間にこのボーダーがありました。

ただ、どちらかと言うとthemeというよりlayoutにあるべきものな気も。。。

というわけで、この1pxを0に 1 して試してみたらうまくいきました。 (現在のブログを狭めてみるとサイドバーが最後まで残ります。)

Sponsored Links
  1. 実際には$body-border: 0px !default;という値を作って これを代入

Sponsored Links

« 全ての端末/ブラウザのブックマーク同期 追記を書くためのプラグイン: octopress-postscript »