昨日、ブログのデザインを少し変更しました。
テンプレートは同じまま。
何をしたかというと、背景色を付けました。
記事とサイドバー以外に背景色を付けました
これまでは白の背景のままでした。
かねてから、記事の左右にサイドラインを入れるか背景色を付けるかして、記事本文をクッキリ分かるようにしたいと思っていました。
サイドバーは追従型にしていないので、ページ下部の方にいくと、メインボディ（記事の部分）だけが表示されていました。
個人の好みですが、真っ白なキャンバスに活字だけ並んでいたので、なんとなく味気ないというか、不安になるのです。
そのため、いちど、記事の左右にサイドラインを引いてみましたが、記事タイトルの左にライン、サイドバーの各モジュールの左サイドにラインがある形だったので、見苦しくなったため却下。
そこで今回、おもいきって背景色をつけることにしました。
やり方がよく分からなかったので、適当にやりました。いいんでしょうか、こんなんで。
まず全体に背景色を入れました。
そのあと、メインボディとサイドバーのみ背景色を白に指定しました。
すると、今のようなカラーコントラストになりました。
全部、cssで出来ます。
しかし、これで終わりではありません。
調整が山ほどありました。
まず、記事下のアドセンスが記事の幅に収まらなかったので、記事幅を大きくして、336x280の横並びアドセンスがギリギリ入る幅にしました。
次に、記事本文のパディングなどを調整しました。
以前、主婦が語る、ブログ収益を毎月10万以上コンスタントに稼ぐための基本に書きましたが、記事幅は580～700pxにしたほうがいいと思うので、パディングで調整して631pxにしました。以前は600pxちょっとでした。
次に、メインボディ部分の角を丸めました。radiusは10pxです。
なんで丸めた？
オサレなウェブサイトを作っているサルワカくんが丸めていたからです。
サイドバーの角は丸めてません。なんで丸めない？
サルワカくんがサイドバーの角を丸めてないからです。
次にサイドバーです。
サイドバーの左側にあったグレーの太いラインも消しました。
背景色で分けるようになったので、ラインが不要になりました。
ついでに先日アカウントを開いたFacebookアイコンも追加しときました。
ヘッダー画像のイメージですが、これを記事幅＆サイドバーと同じ長さにしようと何度も試みたのに出来ませんでした。ググってわかったのですが、はてなブログではヘッダー画像を幅を一定以上大きく表示できないことがわかりました。今のサイズが限界です。
しかし左右の余白をなくして全体に表示するコードを先輩方がすでに開発してあったので、これはそのうち調整していこうと思います。
また前のデザインに戻す可能性も無きにしも非ずですが、とりあえず記事枠がはっきりしたので満足です。
