チップの日常

管理人チップの日常の出来事や気になる事を綴るブログ

【はてなブログ】記事本文とサイドバーの幅の変更(調節)方法

 スポンサード リンク

 今回はタイトルの通り、記事本文とサイドバーの幅を変更する方法をご紹介します。

はてなブログの幅の変更方法

f:id:chipsforest:20151010200734j:plain:w600

 具体的には「本文の幅(赤)」「サイドバーの幅(青)」「ブログの幅(黄色)」を変更していきます。



#container {

width: 973px;
}

#main
{
width: 728px;
}

#box2 {
width: 220px;
}

 上記のコードをはてなブログの「デザイン」→「デザインCSS」の中に書き込むだけです。

ちょっと解説

 「#container」が「ブログの幅(黄色)」

 「#main」が「本文の幅(赤)」

 「#box2」が「サイドバーの幅(青)」

 に対応しています。

 「width: ○○px;」の数値を変更することで調節が可能です。


 上のコードだと

 本文の幅(728px)+サイドバーの幅(220px)=948px

 となるのですが、本文の幅をぴったり948pxにしてしまうと表示がずれてしまう可能性があるので注意が必要です。

 ということで、今回は25pxの余裕を持たせて本文の幅は973pxにしてあります。

 ここら辺はプレビュー見ながら調節すればいいんじゃないかなと。



 で、本文の幅を728pxにした理由はグーグルアドセンスのビッグバナー(728×90)を使いたかったから。

 この幅ならダブルレクタングルも余裕を持って設置可能です。

PAGE TOP