ブログデザインをマイナーチェンジ。フィボナッチデザインと勝手に命名

公開日:2013年7月9日 

ブログデザインをマイナーチェンジ。フィボナッチデザインと勝手に命名

ブログのデザインを変更しました。より読みやすいように本文の幅を狭くしました。過去記事で使っていた大きな画像を狭い幅に合わせて縮小するCSSについても書いてます。


ブログのデザインを変更しました。
主な変更点としては、本文の幅を少し狭くしただけです。
なぜこのデザインにしたのか簡単に書いときます。

・本文幅を500pxにした理由
・サイドバーは300px固定(変更なし)
・フィボナッチwebデザイン
・狭くした幅に過去の大きな画像もジャストフィットさせるCSS

4つ目の「画像をジャストフィットさせるCSS」だけは様々な場面で役に立つかもしれません。

本文の幅を500pxにした理由

designchange01

横に文字が続くと視線移動が多くなり読みにくいので、本文の幅を650pxから500pxにしました。

日本語の場合、読みやすくするために紙の上では文章の途中で改行したりします。
しかし、webサイト上でそれをやると、見る人の環境によって「1文字だけで改行」という現象が発生してしまいます。

designchange02

内容は気にしないでください

上図は読みやすくするために読点で改行した例です。

designchange03

しかし、せっかく読みやすくするための改行なのに、環境(Mac,windows,ケータイ,文字のみ拡大表示など様々な要因)によっては上図のように、「ですが、」「で、」「かない、」といったように行が始まって数文字で改行してしまいます。

というわけで当ブログは「改行するなら句点」ルールに則って書いてます。(例外あり)

でも、そうすると句点がなかなか登場しない部分は、横に長くなってしまいます。そうなると読みにくい。(技術系サイトでよくみかけます)

そんな理由から今回のデザイン変更では、本文の幅を狭くしました。以前の本文幅650pxから徐々に狭くしていって「これだ!」と思ったのが500pxでした。

サイドバーは300px

Google AdSenseは規約により基本的にサイズが変えられません。

先月、AdSenseはレスポンシブ・ウェブデザインに対応し、ブラウザサイズによってサイズの切り替えができるようになりましたが、当ブログの本文中の画像のように、にゅーっとサイズが変わるという仕様ではなく「ブラウザ幅が768px以下なら◯◯サイズの広告を表示、500px以下なら◯◯サイズ」というものです。導入も多少複雑なので今回はリソースの都合で見送りました。
AdSense公式ブログ

というわけで、サイドバーは以前と変わらず300pxです。

フィボナッチ数を取り入れたデザイン

designchange04

引用元:wikipedia

apple製品のデザインでお馴染みのフィボナッチ数
まったく狙ってなかったけど、500px:300pxってフィボナッチっぽいなと思いました。

前述のとおり、650pxからちょっとずつ狭くしていって様々なパターンを試したのですが、見た感じ500pxがいいかなと決定。

やはり黄金比はキレイに見えるんですね。私も一般的な美的感覚は失われてないようで安心しました。
黄金比とフィボナッチ数について詳しくは下記サイトで。

黄金比いろいろ

大きな画像を狭い横幅にぴったり合わせる

追記:2013.8.18
このCSSを使うとimgタグでサイズ調整しようとしても有効にならないことが今更わかりました。imgタグ内に「width=”100″」を書いても有効にならず、オリジナルのサイズで表示されてしまいます。
当ブログでは過去記事数も多くないので、本文幅を越える幅の画像のclassに下記のcssを適用させました。
designchange05

画像が大きくてサイドバーまではみ出してしまった

今までの記事で使った大きな画像(幅625px)は、そのままでは幅500pxには収まりません。過去記事に貼りつけた画像を1枚ずつサイズ変更するのは、とても手間がかかります。
なので、それについてはCSSで画像サイズを今の幅に合わせるようにしました。

これだけです。
記事の幅より大きな画像のみ、記事の幅に合わせ縮小します。もともと小さい画像は何も変化しません。

designchange06

ちゃんと本文幅に収まりました

上記CSSは大きな画像なら何でもかんでもジャストフィットさせてしまいます。本文内だけ適用したい場合は、classかidを付けてください。
当ブログの場合、「.single-post img」ってしてます。これは「single-postクラスの中のimgに適用」って意味です。
WordPressならクラス名などは自分の好きなように付けられますが、レンタルブログ(アメブロなど)あらかじめ決められてるクラス名しか使えません。しかし、わりと親切にクラス名が付けられているので、このCSSも応用できます。(たぶん)

ちなみに幅625pxを縮小して表示するのは容量の無駄になりますので、本記事からはこの幅(474px)に最適化した画像を使っています。


3月に始めたこのブログ。更新のペースが遅く、まだ20記事ほどしか書いてません。
それにも関わらず、google経由の流入が増えてきました。

designchange07

当ブログのアクセス数推移。このおかげでモチベーション保てます。

装飾いっぱいの激重ブログなんて自己満足以外の何物でもないので、よりサクサク動くようにしていきたいです。

書き忘れてましたが、ちょっと明る過ぎたのでメインカラー(青)を「#3399ff」から「#3498db」に変更しました。なんとなくフラットデザイン風な、くすんだ色になりました。

追記:2013.8.23
またデザイン変更しました。詳しくはこちら

コメントを残す