ブログのデザインをリニューアルしました。今回のテーマは『WP touchを止めて、Let's レスポンシブ！！』

ブログのデザインをリニューアルしました！

このブログを始めて約半年。
「wordpressって何だ？」「HTMLは何となく知ってるけど、CSSって何だ？」という状況から、「それでも自作のテーマを作りたい！」をコンセプトにフルスクラッチで自作したテーマで運用してきた半年間。
それこそ、「文字サイズ」とか「字間」というレベルでの変更は毎日のようにやっていて、ごにょごにょとテンプレートファイルをこねくり回した半年間だったわけですが、ここらで一旦ゼロからテーマを作り直したい欲求にかられてきてしまいまして。

今回も試行錯誤しながら、ブログの更新もガッツリとサボりつつ、どうにか新テーマの公開にこぎつけました。

今回も突貫で作った部分は多く、早くも「あ！ここ直さなきゃ。。。」という箇所はいくつも見つかっていたりもするんですが、ひとまずここで一旦公開。
ちなみに、今回のデザインの一番のテーマは、「レスポンシブデザイン」です。

Contents

1 きっかけは、『WP Touch』という神プラグインへの不満。
2 ちなみに、裏テーマは、、、
3 というわけで、ultimate-ez.comはこんな感じになりました。
4 というわけで、、、

きっかけは、『WP Touch』という神プラグインへの不満。

というわけで、「とりあえずレスポンシブ！」というノリで一気に作り上げた今回のテーマなんですが、そもそもテーマを作りなおそうと決めたきっかけは、これまで使っていた『WP touch』というプラグインへの不満からでした。

『WP Touch』をざっくり説明すると、＜インストールしておけば勝手にスマホ用のデザインを作ってくれるプラグイン＞。
非常に便利なプラグインなので、wordpressで運用してるブログでの使用率は非常に高いプラグインなんですが、なんとこのプラグインがAndroidのJelly Beansというバージョンに対応していないことに気づいてしまいまして。。。

ちなみに、＜対応していない＞とはこういうこと。

–

PC版のデザインが表示されるならまだしも、どうやらヘッダーをまるっと読み込めていないっぽい。
CSSなしの「素」がさらされるので、かなりみっともないことになっています。
（しかもやっかいなことに、キャッシュ系のプラグインを入れていると、iPhone向けのキャッシュが表示されるという鬼仕様。スマホ対応の確認をiPhone⇛JellyBeans端末の順番でやると見落としてしまってアウトです。エグい！！）

Jelly Beans(Android4.1)と言えば、今爆売れ中のスマホ『Xperia Z』や『INFOBAR A02』など、最新機種の多くが採用しているOS。もちろんシェアは激増中です。

「こりゃあなんとかせんといかん！」ということで、WP Touchに頼らずにレスポンシブデザインでスマホやらタブレットやらにも対応することにしました。

まあ、「こちらの記事に影響に感化された」というのも大きな理由なんですけどね。
参考記事：WordPressブロガーはもうそろそろ「WPtouch」外してもいいと思うの*frasm

ちなみに、裏テーマは、、、

というわけで、「レスポンシブデザイン」のお勉強というのが今回のリニューアルの第一の目的だったわけですが、裏テーマ的なものもありまして。

それは、直帰率を下げて、リピーターを増やす！というもの。

実は、今月の上旬くらいからGoogleから当ブログへの流入が激減していまして。
当然ブログのPVもがんがん下がっているんですよ。

何が原因なのかもよくわからないし、SEO対策的なことを何もやっていないので、流入が少ないのは当然のことなのかもしれないけれど、せっかく書いた文章を誰にも読んでもらえないというのはなかなか悲しいものがありまして。
それでもGoogleのページランクなんてものは、僕がどうこうできることでもないので、どうこう出来る部分を強化していきましょうということで、各ページの下部にこんなものを置くことにしました。

かなり“ベタ“ですが、ブログの更新情報を流している「Twitter」「Facebookページ」「RSS」へのリンクです。
なんだかここ数日のニュースで「RSSの時代の終焉」を感じていたりもするんですが、きっとまだ効果はあるはず！これでリピーターが増えるはず！！

そして、これまた“ベタ中のベタ”ですが、関連記事。
ブログに訪問していただいた方に、プラスもう一記事を読んでもらえたら。。。効果があるはず！これで直帰率が下がるはず！！

というわけで、ultimate-ez.comはこんな感じになりました。

さて、ここから先は、「今回のリニューアルで何をやったっけ？」の記録。
つまりは、完全に僕自身のための備忘録ですので、そこんとこよろしく！！

まずはPC版のデザインは、、、

トップページはこうなりました。
＜旧＞
＜新＞

個別の投稿ページは、こう！
＜旧＞
＜新＞

一覧系のページは、、、（てか、旧デザインはCSSあたってなかった。。。今更ですが。。。）
＜旧＞
＜新＞

続いてタブレット版のデザインは、、、

こちらもトップページから、、、
＜旧・縦画面＞
＜新・縦画面＞

＜旧・横画面＞
＜新・横画面＞

続いて投稿ページ。
＜旧・縦画面＞
＜新・縦画面＞

＜旧・横画面＞
＜新・横画面＞

そして最後はスマホ版！

こちはトップページ＋投稿ページをまとめて！
＜旧・縦画面＞

–

＜新・縦画面＞

–

＜旧・横画面＞

＜新・横画像＞

ちなみに、スマホ版でのメニューは、いかにも「スマホっぽい」動きをいれてみました。

というわけで、、、

こんな感じで今回のリニューアルは一応完了。
よみやすい文字サイズや文字色など、もう少し練りたい部分はあるので、今回もちょこちょこ修正を入れながら、少しづつ良いデザインにしていきたいものです。

また、“見た目”の部分以外にもいろいろと修正したいところが。
取り急ぎはこちらの記事にあるように、wordpressのループの動きなど見直したいものです。
うちでもquery_post多様しているので！
query_postsを捨てよ、pre_get_postsを使おう【追記あり】 | notnil creation weblog

というわけで、新デザインになって生まれ変わったultimate-ez.com。明日からの更新は相変わらず映画の感想ばかりになると思いますが、これからもよろしくお願いします。
そして、「ここ、デザインヤバいんですよ！」というところを見つけてしまわれた方は、こそこそっと僕に教えていただけると幸いなのでした。

やはり今回も、ベースとなるのはこの本でした。