灰色の棚

適当な話を適当に書くので、適当に見ていってください

はてなブログにて幅を広げました(デザイン的な意味で) 幅1100px以下の環境の方、すみません。


スポンサードリンク

f:id:syunki-gt:20140501175332j:plain
 今、使わせて頂いているはてなブログのテーマは、デフォルトでは幅が1000pxでした。1000px幅くらいが私の好みにも合うのでこのテーマを選んだのですが、アドセンスを貼ろうとした際にあと100pxあれば、となったので、広げてみました。

 テーマの幅の広げ方をメモしておきたいと思います。

簡単に広げる方法

 最も簡単に広げる方法は、

header#blog-title, div#content {
    width: 1100px;
}

div#main {
    width: 800px;
}

aside#box2 {
    width: 300px;
}
div.hatena-module-title {
    width:275px;
}

 こんな感じで書くことじゃないかと思います。数値はうちの例なので、適当に変更して下さい。

 まず、header#blog-titleがその名の通りブログタイトルの表示部分。div#contentが全体の幅です。で、div#mainが記事がある方のカラム(2カラムの場合)の幅。aside#bos2がサイドバー(2カラムの場合)、div.hatena-module-titleがサイドバーの物のタイトルの幅です。

 これらはテーマに寄って変わる可能性もあるかと思いますが、いくつか見た感じだと共通っぽくも見えたので、使える可能性も高いと思います。1カラムデザインとかだと、ちょっと変わってくるかな?

幅を広げる弊害

 幅を広げると、横長のアドセンスを入れやすくなったりはしますが、弊害もあります。見る人のブラウザの幅によっては、横スクロールの必要が出てくるんです。

 ウィンドウいっぱいに表示しているとしても、ウィンドウの解像度は640や768は今はほとんど無いにしろ、1024、1280、1600あたりは多いと思います。で、1100pxにすると1024幅の人には見づらくなると思います。

 そんな状況を改善するために、max-widthやmin-widthを用いて幅を可変にすることも考えました。が、横幅が広いものを表示するとはみ出すのは変わらないので……。今のところ悩んでいるところで、固定幅にしています。


 横幅が広くて見づらいぞ! と言われることが多ければ考えようと思いますが、まぁそういう意見をいただけることって経験上少ないように思うのですよね。うーん、悩ましいです。

おわりに

 最初ははてなブログのテーマを作ろうかとも思ったのですが、意外と面倒そうだったので保留しています。CSSをいじるだけっぽいので、技術的にはできると思いますが、項目が多いので大変そうで。

 もっと興味が出たら、作るかもしれないです。こちらのブログ用か、共同ブログ用か。まぁ、気が向けばですけどね。


 とりあえず、幅を広げること自体は簡単だったので、記事にしてみました。何らかの参考になればー。

 では、今回はこのへんで。おわり!