くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > css > はてなブログの記事の幅を広げる

はてなブログの記事の幅を広げる

css

はてなブログにプログラムを載せていると、記事の幅が狭くてみずらいことがある。。。

なので、デザインからCSSをカスタマイズして、記事の幅を調整してみた！ときの備忘録

もちろん、レスポンシブデザインでPCだけ、幅広な表示に!!

ちなみに利用しているテーマはこちら

こんなかんじにカスタマイズします

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

/* <system section="background" selected="default"> */
/* default */
/* </system> */

/***** ここから下を追記 ***/
@media screen and (min-width:1400px) {

#container {
  width: 1350px;
  margin: 0 auto;
}

#wrapper {
  width: 1100px;
  float: left;
}

#main {
width: 920px;
}

}

それぞれのidは、

  • #containerは記事、サイドバーを含めた全体の幅
  • #wrapperは記事と日付などがある左側を含めた幅
  • #mainは記事自体の幅

以上！！

参考にしたサイト様