はてなブログのレスポンシブデザイン対応のテーマ集33個【随時更新】(スマホでもPCデザインを表示。設定方法も掲載)
はてなテーマストアではレスポンシブに絞ってテーマを検索出来ない
このブログを始める際に、レスポンシブ(スマホでもPCとほぼ同じ表示になる)デザイン対応のテーマ(ブログのデザイン……他のブログで言う所のテンプレート)を探していました。
「はてなテーマストア」というものがあって、そこでテーマを探せるのですが、検索窓やタグのようなものが見当たらず……。
そこで「はてなブログ」に、
一見した所検索窓やタグのようなものが見当たらないのですが、そういった探し方はできないのでしょうか」
と問い合わせてみました。
すると土日を挟んで5日ほどで以下の返答が来ました。
現在のところ、レスポンシブのテンプレートに絞って検索する機能はございませんので、申し訳ございませんが、ご了承くださいますようお願い申し上げます。
ご要望として承りまして、今後のサービス開発の参考とさせていただきます。
はてなサポート窓口からのメール(2015年8月)
う~ん……、今の所自力で探すしかないようです。
という訳で、どなたかのお役に立つかもしれないので、テーマストアやはてなブログ開発ブログから、レスポンシブデザイン対応と判明しているテーマを以下にまとめておきます。
はてなブログのレスポンシブデザイン対応のテーマ
テーマの名前や画像をクリックすると、そのテーマの説明ページをご覧になれます。
オフィシャルテーマ
レスポンシブデザインに対応しています
はてなブログ開発ブログ
本デザインテーマはレスポンシブデザインに対応しています
はてなブログ開発ブログ
レスポンシブデザインに対応しています
はてなブログ開発ブログ
レスポンシブデザインに対応しています
はてなブログ開発ブログ
Evergreenなど、一部の公式テーマはそのままでもスマートフォンに対応しています
はてなブログ開発ブログ
レスポンシブデザイン対応している公式デザインテーマ(2016年3月9日現在)
はてなブログ開発ブログ
レスポンシブデザイン対応している公式デザインテーマ(2016年3月9日現在)
はてなブログ開発ブログ
レスポンシブデザイン対応している公式デザインテーマ(2016年3月9日現在)
はてなブログ開発ブログ
レスポンシブデザイン対応している公式デザインテーマ(2016年3月9日現在)
はてなブログ開発ブログ
レスポンシブデザイン対応している公式デザインテーマ(2016年3月9日現在)
はてなブログ開発ブログ
非オフィシャルテーマ
レスポンシブデザインに対応しています
Blank - テーマストア
レスポンシブデザインに対応しています
Written - テーマストア
一応レスポンシブデザインにも対応しています
Simple Gray - テーマストア
レスポンシブで青色のテーマです
レスポンシブルー - テーマストア
レスポンシブデザイン対応のテーマです
Rouge - テーマストア
レスポンシブデザイン
Pathbook - テーマストア
レスポンシブ対応
Material - テーマストア
レスポンシブデザインに対応しています
MJMJB - テーマストア
「twitter bootstrap style theme」
レスポンシブデザイン対応済み
twitter bootstrap style theme - テーマストア
レスポンシブデザインに対応しています
Apollo for Hatena Blog - テーマストア
レスポンシブデザイン対応
milk green tea - テーマストア
レスポンシブデザインに対応しています
Gravity - テーマストア
ミニマルでレスポンシブな2カラムテーマです
Cinnamon - テーマストア
レスポンシブデザインを含めたシンプルなデザイン
Simply Design - テーマストア
レスポンシブに正式に対応しました
re::design - テーマストア
レスポンシブテーマです
Mobile-First Responsive - テーマストア
レスポンシブデザインテーマです
Salmon - テーマストア
レスポンシブデザインになっており
FLAT - テーマストア
レスポンシブデザインにふんわり対応しました
Simple Box - テーマストア
レスポンシブデザインテーマです
Greeny - テーマストア
レスポンシブテーマです
Monokai - テーマストア
レスポンシブに対応した左側にサイドメニューが配置される2カラムのテーマです
撫子と桜 - テーマストア
レスポンシブ対応のシンプルなブログテーマです
Chirari - チラリ - テーマストア
新たに見つけましたら随時追加していく予定です。
はてなブログをレスポンシブデザインにするには
レスポンシブ対応のテーマを選ぶ
上記からお好きなレスポンシブテーマをお選びください。
「スマートフォン」設定の変更
管理画面の「デザイン」をクリック
↓
「スマートフォン」のマークをクリック
↓
「詳細設定」をクリック
↓
「レスポンシブデザイン」にチェック
↓
「変更を保存する」をクリック
テーマのCSSの変更
管理画面の「デザイン」をクリック
↓
「カスタマイズ」(スパナのようなマーク)をクリック
↓
「デザインCSS」をクリック
↓
下に現れるボックスをクリック
↓
下図のような画面が現れる
(念のためこの状態のコードをコピーしておくことをおすすめします)
↓
1行目に
/∗ Responsive: yes ∗/
を挿入
(CSSにもともと上記が書いてある場合は何もしなくて大丈夫です)
↓
枠外を適当にクリックすると元の画面に戻る
↓
「変更を保存する」をクリック
ソースの変更などは自己責任でお願い致します。
不安な方は必ずファイルのコピーを取っておいてください。