フラットなアレをリスペクトしてブログをリニューアルしました

この記事は投稿されてから1年以上過ぎています。技術情報の場合は最新の情報の検索をしていただき、正しい情報を習得されることをおすすめします。それを承知のかたはどうぞこの記事をお楽しみください。

全国の貧乳好きの皆様こんにちは。

僕としてはおっぱいはないよりあるほうがいい、更に言うならそこそこ大きいほうが好き。
そんなポリシーを持つGOUTEN(@gouten5010)です。

巷でフラットデザインが流行ってると聞きまして、僕も便乗してブログデザインをリニューアルしました。

実は8月1日に未完成ながらアップしてたんだけども、コメント周りの整形やたこパをしてたりしたのでご報告が遅れました。
そもそも報告なんて必要ないという感じなのですが、別の思惑もあるので、こうして記事にしています。

ナイ●チかまな板か、それが問題だ

新テーマコンセプト

今回はフラットデザイン+ミニマルデザインというコンセプトで制作しました。

  • フラット → 起伏がない
  • ミニマル → 小さい丸

連想されるのは・・・そうですね、ペ●ャ●イですね。

というわけで、今回作成したWordPressテーマ名は「flat Chest」または「Chopping Board」でほぼ決まり!
ごめんなさい!石投げないで!

ないよりはあるほうがいいけれど、なくてもそれはそれでいいじゃないか。
個性を尊重し、無駄を排除していくこの世に生きながら、あえて危ない橋を渡りたい。
ええ、今日も日本は平和です。

新テーマの特徴

テーマのコンセプトと意味は前項で申し上げたとおりですが、今回作ったテーマはコンセプトに沿った特徴があります。

画像を使わない

画像を使わないデザインでどれだけかっこよく出来るかというのを常々考えていまして。
画像の切り出しとかまじめんどくさいし。
その結果がこれです。

今回はサイトタイトルの上にあるロゴ(ブラウザ幅600px以上のとき表示)以外に画像を一切使用しないデザインにしました。
元々画像をあまり使わないコンセプトで制作してきたのですが、今回は今まで以上に軽量化できたかなと思います。

サイトタイトルの画像も今後、カスタムヘッダーの機能またはテーマオプション、もしくはテーマカスタマイザーを使って変更・表示非表示の切り替えをできるようする予定ですので、非表示設定にしたらまさに全く画像を使わないことになりますかね。なりますよね?
現在ブログのタイトル画像を知人に作ってもらっているので、今後1ヶ月以内にヘッダーの画像が変わるかと思います。

カラーの統一

パントン社が今年(2013年)のカラー・オブ・ザ・イヤーは「エメラルド」だって言ってたので、だいたいそんな感じで配色しました。

コンテンツは白を基調とし、エメラルドグリーンをベースに濃淡を調節したものを合わせています。
一部違う色も入れていますが、それは対象のWebサービスのガイドラインに合わせたり、アクセントやバランス調整の結果です。

今はCompass+Sassで一括カラー指定したりしていますが、管理画面内ですぐに配色の変更ができるようにテーマカスタマイザーで変更可能なようにしようかなと思っています。
来年(2014年)のカラー・オブ・ザ・イヤーが発表されるまでにこのデザインに飽きてなかったらいいなあ。

アイコンフォントを採用

今回はなんか流行ってるみたいだし、アイコンフォントを採用してみました。
本当はアイコンすらない仕様にしようと思ったのですが、さすがにアイコン無しはやり過ぎかなと考えなおし、嫌々ながら採用しました。

以下は、今回アイコンフォントを使うのに参考にした記事です。

レスポンシブやらアイコンフォントやらフラットやら!2013年の気になる技術やデザインを試してみたリニューアル手順! | バンクーバーのうぇぶ屋

この記事の中のアイコン関連はCSS Spriteからアイコンフォントへ移行という項目を読んで、「もうこれでいいや」と思って記事のとおりに必要なアイコンを調達しました。

ただ、最後にダウンロードしたら何故かSVG形式だけしか同包されていなかったので、以下のサービスを使ってttf・woff・eot形式に変換しました。

font-face generator | Convert Fonts | The ultimate font converter

やり方は、目標をセンターに入れてスイッチBrowseボタンからアップロードしてダウンロード。
簡単ですね。

