【お知らせ】ブログのデザインを新しくしました
2014/03/16ブログのデザインを圧倒的に見やすく変更した。圧倒的だ。
とてつもなく可読性が高くなったという自負がある。さあ、見てくれ。
目次
- 1 変更点をいろいろ見てく
- 1.1 テーマカラーを「ブルー」から「グリーン」にした
- 1.2 レスポンシブをやめた
- 1.3 サイドバーを左から右にした
- 1.4 サイドバーを固定するのをやめた
- 1.5 というか jQuery を使うのをやめた
- 1.6 最新記事を超でかくした
- 1.7 2記事目以降の出し方を変えた
- 1.8 カテゴリーは折ることにした
- 1.9 アーカイブはさようなら
- 1.10 要素と要素の間に border を入れて margin もそこそこ取って綺麗に見えるようにした
- 1.11 個別記事のタイトルをでっかく
- 1.12 シェアボタンを中央寄せでいい感じに配置した
- 1.13 関連記事とかのデザインをガッツリ変えた
- 1.14 前後の記事へのリンクを入れた
- 1.15 zenback を使うことにした
- 1.16 モバイルは和洋風KAIを超意識した
- 1.17 他にも細かいとこちょいちょい
- 2 じんないたくみの声
変更点をいろいろ見てく
変わったところをざっくり見ていこう。
テーマカラーを「ブルー」から「グリーン」にした
これが今回のもっとも大きな変更点かもしれない。
これまでずっとイメージカラーは「ブルー」だったが、思い切って「グリーン」にした。
かなり前からグリーンにしたいとは思っていたのだが、frasmがグリーンになってしまい、パクリみたいになるのが嫌で諦めていた。
そろそろ時効かな、ということでこのタイミングで変更したというわけだ。
レスポンシブをやめた
私はレスポンシブでサイトを組むのが好きだ。
しかし、レスポンシブは面倒くさいのだ。
たまに「レスポンシブは読者にやさしくない。管理者がラクするためのものだ」という意見を見ることがあるが、これはとんだ見当違いである。
レスポンシブはちゃんと管理するとかなり気を使うし、面倒だ。ラクなわけがない。
だから私はレスポンシブをやめるのだ。
私はこれまでに レスポンシブを2回自作しているが、この度のPCテーマ/モバイルテーマをそれぞれ作るほうが圧倒的に楽だった。
サイドバーを左から右にした
サイドバーが左にあるのは嫌いではないのだが、なんとなく右に戻すことにした。
これは本当になんとなくだ。どちらかといえば、右のほうが綺麗かな？ くらいの感じだ。
サイドバーを固定するのをやめた
以前は、サイドバーに表示している「人気記事」を固定させていたのだが、これをやめた。
効果がなかったわけではない。
というか jQuery を使うのをやめた
jQuery を使うとなると、表示速度が多少は遅くなる。
それと面倒くさい。あと「いらくね？」とも思った。
この度、導入した目次を出すためのプラグインはどうやら jQuery を使っていそうだが、それくらいは良しとした。
最新記事を超でかくした
ここまで最新記事をフィーチャーしたブログがあるだろうか。
個性を出す意味も込めて、最新記事を 960px でどーんと出している。
2記事目以降の出し方を変えた
ブロックっぽい感じをリストっぽい感じにした。この方が綺麗じゃないかな、と。
これをこう。
カテゴリーは折ることにした
カテゴリーが多いので、サイドバーにカテゴリーを出すと、やたら長くなる。
そこで、カテゴリーを2つに折ることで長さを半分にした。
アーカイブはさようなら
以前は、アーカイブも表示ししていたが、これをやめた。いらない、との判断だ。
使うことある？
要素と要素の間に border を入れて margin もそこそこ取って綺麗に見えるようにした
これはOZPAの表4をかなり意識している。
というか表4はデザイン綺麗すぎるでしょ。あまりにも美しい。
border で切るのとか、margin をそこそこ取ることで美しく見えるなあ、と思ってインスパイアさせていただいた。
個別記事のタイトルをでっかく
メインカラムの幅だけでなく、サイドバーのところも全部使って、タイトルの領域を取っている。
これはThe Vergeの出し方を真似した。
シェアボタンを中央寄せでいい感じに配置した
OZPAの表4やNANOKAMO BLOGのシェアボタンをいい感じで表示されているのが、格好いいな、と思っていた。
これを実装させていただいた。
綺麗じゃね？
関連記事とかのデザインをガッツリ変えた
これはFlips Blogの関連記事の出し方にインスピレーションを得た。
前々から、どうやったら関連記事を綺麗に出せるのか悩んでいた。
そんなときにFlips Blogの関連記事の出し方を見つけて、衝撃が走った。これだ。
前後の記事へのリンクを入れた
なんか入れたほうがいいよ、という話をどこかで聞いたような気がして、実装した。
zenback を使うことにした
他のブログとの相互の流れを生みたくて、zenback を試しに入れていみることにした。
今後、どのような効果があるか楽しみだ。
モバイルは和洋風KAIを超意識した
ざっくり言えば、モバイルテーマはこれまでよりも文字を小さくした。
私のテーマはこれまで、タイトルや見出しの字が大きかった。
あまり意識をしていなかったが、和洋風KAIの文字の小さいタイトルや見出しを見たときに、その読みやすさに驚いた。衝撃的だった。
ということで、タイトルも本文と同じくらいの文字サイズに変更した。
ヘッダーの要素はできるだけ小さく、コンパクトにして、すぐにコンテンツにたどり着けるように意識している。
また、記事の一覧は、これまでアイキャッチを幅いっぱい表示してタイトルを出していたが、リストっぽくなるように変更している。
他にも細かいとこちょいちょい
見出しを大きくしたりとか、line-height をうまいことやったりとか、細かいところもけっこう改善している。
じんないたくみの声
今回のテーマは3日で作った（モバイルも含む）。
あまり時間をかけるわけにはいかなかったので、jQuery を使わない縛りをしたり、インスピレーションでがしがしと作っていった。
かなり楽しかった上に、かなり満足できる内容になった。
今後しばらくはテーマづくりもお休みしようか、と思っている。
なんだかんだで、1年以内に自作の4テーマ目である。このへんで一息つくべきだろう。
