はてなブログのテーマ「510」を公開したので、その紹介をいたします。
「510」はこのブログに使われているテーマのほぼクローンです。
どのような動作をしているのかは、テーマストアのデモページか、このブログを見てもらえればと思います。
特徴
このブログテーマの特徴は「モバイルからのユーザービリティに特化したレスポンシブデザイン」であることです。
レスポンシブデザインとは、PCでもスマホでも、それぞれの端末に応じて最適なデザインを提供するものです。
このデザインの特徴としては、一度設定を行えば、PCでもスマホでも同じコンテンツとなるので、ブログ管理のコストを下げることができます。
モバイルからのトラフィックが増えている昨今、モバイル・タブレット比率は8割を超えています。
この情勢を踏まえて、モバイルファーストで作成したものとなっています。
インストールはこちらから↓
改変元
なおこのブログテーマは「Innocent」をベースに改変を行ったものです。
編集ボタンなどはInnocentをそのまま利用させていただいております。
(CC BY 2.1に則り、テーマストアおよびソースコード内に改変元の情報を記載しています)
デザイン
デモはこちらから↓
PCでの表示
スマホでの表示
具体的に何が優れているのか
レスポンシブデザインのテーマを作成するにあたり、モバイルユーザービリティの改良を行いました。
具体的にどのような点で改良されたのかを紹介します。
なおこれは改変元の「Innocent」やその他のテーマを貶める意図は一切ございません。
予めご了承下さい。
マウスオーバーの挙動をPCのみに限定
マウスオーバー時の挙動をモバイルや適用させると、タップせず画面に触れただけでマウスオーバーの挙動が発生してしまいます。
そのためスマホ・タブレット時にはマウスオーバーの挙動を止めています。
スマホでの表示領域を広く
スマホの画面サイズは年々大きなものが普及していますが、依然として4インチのスマホからのアクセスが有ります。
その状況を鑑みて、モバイル時の余白を全体的に小さく取ることで、4インチのスマホからでも快適に閲覧することができます。
広告収益の最適化
Google Adsenseの「レスポンシブ広告」を利用した時に、それぞれのデバイスにおいて収益性の高い、大きな広告が表示されるサイズを確保しています
PC時は「728x90」、スマホ時は「336x280」が優先的に表示され、4インチのスマホでは「300x250」が表示されます。
モバイル優先のナビゲーション
タイトルに表示されるナビゲーションメニューを簡単に導入できます。
他のテーマのようにモバイル時にファーストビューに隠れることがないので、ユーザーの回遊に役立ちます。
今後行いたいこと
現在は青ベースのデザインですが、赤やオレンジ、緑などの異なる色のテーマを配布することも考えています。
フィードバック
このブログでの動作を前提に作成したものなので、他の方がインストールしたときに描画がおかしくなることがあるかもしれません。
その際はこちらまでコメントで報告していただければ対応いたします。