やっとレスポンシブデザイン

このブログとしては初となる、これまで面倒でやっていなかったレスポンシブデザインです。
せっかくの手抜きなので、320px以上の横幅を持つのデバイスに対応させました。

最初モバイルファーストで考えていたのですが、やっぱり面倒になっていろいろ試行錯誤して800pxを基準にそれ以下のデバイスに対応する方針に変わりました。

iframeのレスポンシブ対応

WordPressには元々jQueryが同包されていますので、それを使用して、iframeのレスポンシブ対応をしています。
サイトのコンテンツ部分の横幅と元々の埋め込みコンテンツの縦横比を取得して、iframeに無理やり追記するという荒業。

コンテンツのロード時、リサイズイベント時と両方で処理が走るように書いているので、ブラウザの幅ををグイングイン変えても大丈夫。
ただし動かしすぎて処理が重くなっても知りません。(ブラウザ幅の可変を何度も行うことはブログとして想定外の動作です。)

padding-top: 56.25%;を使ってのレスポンシブ化とかよく聞くんですが、そんなYoutubeだけに特化したクソ対応なんてしたくなかったんです…。

無限スクロール

画面遷移がおっくうなので、jQuery.autopagerを使用して次ページを読み込むようにしました。

jQuery.autopager: Automatic paging plugin for jQuery

記事数が少ないのですぐ底をついてしまうんだけれども。

きっと誰も突っ込んでくれないだろうし

自分から言います。
更に自分ののブログとしての特徴として、記事以外の部分でちょっとだけ小ネタをはさみました。

  • コメントタイトル
  • コメントなしの表示とコメントを受け付けていない表示
  • トラックバック・ピンバックタイトル
  • バナーエリアのタイトル

記事内でネタを挟むのは疲れるし、滑った時やスルーされた時がものすごく悲しいので、次からはほどほどにしようと思っています。
だから、ね、ちょっとくらいは…。

今後の展開(希望)

このテーマを改良たら、俺公式に上げようと思うんだ…

今のところ僕のブログ専用で作ったこのWordPressのテーマですが、せっかくなので改良して汎用に使えるようにしたいと思っています。
そしてあわよくば公式に上げてみようかな…と思っています。

追加コンセプトやカスタマイズの基本仕様はほぼ固まっているので、あとはぼちぼち作っていくだけかなと。

気まぐれに開発するつもりですし、なによりプレッシャーがかかるので期待をしてはいけません。
でも遊びで協力はしてほしかったりします。

ナイ●チかまな板か、それが問題だ

どうでもいい話ですが、開発テーマ名を迷っています。
先に上げた「Flat Chet」という名前を紳士的に貫き通すか「chopping board」という名前でちょっとカモフラージュするか…。
このブログではFlat Chetを採用しましたが、公に出すとなると話は別。

どっちにしろ日本語の(主にそっち方面の)意味は変わらないんですけどね。
どっちがいいか、もし背中を押してくれる人がいれば、コメントとかSNSでメッセージください。

実は5回くらい作りなおしてた

何度か製作途中のデザインを人に見せたりしているのですが、ちょっと捨てるにはもったいないかなーなんて思います。
だれも求めていないだろうけど、途中どんな感じのを作っていたのかを晒しておきますね。

ちなみにコレ、3回目に作りなおしたものです。
さあWordPress化するぞって段階で飽きてやめました

実はもともとのコンセプトが「広告貼りたい」ってことでの上記リンクから見れるデザインを作成したのですが、Google Adsenseの利用の承認を拒否されたので、広告枠を取ることを諦めて方向転換した結果が今回のデザインです。

最後に

ずっとリニューアルする詐欺をしていたのですが、ようやく本当にリニューアルすることができました。
まだまだ作りこまなければいけないところや改良するべきところはたくさんあるのですが、とりあえずはホッとしています。

また、今までは内容てんこもりの記事しか書いていなかったのですが、これを気に小さなことでも恐れずに書ければいいですね。
既存の記事の精査と、カテゴリを整理してわかりやすい構成にしていきたいとも思っています。
というわけで、今後ともGOUTENならびにこのブログをよろしくお願いします。

つまり何が言いたいかって言うと、おっぱいは正義だってこと。