ブログのデザインを新しくしました

2014/03/16
雑記

Placeit

ブログのデザインを圧倒的に見やすく変更した。圧倒的だ。

とてつもなく可読性が高くなったという自負がある。さあ、見てくれ。

変更点をいろいろ見てく

変わったところをざっくり見ていこう。

テーマカラーを「ブルー」から「グリーン」にした

これが今回のもっとも大きな変更点かもしれない。

これまでずっとイメージカラーは「ブルー」だったが、思い切って「グリーン」にした。

かなり前からグリーンにしたいとは思っていたのだが、frasmがグリーンになってしまい、パクリみたいになるのが嫌で諦めていた。

そろそろ時効かな、ということでこのタイミングで変更したというわけだ。

レスポンシブをやめた

私はレスポンシブでサイトを組むのが好きだ。

しかし、レスポンシブは面倒くさいのだ。

たまに「レスポンシブは読者にやさしくない。管理者がラクするためのものだ」という意見を見ることがあるが、これはとんだ見当違いである。

レスポンシブはちゃんと管理するとかなり気を使うし、面倒だ。ラクなわけがない。

だから私はレスポンシブをやめるのだ。

私はこれまでに レスポンシブを2回自作しているが、この度のPCテーマ/モバイルテーマをそれぞれ作るほうが圧倒的に楽だった。

サイドバーを左から右にした

サイドバーが左にあるのは嫌いではないのだが、なんとなく右に戻すことにした。

これは本当になんとなくだ。どちらかといえば、右のほうが綺麗かな? くらいの感じだ。

サイドバーを固定するのをやめた

以前は、サイドバーに表示している「人気記事」を固定させていたのだが、これをやめた。

効果がなかったわけではない。

というか jQuery を使うのをやめた

jQuery を使うとなると、表示速度が多少は遅くなる。

それと面倒くさい。あと「いらくね?」とも思った。

この度、導入した目次を出すためのプラグインはどうやら jQuery を使っていそうだが、それくらいは良しとした。

最新記事を超でかくした

ここまで最新記事をフィーチャーしたブログがあるだろうか。

個性を出す意味も込めて、最新記事を 960px でどーんと出している。

スクリーンショット 2014 03 16 2 33 17

2記事目以降の出し方を変えた

ブロックっぽい感じをリストっぽい感じにした。この方が綺麗じゃないかな、と。

スクリーンショット 2014 03 12 17 59 30

これをこう。

スクリーンショット 2014 03 16 2 33 33

カテゴリーは折ることにした

カテゴリーが多いので、サイドバーにカテゴリーを出すと、やたら長くなる。

そこで、カテゴリーを2つに折ることで長さを半分にした。

スクリーンショット 2014 03 16 2 33 48

アーカイブはさようなら

以前は、アーカイブも表示ししていたが、これをやめた。いらない、との判断だ。

使うことある?

要素と要素の間に border を入れて margin もそこそこ取って綺麗に見えるようにした

これはOZPAの表4をかなり意識している。

というか表4はデザイン綺麗すぎるでしょ。あまりにも美しい。

border で切るのとか、margin をそこそこ取ることで美しく見えるなあ、と思ってインスパイアさせていただいた。

個別記事のタイトルをでっかく

メインカラムの幅だけでなく、サイドバーのところも全部使って、タイトルの領域を取っている。

スクリーンショット 2014 03 16 2 34 05

これはThe Vergeの出し方を真似した。

シェアボタンを中央寄せでいい感じに配置した

OZPAの表4NANOKAMO BLOGのシェアボタンをいい感じで表示されているのが、格好いいな、と思っていた。

これを実装させていただいた。

スクリーンショット 2014 03 16 2 34 29

綺麗じゃね?

関連記事とかのデザインをガッツリ変えた

これはFlips Blogの関連記事の出し方にインスピレーションを得た。

前々から、どうやったら関連記事を綺麗に出せるのか悩んでいた。

▼この状態は不満だった
スクリーンショット 2014 03 12 18 00 28

そんなときにFlips Blogの関連記事の出し方を見つけて、衝撃が走った。これだ。

▼真似した。
スクリーンショット 2014 03 16 2 36 52

前後の記事へのリンクを入れた

なんか入れたほうがいいよ、という話をどこかで聞いたような気がして、実装した。

▼デザインには改善の余地があるような気がしている。
スクリーンショット 2014 03 16 2 37 40

zenback を使うことにした

他のブログとの相互の流れを生みたくて、zenback を試しに入れていみることにした。

今後、どのような効果があるか楽しみだ。

モバイルは和洋風KAIを超意識した

ざっくり言えば、モバイルテーマはこれまでよりも文字を小さくした。

私のテーマはこれまで、タイトルや見出しの字が大きかった。

あまり意識をしていなかったが、和洋風KAIの文字の小さいタイトルや見出しを見たときに、その読みやすさに驚いた。衝撃的だった。

ということで、タイトルも本文と同じくらいの文字サイズに変更した。

▼タイトルの比較
IMG 9907

ヘッダーの要素はできるだけ小さく、コンパクトにして、すぐにコンテンツにたどり着けるように意識している。

▼ヘッダーの比較
IMG 9906

また、記事の一覧は、これまでアイキャッチを幅いっぱい表示してタイトルを出していたが、リストっぽくなるように変更している。

▼記事の一覧
IMG 9908

他にも細かいとこちょいちょい

見出しを大きくしたりとか、line-height をうまいことやったりとか、細かいところもけっこう改善している。

じんないたくみの声

今回のテーマは3日で作った(モバイルも含む)。

あまり時間をかけるわけにはいかなかったので、jQuery を使わない縛りをしたり、インスピレーションでがしがしと作っていった。

かなり楽しかった上に、かなり満足できる内容になった。

今後しばらくはテーマづくりもお休みしようか、と思っている。

なんだかんだで、1年以内に自作の4テーマ目である。このへんで一息つくべきだろう。