クレジットカードの読みもの

クレジットカードに関する様々な知識や使い方を「読みもの」として紹介していくサイトです。

レスポンシブデザイン対応のはてなブログテーマ一覧まとめ!モバイルからの広告収入を伸ばしたいなら、レスポンシブデザイン必須ですね。

http://www.flickr.com/photos/23935695@N00/88920701

photo by melop

もう何度目かの宣言かわかりませんが、そろそろ広告を貼る予定の当サイト(笑)。しかし、はてなブログの場合、デフォルトのモバイルテンプレートでは広告掲載の自由度がかなり低いデメリットがあるんですよね。

  • PCから閲覧…広告を最適化しやすい
  • モバイルからの閲覧…広告を掲載しにくい

現状だとだいた50%くらいがモバイルからのアクセスなので、極端に言ってしまえば、このままだと50%分の広告収入をまるごと捨ててしまうことになってしまいます。広告最適化を考えるなら、かなり勿体無いですよね、これ。

PCデザインのまま、カスタマイズしよう:

そんな悩みを解決してくれる機能を、はてなブログでは先日、開発してくれました。それがPC向けのデザインをスマホなどモバイルからの閲覧でも適用してくれる機能です。

はてなブログでは、ブログのデザインをカスタマイズする機能として、スマートフォンから閲覧したときにもPCと同じデザインテーマで表示するオプションを追加しました。

この機能を利用すれば、スマートフォンからの閲覧時にも最適な広告を表示することが出来るようになるため、広告収入アップにも確実に繋がります。

レスポンシブデザイン対応のテーマは少ない:

しかし、実は問題もあるんですよね。それが、ほとんどのはてなブログテーマがレスポンシブデザインに対応していないということ。

現在、当サイトで今利用しているブログテーマ(Module)についても、レスポンシブデザインに対応していないテーマなので、モバイルから閲覧するとサイドメニューが出る、文章を読みにくいデザインです。

これだとむしろ、モバイルから得られる広告収入は落ちてしまうことでしょう。

レスポンシブデザイン対応テーマ一覧:

http://www.flickr.com/photos/36521982811@N01/493564363

photo by *spo0ky*

そこで前置きが長くなりましたが、今回はレスポンシブデザインに対応しているお薦めのはてなブログテーマを見つけてみました。モバイルからの広告収入も増やしたい!という方は是非、これらのテーマを活用してみてくださいね。

2カラムのレスポンシブデザインテーマ:

まずは貴重な2カラムのレスポンシブデザインテーマから。見つけるの、結構苦労しました(汗)。実際にそれらのテーマを利用中のブログもいくつか紹介させてもらいます(デザインの参考にしてみてください*1)。

レスポンシブブルー:
レスポンシブルー - テーマ ストア - はてなブログレスポンシブルー - テーマ ストア - はてなブログ

レスポンシブで青色のテーマです。動作確認Mac OS X 10.8.5Safari最新版Chrome最新版Firefox最新版Windows 7IE8Chrom...

名前からしてレスポンシブデザイン適用テーマですね。使い勝手も非常に良さそうです。

re::design:
re::design - テーマ ストア - はてなブログre::design - テーマ ストア - はてなブログ

自分のブログに使うために作りました。まだ作成段階です。確認済みブラウザーWindows 8.1 Pro with Media Center, Windows I...

タイトル部分に特徴をもたせやすいブログテーマです。まだまだ改良が加えられそうな感じですね。

Mono:
Mono - テーマ ストア - はてなブログMono - テーマ ストア - はてなブログ

白黒で落ち着いた感じのテーマです。はてな記法が利用できます。

モノクロのシンプルなデザインテーマです。デザインを広げていきやすいシンプルさですね(残念ながら、iPhoneだと折りたたまれない感じです)。

Fresh Green:
Fresh Green - テーマ ストア - はてなブログFresh Green - テーマ ストア - はてなブログ

シンプルかつクリーンなイメージのテーマです。はてなブックマークブログパーツの「人気エントリー」のスタイル設定済です。http://tsunagime.haten...

グリーン色したシンプルなデザイン。いろいろなCSS調整がすでに済んでいるので、使いやすいテーマかもしれません(残念ながら、iPhoneだと折りたたまれない感じです)。

芭蕉:
芭蕉 - テーマ ストア - はてなブログ芭蕉 - テーマ ストア - はてなブログ

俳句投稿用ブログテーマです。1エントリにつき1つ俳句を投稿するような日記に向いています。俳句の下には普通の文章を書くことができますので、普通にブログとして使いた...

 俳句投稿用…らしいですけれども、それ以外にも使えそうなテーマです。

murmur-skyblue:
murmur - skyblue - テーマ ストア - はてなブログmurmur - skyblue - テーマ ストア - はてなブログ

blue -- dash -- murmurシンプルにメモを残したいひとむけです===2013.12.10===サイドバーにinstagramを表示させたい場...

非常にシンプルな感じのテーマです。文章主体でも、写真掲載にも向いていそうです(iPhoneからだと、縮小表示してしまう模様)。

murmur-babypink:
murmur - babypink - テーマ ストア - はてなブログmurmur - babypink - テーマ ストア - はてなブログ

グレイとピンクの、シンプルなテーマです===2013.12.20===サイドバーにinstagramを表示させたい場合はこちらのサイトでちょちょっと設定して(2...

ややシンプル過ぎるかな?という気もしますが、女性の方にはこのくらい淡くシンプルなほうが良いのかもしれません(iPhoneからだと、縮小表示してしまう模様)。

以上が2カラムデザインに対応したレスポンシブなはてなブログテーマです。

1カラムのはてなブログテーマ一覧:

次に1カラムのはてなブログテーマです。

こちらは探せばいくらでも出てきそうなので、適当に2つほどピックアップしてみました(1カラムでもレスポンシブデザイン対応していないものもある)。

Alice in Wonderland - テーマ ストア - はてなブログAlice in Wonderland - テーマ ストア - はてなブログ

不思議の国のアリスをモチーフにしましたブログタイトル・ブログの説明は半角英数字を推奨します130604修正コメント部分を調整サイドバーモジュールを4件以上置いた...

ZEN for Hatena Blog - テーマ ストア - はてなブログZEN for Hatena Blog - テーマ ストア - はてなブログ

Tumblr テーマ「ZEN」をはてなブログに移植したデザインテーマです。ZEN は、普通の日記を普通に書きたい人のためのテーマです。http://sanogr...

レスポンシブデザイン対応テーマに変えよう:

http://www.flickr.com/photos/97041449@N00/2861358845

photo by loungerie

以上、レスポンシブデザイン対応のはてなブログテーマ一覧まとめ!モバイルからの広告収入を伸ばしたいなら、レスポンシブデザイン必須ですね…という話題でした。

当サイト『クレジットカードの読みもの』も今夜か明日あたりに、レスポンシブデザイン対応のテーマに変更したいと思っています。やはりスマホから見た時のカスタマイズ性が高いほうが有り難いですからね。

今後ともクレジットカードの読みものをよろしくお願いいたします。

参考リンク:

ブログのデザインを変更するとどのような効果があるのかよくわからない…という方は、下記記事なども参考に。デザインの改善点やアクセスアップ手法などをまとめています。

news.cardmics.com

*1:通常、スマホから見たデザインについては、各ブログ自体が設定でPC用デザイン適用にしていないと、デフォルトのはてなブログデザインが表示されます。しかし、最下層部にある『PC版』というところをクリックすれば、問題なくレスポンシブされたデザインを確認可能です。

PAGE TOP