Blank File

LinuxとかPythonとかVimとか、趣味でいじる感じで

ブログの幅を少し広げて本文の文字も少し大きくしてみた

雑記

デザインとか全くわかりませんが、少し記事本文の幅が狭く感じたので広げてみました。

chromeのデベロッパーツールは便利ですね。divタグのidの対応とかぱっと見でわかり易かったです。 それでも元のpaddingやマージンの関係が微妙に把握出来なくて、記事とサイドバーの間が妙に広かったり日付が横にはみ出したり苦戦しました。 デザインとか無理。最後は強引に合わせたので不自然な所あるかもしれません。いつの間にかこっそり直すことになると思います。

ちなみに元々のテーマのスタイルは以下のような感じでした。

|                                                                   |
|<--- #container (960px) ------------------------------------------>|
|<--- #container-inner (960px) ------------------------------------>|
|                           T i t l e                               |
|<---- #content (960px) ------------------------------------------->|
|  <-- #wrapper (720px) ----------------------->|<--- Sidebar --->  |
|    日付  |<----- #main (620px) -------------->|<---- #box2 ---->  |
|          |  <----- #main-inner (560px) ---->  |<-- (w:180px) -->  |
|          |                                    |                   |
|          |           記 事 本 文              |<- #box2-inner ->  |
|          |                                    |<-- (w:180px) -->  |
|          |                                    |                   |
|          |                                    |                   |
|          |                                    |                   |
|          |                                    |                   |
|          |                                    |                   |
|          |                                    |                   |
|          |                                    |                   |
|          |                                    |                   |
|          |                                    |                   |
|          |                                    |                   |

なんでこんな図を頑張って書いてしまったのでしょう・・・まぁ万が一これからこのテーマのスタイルをいじる人の参考になれば。（idにtypoあったらすみません）

ほとんど図を描き上げただけで満足してしまいましたが、#main-innerの幅を60px広げて、それに合わせてSidebar以外の部分を60pxずつ広げて、適当に余白をmarginとpaddingで調整しました。

はてなブログだと「デザイン」の「カスタマイズ」の最後の項目の「｛｝デザインCSS」にcssを記述すればいいそうです。今回書いたのはすぐに修正するか消す可能性が高いですが、とりあえず幅の部分だけ掲載します。 cssの指定の仕方や文字サイズの設定ははてなブログの初期デザインをいい感じにするCSS - bekkou68の日記を参考にさせていただきました。

#container{
  width: 1020px;
}
#container-inner{
  width: 1020px;
  margin-left: 0px;
  padding-left: 0px;
  margin-right: 0px;
  padding-right: 0px;
}
#content{
  width: 1020px;
  margin-left: 30px;
  padding-left: 0px;
  margin-right: 0px;
  padding-right: 0px;
}
#wrapper{
  width: 780px;
  margin-left: 30px;
  margin-right: 0px;
  padding-right: 0px;
  padding-left: 0px;
}
#main{
  width: 680px;
  margin-left: 0px;
  margin-right: 0px;
  padding-right: 0px;
  padding-left: 0px;
}
#main-inner{
  width: 620px;
  margin-left: 0px;
  margin-right: 0px;
  padding-right: 0px;
  padding-left: 0px;
}
#box2{
  width: 180px;
  margin-left: -30px;
  margin-right: 0px;
  padding-right: 0px;
  padding-left: 0px;
}
#box2-inner{
  width: 180px;
  margin-left: 0px;
  margin-right: 0px;
  padding-right: 0px;
  padding-left: 0px;
}

なんかpreタグの行間広い・・・

2014年10月1日 追記

最新のCSSをgithubのmiyakogi/HatenaCSSに置きました。