はてなブログのテーマをレスポンシブ対応する方法

現時点では、はてなブログのテーマはレスポンシブ対応されているものが少なく、
スマホで閲覧する際はデフォルトで用意されているレイアウトのブログが多いと思います。
更に、はてなブログProに申し込んでいない場合は、
スマホデザインのHTMLも追記することが出来ないので、カスタマイズがほとんどできません。
ということで、今回ははてなブログのテーマをレスポンシブ対応し、
デフォルトで用意されているスマホデザインを使用しないようにする方法を紹介します。
ただ、俺氏が使用しているテーマでの対応方法なので、
別のテーマでも同じ方法でうまくいくかは保証しませんのでご注意を。

レスポンシブ対応済みのテーマ

数は少ないのですけど、レスポンシブ対応済みのテーマも一応あるみたいです。
ただ、いくつか試してみたのですけど、あまりしっかり対応されてないものもある感じ。

レスポンシブデザイン対応のはてなブログテーマ一覧まとめ！モバイルからの広告収入を伸ばしたいなら、レスポンシブデザイン必須ですね。 - クレジットカードの読みもの

photo by melopもう何度目かの宣言かわかりませんが、そろそろ広告を貼る予定の当サイト（笑）。しかし、はてなブログの場合、デフォルトのモバイルテンプレ...

デザインCSSを変更する

まず変更するのは以下の画像の赤枠部分

元々はテーマのCSSを読み込む記述だけされていると思います。
ちなみに俺氏が使っているテーマは「Accent Green」ってのを使わせてもらってます。

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

グリーンをアクセントカラーに使ったシンプルなテーマです

変更前

/* <system section="theme" selected="12921228815711202753"> */
@import "http://hatenablog.com/theme/12921228815711202753.css";
/* </system> */

デザインが崩れて戻せなくなったらいけないので、
変更前のデザインCSSの内容はどっかにコピペとかしておいてくださいね。

変更後

/* Responsive: yes */
/* <system section="theme" selected="12921228815711202753"> */
@import "http://hatenablog.com/theme/12921228815711202753.css";
/* </system> */

デザインCSSに以下のコメントを記述することで、

/* Responsive: yes */

Viewportの設定がされるmetaタグが挿入されるようになります。

はてなブログテーマ制作の手引き - ヘルプ - はてなブログ

はてなブログでは、CSSを編集してオリジナルテーマを作ることができます。作成したテーマは、テーマ ストアに投稿して、ほかのはてなブログユーザーに使ってもらうこと...

　
「Accent Green」の場合は特に他のCSSを調整しなくても、
上記のコメントを追加するだけでレスポンシブ対応されるっぽいです。
古いテーマを使っている場合などは、いろいろ調整しないとうまくいかないかも。
　
ちなみに、俺氏はCSSも微妙に変更してたりするので、
最終的なデザインCSSの内容は以下のようになりました。
iPadなどのタブレット端末は特に意識してないので、もしかしたらなんか変かも。。。

/* Responsive: yes */
/* <system section="theme" selected="12921228815711202753"> */
@import "http://hatenablog.com/theme/12921228815711202753.css";
/* </system> */

#main {
    font-size: 90%;
}
#blog-title {
    margin: 0px;
}
#top-editarea {
    text-align: right;
    padding: 0px;
}
#top-editarea table {
    width: 100%;
}
#bottom-editarea {
     text-align: center;
    padding: 0px;   
}
.hatena-module:nth-child(n + 2) {
    margin-bottom: 30px;
    border: 1px solid #cccccc;
    box-shadow: 0 10px 6px -6px #777777;
}
.hatena-module .hatena-module-title {
  position: relative;
  color: #020202;
  background: #7fcbbc;
  font-size: 17px;
  line-height: 1;
  margin: -1px -13px 10px -11px;
  padding: 15px 5px 10px 40px;
  box-shadow: 0 1px 3px #777;
}
.hatena-module .hatena-module-title:after,.hatena-module .hatena-module-title:before {
  content: "";
  position: absolute;
  top: 100%;
  height: 0;
  width: 0;
  border: 5px solid transparent;
  border-top: 5px solid #333;
}
.hatena-module .hatena-module-title:after {
  left: 0;
  border-right: 5px solid #333;
}
.hatena-module .hatena-module-title:before {
  right: 0;
  border-left: 5px solid #333;
}
.entry-see-more {
  position: relative;
  color: rgb(22,160,133);
  color: rgba(22,160,133,.75);
  font-weight: bold;
  text-decoration: none;
  -moz-transition: all 0.3s linear 0;
  -webkit-transition: all 0.3s linear 0;
  -o-transition: all 0.3s linear 0;
  transition: all 0.3s linear 0;
}

.entry-see-more:hover{
  left: -3px;
  top: -3px;
  color: rgb(22,160,133);
  color: rgba(22,160,133,.5);
  text-shadow: 6px 6px rgba(0,0,255,.5);
}
fieldset {
    border: 3px solid #7fcbbc;
    background: #ddd;
    border-radius: 5px;
    padding: 5px;
}

fieldset legend {
    background: #7fcbbc; color: #fff;
    padding: 3px 5px ;
    font-size: 16px;
    border-radius: 5px;
    box-shadow: 0 0 0 5px #ddd;
    margin-left: 10px;
}    
@media screen and (max-width: 320px) {
   /* 表示領域が320px以下の場合に適用するスタイル */
   .spdisp {
       display: block;
   }
   .pcdisp {
       display: none;
   }
}
@media screen and (min-width: 800px) {
   /* 表示領域が800px以上の場合に適用するスタイル */
   .spdisp {
       display: none;
   }
   .pcdisp {
       display: block;
   }
}
/* <system section="background" selected="fff"> */
body{background:#fff;}
/* </system> */

スマホデザインの変更

スマホのデフォルトデザインを使用せずに、
レスポンシブデザインを使用するように設定を変更します。
以下の赤枠部分のチェックをONにするだけです。

ブログのヘッダとかに広告などを貼りつけている場合は、
レスポンシブデザインにすることでスマホユーザーからの収益も見込めるのでちょっとお得かも。
　
ちなみに、俺氏の場合はスマホとPCで表示したい要素を振り分けているので、
PCの場合は横幅の大きい広告、スマホの場合は小さい広告を表示するようにしています。

PCの場合に表示、スマホの場合に非表示にしたい場合

<div class="pcdisp">PCの時だけ表示する広告とか</div>

PCの場合に非表示、スマホの場合に表示したい場合

<div class="spdisp">スマホの時だけ表示する広告とか</div>

みたいな感じ。