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

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

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

特徴

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

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

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

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

改変元

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

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

デザイン

デモはこちらから↓

PCでの表示

スマホでの表示

具体的に何が優れているのか

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

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

マウスオーバーの挙動をPCのみに限定

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

スマホでの表示領域を広く

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

広告収益の最適化

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

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

モバイル優先のナビゲーション

f:id:hogehoge223:20161207184245p:plain

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

関連リンク

ナビゲーションの設置方法はこちらの記事を参考にして下さい。

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

フィードバック

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

4 件のコメント

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

  • > キティーさん
    ありがとうございます!
    ちなみにこのテーマとヘッダー画像の相性結構悪いんですよね…。
    どうしても独自にCSS書かないといけないので、キティーさんのブログのコメント欄に上書きするCSSを投稿しますね。

  • わーい☆ありがとうございます(。6ᴗ6。)
    インストールしたものの、
    前とそこまで変わってなくてごめんなさいです(´。.. 。` )

  • > キティーさん
    すいません、結構長ったらしいコードになったのでTwitterのDMで送りました。
    ご確認下さい!

  • hogehoge223 へ返信する コメントをキャンセル

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