デザインCSSいじってみた

おはようございますまたはこんにちはまたはこんばんは。
カイヤンです。

ブログを開設したわいいのですが、早速アレな事案。

サイドバーが下に表示される。

サイドとはなんだったのか……。

ぐぐって頭の方にでてきたページを見ても改善せず。
途方にくれてTwitterで助けを求めたところ……

まさにこれという記事を教えていただきました：
サイドバーの位置を左にしてみました - sos の 作業メモ

いやー助かった助かった。リンクを教えてくださった方とリンク先の方に感謝せねばと早速公開されていたCSSコードを、背景画像やタイトル表示に関するところを除いてコピーさせていただいたところ

Figure 1 きっちきち過ぎて読めないサイドバー

……なんか合わないぞ。サイドバーの大きさが足りない。それに縦線と本文がきっつきつだ。

どうも前述のリンク先の方は、サイドバー部分も自作なのか、先のコードで合うような大きさだったようです。

Twitterで嘆いていると、HTMLの要素のidかclassを見つけてそこをいじればうまくいくとのこと。Chromeで開発者ツールからぱっと見てみると、どうも縦線については#main-innerをいじくればよさそうです。また、box2がサイドバーのidでした。widthを広げれば勝利かと思われましたが……

Figure 2 縦線をいじる前にbox2のwidthを広げた結果

ずれてしまった。どうもタイトル部分も大きくしないといけないようなのですが、なかなか要素が見つからない。なんとか探し出すと#container-innerのwidthが1000しかないのが原因と推測されました。そこで修正をかけるのですが変化なし。また頭を抱えることに。

再びTwitterで助けを求めると助けが来ました。max-widthが定義されているか確認せよと。開発者ツールの右を見てみると、確かにmax-widthが1000にされていました。デザインCSSでそこも含めて書き換えると、すべて解決しました。

以上のことから実装したCSSは次のようになります：

/* <system section="theme" selected="evergreen"> */
@import "/css/theme/evergreen/evergreen.css";
/* </system> */

/* <system section="background" selected="custom"> */
body{ background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/c/chijan/20160610/20160610203432.png'); background-repeat: repeat-x; background-color:#689ce1; background-attachment: fixed; background-position: center top;}
/* </system> */

#content {
  width: 1078px;
  color: #3d3d3d;
  margin: 0 auto;
  background: #fff;
}

#container-inner{
    max-width: 2000px;
    width: 1078px;
}

#blog-title {
    width: 1078px;
    margin: 0 auto;
}

#blog-title-inner {
    width: 1078px;
    margin: 0 auto;
}

#box2 {
  width: 285px;
  font-size: 13px;
  float: right;
  margin: 16px;
}

#wrapper {
    width: 750px;
    background: transparent;
    float: right;
}

#main:after {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

#main-inner {
  border-left: 1px solid #ddd;
  padding-left: 10px;
}

#main > * {
  margin: 0px;
}

#blog-title {
  margin: 10px auto 0px auto;
  width: 1078px;
  text-align: center;
}

#top-editarea{
  width: 1078px;
  text-align: left;
  margin: 0 auto;
  margin-bottom: 14px;
  font-size: 14px;
}

デフォルトのサイドバーのまま左に表示させたい、サイドバーまで１から作りたくない、そういう方の参考になれば幸いです。
余計な部分があるかもしれません。

こんな感じで、最初のうちははてなブログをいじっていくかんじの記事になるかもしれません。ただ今のところ現状のUIで満足しているので、変更してもせいぜい背景くらいでしょう。早速ぼやきはじめるかもしれません。
それでは。

6/26追記
上述のCSSコードのReferenceとなったブログの著者、sos様よりスターをいただきました。ありがとうございます。