はてなブログ「Brooklyn」のメイン記事の横幅は広いから、カスタマイズで調整したよ!

f:id:oshaberiitboy:20180117065643j:plain

 

 

こんにちは、管理人のおじゅんです。

 

突然ですがはてなブログ「メイン記事の横幅を調整したい!」って思ってる人、結構多いんじゃないですか?

 

例えば、

 

「俺のブログ、記事の幅が狭くね?」とか、

「私のブログ、ちょっと横幅広すぎない?」とか。

 

僕の場合は後者です!

 

そんな時、メイン記事とメニューバーの横幅の割合を調整できたらすっごく役立ちますよね?

 

しかも楽に!めんどくさくなく!コピペで!

 

 

 

 

 

 ブログテーマBrooklynの横幅をカスタマイズ!

 

僕の使っているはてなブログのテーマはBrooklynです。

 

www.notitle-weblog.com

 

はてなブログでは、高いシェアを誇るデザインテーマ。ベースにはシックな黒デザインが使われていて、人気の高さが伺えますね。

 

ただ1点気になるのが、「メイン記事の横幅が広い」ということ。

 

 

横幅を調整するために

 

いやいや、別に横幅広くて良くね?と思ってるそこの人!

 

違うんです!横幅が広いと内容がスカスカに見えてしまいがちなんです!じゃあBroolyn使うなとか、そういうツッコミは無しで

 

 

f:id:oshaberiitboy:20180117065340p:plain

 

 

こんな感じでね。他の人のブログと比べると、記事が何だかスカスカした印象なんだよなあ。

 

特に僕は文章の改行が多いんで、余計に記事の余白の部分が目立っちゃいます。内容が薄いからスカスカに見えるって?ちょっと表へ出(略

 

そんなわけで横幅を狭く調整するために、この記事を参照しました。

 

design.syofuso.com

 

 

レイアウト調節のコード

  

オリジナルのコードは上の記事を参照にして頂くとして、僕はアレンジしたコードを使っています。

  

/*content幅 PC*/
#container #content {
width: 1030px;}
/* 2カラムレイアウト */
#main {
width: 664px;
float: left;
}
#box2 {
width: 316px;
float: right;
}

 

 

アレンジコードは、こんな感じです。pxの数字を少しいじっただけですが(笑)

このコードを、

 

 

設定 > デザイン > カスタマイズ > デザインCSS 

 

 

に貼ります。

 

そうすれば、Brooklynのデフォルトの状態より横幅がちょっとだけ狭くなります。

 

2カラム(メイン記事とメニューバーの構成)のブログなら、上のコードのpx部分の数字を変えれば自由に横幅の調整ができますよ!

 

 

まとめ

 

コードをコピペするだけなんで、超楽チンに記事の横幅を変えられます!

 

う〜ん、偉大な先人の皆さんの知恵に感謝ですなあ(しみじみ)

 

本日は、以上です!