モバイルファーストのレスポンシブテーマ「510」を公開しました

はてなブログのテーマ「510」を公開したので、その紹介をいたします。
「510」はこのブログに使われているテーマのほぼクローンです。

どのような動作をしているのかは、テーマストアのデモページか、このブログを見てもらえればと思います。

特徴

このブログテーマの特徴は「モバイルからのユーザービリティに特化したレスポンシブデザイン」であることです。

レスポンシブデザインとは、PCでもスマホでも、それぞれの端末に応じて最適なデザインを提供するものです。
このデザインの特徴としては、一度設定を行えば、PCでもスマホでも同じコンテンツとなるので、ブログ管理のコストを下げることができます。

モバイルからのトラフィックが増えている昨今、モバイル・タブレット比率は8割を超えています。
この情勢を踏まえて、モバイルファーストで作成したものとなっています。

インストールはこちらから↓

なおこのブログテーマは「Innocent」をベースに改変を行ったものです。
編集ボタンなどはInnocentをそのまま利用させていただいております。

(CC BY 2.1に則り、テーマストアおよびソースコード内に改変元の情報を記載しています)

デモはこちらから↓

レスポンシブデザインのテーマを作成するにあたり、モバイルユーザービリティの改良を行いました。
具体的にどのような点で改良されたのかを紹介します。

なおこれは改変元の「Innocent」やその他のテーマを貶める意図は一切ございません。
予めご了承下さい。

マウスオーバー時の挙動をモバイルや適用させると、タップせず画面に触れただけでマウスオーバーの挙動が発生してしまいます。
そのためスマホ・タブレット時にはマウスオーバーの挙動を止めています。

スマホの画面サイズは年々大きなものが普及していますが、依然として4インチのスマホからのアクセスが有ります。
その状況を鑑みて、モバイル時の余白を全体的に小さく取ることで、4インチのスマホからでも快適に閲覧することができます。

Google Adsenseの「レスポンシブ広告」を利用した時に、それぞれのデバイスにおいて収益性の高い、大きな広告が表示されるサイズを確保しています

PC時は「728×90」、スマホ時は「336×280」が優先的に表示され、4インチのスマホでは「300×250」が表示されます。

タイトルに表示されるナビゲーションメニューを簡単に導入できます。
他のテーマのようにモバイルでのファーストビューに隠れることがないので、ユーザーの回遊に役立ちます。

このブログでの動作を前提に作成したものなので、他の方がインストールしたときに描画がおかしくなることがあるかもしれません。
その際はこちらまでコメントで報告していただければ対応いたします。

こんにちは～☆
早速インストールしてみました☆
ヘッダーカラーを白にしたいのですが
色々調べてみてやってみたものの、白にならなくて…
忙しくない時でよいので、教えていただけると嬉しいです(´･ω･｀)