ブラックリストのキリンです

延滞、自己破産、債務整理でブラックになった人を応援するブログ

 メニュー

【はてなブログ】Brooklyn記事の横幅広すぎ!カスタマイズで調整する方法

f:id:oshaberiitboy:20180117065643j:plain

 

「Brooklynの記事、ちょっと横に広すぎるから調整したい!」

 

...今回は、はてなブログのテーマ『Brooklyn』の横幅をカスタマイズで調整する方法について書いていきます。

 

はてなブログって、私はちょっとだけ記事の横幅が広い気がするんです。逆にテーマによっては「いやいや、狭いよ!」って人もいるかも知れません。

  

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

 

えー、カスタマイズでコード打つのはめんどいな...

コピペでOKだから、楽チンだよ!

 

私が使っているテーマは2カラムの『Brooklyn』です。

 

他の2カラムテーマ(記事とサイドバーの構成)の人でも、たぶん問題なくカスタマイズできると思います。

 

ただしデザインが大きく変わる可能性もあるので、できれば事前に元々のコードをメモ帳などにコピペしておいてください。

 

 

 

コードをコピペすればBrooklynの横幅カスタマイズができる 

 

今回のカスタマイズで参考にしたのは、コチラの記事。

 

 

1000px内で記事とサイドバーの数字の値を調整して、それぞれの横幅のレイアウトを狭くしたり広くしたりできる!...というコードを紹介してる記事です。

 

こちらのリンク先のコードをそのまま使ってもいいですが、私は今回こちらのアレンジをしました。

 

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

 

オリジナルのコードは1000pxでしたが、私は1030pxにしてます。それに合わせて#mainと#box2のwidthも「合計で1030px」になるように設定。

 

このコードをコチラに貼り付けます。

 

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

 

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

 

そのままにしてもいいですが、「あれ?ちょっと違和感があるな...」という場合はコードのpx部分の数字を変えれば自由に横幅の調整ができますよ!

 

自分で好きに調整できるのはいいね!

私は狭いほうが好きだけど、記事の幅は広いほうがいい!って人もいるからね

 

記事の幅が広いと余白が広すぎてスカスカになる

 

さて、そもそもなぜ私が記事の幅を狭くしたいと思ったのか。

 

「別に横幅広くて良くね?」...と思ってる人もいるかも知れません。

 

まあ、これは好みになるんですが、私の場合は横幅が広いと内容がスカスカに見えてしまってイヤなんです。

 

 

f:id:oshaberiitboy:20180117065340p:plain

 

幅を調整する前はこんな感じ。他のブログと比べると、なんだか余白が多いなあという印象でした。

 

特に私は文章の改行を多くしているので、余計に記事の余白の部分が目立っちゃいます。

 

でも、改行を少なくすることもできるんですが、そうすると文章がごちゃごちゃして読者に優しくないと思っちゃうんですよ。

 

関連記事:初心者必見!はてなブログの記事を見やすくするテクニック5選

 

かと言ってあまりにも幅が広すぎるとパッと見ただけで、「この記事は中身がない」と思われるのもイヤでした。だから調整することにしたんです。

 

今の横幅にしてからは、余白もそこまで多くない、かと言って文章もギチギチではないちょうどいい感じでブログを書けています。

 

おわりに

 

以上、Brooklyn(2カラムテーマ)の記事の幅を調整するカスタマイズを紹介しました。

 

冒頭でも書きましたが、デザインが大きく変わる可能性があるので元のデザインCSSのコードはメモ帳などにコピペしておくことをオススメします。

 

2カラムテーマを使っている人は、参考にしてください。 

 

【追記】

 

「このコードをコピペしたら、PCだけじゃなくてスマホの画面レイアウトもPCと同じになった!」という人は、以下の記事を参照してください。こちらに対策コードを書いています。

 

 

本日は、以上です!