はてなブログの幅をCSSでカスタマイズするコツ

冒頭、話題から外れて恐縮ですが、購読させていただいているブロガーさんの記事を見ると「文章力があるなぁ〜読んでて面白いわぁ」と感心しています。けど相変わらず私の記事は地味ですわぁwもっと見習いたいものです^^

さて今回は、はてなブログの幅をCSSでカスタマイズするコツについてです。とは言っても、はてなブログに限らず、他のブログサービスでも応用できるはずです。

ざっくりと２つの要素がありますので、順に説明していきますね。

作業するにあたっては、いきなりメインブログで実施するのは良くないので、テスト用のブログで行うことをオススメします。以前、こちらの記事で取り上げましたので、よろしければ参考にしてください。

今回は公式テーマの「Epic」を使って試していきます。まず「デザインCSS」を開いていきましょう。そして以下のようにCSSを追加して保存してみてください。

#container {
  width: 1000px; /*本来は960px、borderを入れて配置が崩れるのを防ぐために一時的に広げる*/
}
div {
  border: 1px solid gray;
}

ここでの要点は、一時的に #container を広げています。これは div要素にボーダーラインを付けることで1pxづつ幅が広がるため、そのままのサイズだと配置が崩れてしまうので、コレを防ぐために幅を広げています。作業が終わったらこの定義は除外して大丈夫です。

実際に設定後のスクショはこんな感じになります。こうすると、配置の全体イメージがつかみやすいですね。

f:id:tarVolcano:20140322003302p:plain

確認できたら、div要素のCSSは除外しておき、次の作業に移りましょう。

個別に可視化する例として、 #wrapper の設定を変えてみましょう。以下のようにCSSを追加してみてください。

#wrapper {
  border: 1px solid blue;
}

実際にCSSを追加すると、以下のスクショのようになります。

f:id:tarVolcano:20140322003939p:plain

ここでの要点は、 #wrapper に指定したボーダーラインの色を変えていくと良いということです。仮に別の id や class も同時にボーダーラインを付ける場合、別々の色なら区別しやすいですからね^^b

ついでなので、公式テーマ Epic の主要な id と classを調べてみました。各要素の幅は、以下のスクショの様になっています。

f:id:tarVolcano:20140322003309p:plain

また、どんな id や class が使われているかは、こちらの記事がとても参考になります。

今回のコツのまとめとしては、

の２つになります。

あと、幅を変えた後は、ボーダーラインの消去と #container の幅を戻すことをお忘れなくっ。

tarのブログるっ