はてなブログのレスポンシブデザイン対応のテーマ集33個【随時更新】（スマホでもPCデザインを表示。設定方法も掲載）

はてなテーマストアではレスポンシブに絞ってテーマを検索出来ない

このブログを始める際に、レスポンシブ（スマホでもPCとほぼ同じ表示になる）デザイン対応のテーマ（ブログのデザイン……他のブログで言う所のテンプレート）を探していました。

「はてなテーマストア」というものがあって、そこでテーマを探せるのですが、検索窓やタグのようなものが見当たらず……。

そこで「はてなブログ」に、

「テーマストアでテーマを探す時に、レスポンシブのテーマに絞って探したいのですが、何か方法はありますでしょうか。
一見した所検索窓やタグのようなものが見当たらないのですが、そういった探し方はできないのでしょうか」

と問い合わせてみました。
すると土日を挟んで5日ほどで以下の返答が来ました。

現在のところ、レスポンシブのテンプレートに絞って検索する機能はございませんので、申し訳ございませんが、ご了承くださいますようお願い申し上げます。
ご要望として承りまして、今後のサービス開発の参考とさせていただきます。
はてなサポート窓口からのメール（2015年8月）

う～ん……、今の所自力で探すしかないようです。

という訳で、どなたかのお役に立つかもしれないので、テーマストアやはてなブログ開発ブログから、レスポンシブデザイン対応と判明しているテーマを以下にまとめておきます。

はてなブログのレスポンシブデザイン対応のテーマ

テーマの名前や画像をクリックすると、そのテーマの説明ページをご覧になれます。

オフィシャルテーマ

「Life」

レスポンシブデザインに対応しています

はてなブログ開発ブログ

「Navy Blue」

本デザインテーマはレスポンシブデザインに対応しています

はてなブログ開発ブログ

「Block Memo」

レスポンシブデザインに対応しています

はてなブログ開発ブログ

「Journal-Pink」

レスポンシブデザインに対応しています

はてなブログ開発ブログ

「Evergreen」

Evergreenなど、一部の公式テーマはそのままでもスマートフォンに対応しています

はてなブログ開発ブログ

「B!KUMA」

レスポンシブデザイン対応している公式デザインテーマ（2016年3月9日現在）

はてなブログ開発ブログ

「Reach」

レスポンシブデザイン対応している公式デザインテーマ（2016年3月9日現在）

はてなブログ開発ブログ

「Terminal」

レスポンシブデザイン対応している公式デザインテーマ（2016年3月9日現在）

はてなブログ開発ブログ

「Arrow」

レスポンシブデザイン対応している公式デザインテーマ（2016年3月9日現在）

はてなブログ開発ブログ

「寿司ゆき」

レスポンシブデザイン対応している公式デザインテーマ（2016年3月9日現在）

はてなブログ開発ブログ

非オフィシャルテーマ

「Blank」

レスポンシブデザインに対応しています
Blank - テーマストア

「Written」

レスポンシブデザインに対応しています
Written - テーマストア

「Simple Gray」

一応レスポンシブデザインにも対応しています
Simple Gray - テーマストア

「レスポンシブルー」

レスポンシブで青色のテーマです
レスポンシブルー - テーマストア

「Rouge」

レスポンシブデザイン対応のテーマです
Rouge - テーマストア

「Pathbook」

レスポンシブデザイン
Pathbook - テーマストア

「Material」

レスポンシブ対応
Material - テーマストア

「MJMJB」

レスポンシブデザインに対応しています
MJMJB - テーマストア

「twitter bootstrap style theme」

レスポンシブデザイン対応済み
twitter bootstrap style theme - テーマストア

「Apollo for Hatena Blog」

レスポンシブデザインに対応しています
Apollo for Hatena Blog - テーマストア

「milk green tea」

レスポンシブデザイン対応
milk green tea - テーマストア

「Gravity」

レスポンシブデザインに対応しています
Gravity - テーマストア

「Cinnamon」

ミニマルでレスポンシブな2カラムテーマです
Cinnamon - テーマストア

「Simply Design」

レスポンシブデザインを含めたシンプルなデザイン
Simply Design - テーマストア

「re::design」

レスポンシブに正式に対応しました
re::design - テーマストア

「Mobile-First Responsive」

レスポンシブテーマです
Mobile-First Responsive - テーマストア

「Salmon」

レスポンシブデザインテーマです
Salmon - テーマストア

「FLAT」

レスポンシブデザインになっており
FLAT - テーマストア

「Simple Box」

レスポンシブデザインにふんわり対応しました
Simple Box - テーマストア

「Greeny」

レスポンシブデザインテーマです
Greeny - テーマストア

「Monokai」

レスポンシブテーマです
Monokai - テーマストア

「撫子と桜」

レスポンシブに対応した左側にサイドメニューが配置される2カラムのテーマです
撫子と桜 - テーマストア

「Chirari - チラリ」

レスポンシブ対応のシンプルなブログテーマです
Chirari - チラリ - テーマストア

---

新たに見つけましたら随時追加していく予定です。

はてなブログをレスポンシブデザインにするには

レスポンシブ対応のテーマを選ぶ

上記からお好きなレスポンシブテーマをお選びください。

「スマートフォン」設定の変更

管理画面の「デザイン」をクリック
↓
「スマートフォン」のマークをクリック
↓
「詳細設定」をクリック
↓
「レスポンシブデザイン」にチェック

↓
「変更を保存する」をクリック

テーマのCSSの変更

管理画面の「デザイン」をクリック
↓
「カスタマイズ」（スパナのようなマーク）をクリック
↓
「デザインCSS」をクリック
↓
下に現れるボックスをクリック
↓
下図のような画面が現れる
（念のためこの状態のコードをコピーしておくことをおすすめします）

↓
1行目に

/∗  
Responsive: yes  
∗/

を挿入
（CSSにもともと上記が書いてある場合は何もしなくて大丈夫です）

↓
枠外を適当にクリックすると元の画面に戻る
↓
「変更を保存する」をクリック

---

ソースの変更などは自己責任でお願い致します。
不安な方は必ずファイルのコピーを取っておいてください。