ブログをリニーアルしました。

正月休みを利用して、ブログのデザインを大幅にリニューアルしました。

今回のリニューアルではモバイルファーストを徹底するために、レスポンシブWebデザインを採用しました。

スマホ等、制約の多いモバイル端末を基準とするため、デザイン面だけでなく、情報量も大幅にカットしました。

ベースにしましたのは、POINTというFreeのWorPressテーマです。

iPhoneからのトップページは、こんな感じです。(Portrait mode)

01-top画面01

いきなり広告ですが、google AdSenceのレスポンシブ広告ユニット(ベータ)です。

追記:2014.01.12
上の様なファーストビューはAdSenseのルール違反である事が判明しましたので、修正しました。詳しくはこのエントリーで。
iPhoneを横位置(Landscape mode)にすると、

02-top画面02

広告もフレキシブルに表示が変化します。

Menuのバーをタップすると、

03-top画面03menu

このようにメニューが表示されます。

WPTouchの時はメニューへの登録が限られていましたが、今回は主立ったカテゴリーもメニューに登録しました。

画面を下へ進めていくと、

04-top画面04

最近のエントリーリストがアイキャッチ画像付きで表示されます。

エントリーリストの最後には、ページネーションを付けました

05-top画面05

さらに下へ進めると、サイドバーにあたるコンテンツが次々と表示されて来ます。

06-top画面06

カテゴリーは、これを機に階層化してみました。

07-top画面07

また月別アーカイブは、プルダウンメニューにて簡略化しました。

タグの表示が最後です。

08-top画面08

個別ページは、こんな感じになります。

09-個別画面01

個別ページの下には、関連する記事リストが、アイキャッチ画像付きで表示されます。

10-個別画面02

Porfolioの、ポートレイトモード(縦)表示。

11-ホートフォリオ01

ランドスケープモード(横表示)にすると、サムネイルの表示も合わせて変化します。

12-ホートフォリオ02

スライドショーのアニメーションも、正常に動きます。

13-ホートフォリオ03

次にiPadのポートレートモード(縦表示)です。

iPhoneでは下の方に表示されいてたサイドバーが並列して表示され、2カラムの表示になります

14-iPad01

iPadのランドスケープモード(横表示)では、プルダウンのメニューが、グローバルナビゲーションのように変化します。

15-iPad02

個別ページの表示でもサイドバーは落ちず、2カラムの表示です。

14-iPad01

PCでの作動確認は、Fiirefox、Crome、Safariで行いましたが、Window7、MacOS10.9共に正常でした。

Explorer(IE)に関しては、色々ネットでしらべて試しましたがダメでした。(カラムが変化しない等、色々と不具合有り)

今まではメジャーブラウザとして、IEには一定の配慮をして来ました。

しかし、リニューアルの趣旨が「モバイルファースト」である事から、今回は断念しました。

恐れ入りますがWindowsPCからは、IE以外のブラウザでご覧下さい。

「レスポンシブWebデザインをIE8に対応させる方法」の情報を元に、かなりいい線まで解決する事が出来ました。

尚、PC→タブレット→スマホと、ディスプレイサイズに適応してデザインが変化して行く様子をブラウザで再現した、デモビデオを作成しました。

ぜひご覧下さい。(次のページです)

Sponsored Links

8 Comments

Add a Comment

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください