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

スクリーンショット 2013 03 27 23 45 34ブログのデザインをリニューアルしました!

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

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

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

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

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

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

ちなみに、<対応していない>とはこういうこと。

Screenshot 2013 03 26 13 55 05Screenshot 2013 03 26 13 55 25

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

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

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

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

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

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

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

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

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

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

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

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

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

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

トップページはこうなりました。
<旧>スクリーンショット 2013 03 27 22 07 41
<新>スクリーンショット 2013 03 27 22 09 04

個別の投稿ページは、こう!
<旧>スクリーンショット 2013 03 27 22 08 01
<新>スクリーンショット 2013 03 27 22 09 21

一覧系のページは、、、(てか、旧デザインはCSSあたってなかった。。。今更ですが。。。)
<旧>スクリーンショット 2013 03 27 22 08 29
<新>スクリーンショット 2013 03 27 22 11 18

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

こちらもトップページから、、、
<旧・縦画面>IOSシミュレータのスクリーンショット 2013 03 27 22 03 56
<新・縦画面>IOSシミュレータのスクリーンショット 2013 03 27 22 02 15

<旧・横画面>IOSシミュレータのスクリーンショット 2013 03 27 22 03 30
<新・横画面>IOSシミュレータのスクリーンショット 2013 03 27 22 02 37

続いて投稿ページ。
<旧・縦画面>IOSシミュレータのスクリーンショット 2013 03 27 22 03 49
<新・縦画面>IOSシミュレータのスクリーンショット 2013 03 27 22 01 50

<旧・横画面>IOSシミュレータのスクリーンショット 2013 03 27 22 03 39
<新・横画面>IOSシミュレータのスクリーンショット 2013 03 27 22 02 45

そして最後はスマホ版!

こちはトップページ+投稿ページをまとめて!
<旧・縦画面>

IOSシミュレータのスクリーンショット 2013 03 27 22 04 35IOSシミュレータのスクリーンショット 2013 03 27 22 04 50

<新・縦画面>

IOSシミュレータのスクリーンショット 2013 03 27 21 58 04IOSシミュレータのスクリーンショット 2013 03 27 21 59 04

<旧・横画面>
IOSシミュレータのスクリーンショット 2013 03 27 22 05 32
<新・横画像>
IOSシミュレータのスクリーンショット 2013 03 27 22 00 06

ちなみに、スマホ版でのメニューは、いかにも「スマホっぽい」動きをいれてみました。
IOSシミュレータのスクリーンショット 2013 03 27 21 58 36

というわけで、、、

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

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

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

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です