読者です 読者をやめる 読者になる 読者になる

イロイロひとりごと。

ブログのこと、普段の生活のことをつぶやいています

<はてなブログ>レスポンシブデザイン対応のおすすめテーマ22選 2016.8更新

レスポンシブデザイン はてなブログ

ブログをレスポンシブデザインに対応させておくと、PCでもスマホやタブレットでもスクリーンの大きさに合わせて表示してくれます。

 

はてなブログでレスポンシブデザイン対応のテーマを調べましたのでご紹介しますね!

レスポンシブ対応と紹介されていても、表示が切れてしまっているものは除き、おすすめのものを選んであります♪

ぜひ挑戦してみてねー(*´▽`*)

 

目次

公式テーマ

Evergreen

http://blog.hatena.ne.jp/css/theme/evergreen/screenshot-w620.jpg

Evergreen - テーマ ストア

オフィシャルテーマ「Evergreen」

1カラム

 

Journal-Pink

http://blog.hatena.ne.jp/css/theme/journal-pink/screenshot-w620.jpg

Journal-Pink - テーマ ストア

オフィシャルテーマ「Journal-Pink」

1カラム

 

B!KUMA

http://blog.hatena.ne.jp/css/theme/bkuma/screenshot-w620.jpg

B!KUMA - テーマ ストア

オフィシャルテーマ「B!KUMA」

1カラム

 

Reach

http://blog.hatena.ne.jp/css/theme/reach/screenshot-w620.jpg

Reach - テーマ ストア

オフィシャルテーマ「Reach」

2カラム

 

Terminal

http://blog.hatena.ne.jp/css/theme/terminal/screenshot-w620.jpg

 ⇒Terminal - テーマ ストア

オフィシャルテーマ「Terminal」

2カラム

 

ユーザーが作成したデザインテーマ

Innocent

http://cdn.image.st-hatena.com/image/scale/314b481e656c12844ca8042580dd9c383719582a/height=460;version=1;width=620/http%3A%2F%2Fcdn.mogile.archive.st-hatena.com%2Fv1%2Fimage%2Fwaitingmoon%2F302446767179131897.png

Innocent - テーマ ストア

シンプルでカスタマイズ性の高い人気のテーマ

2カラム

 

Brooklyn

http://cdn.image.st-hatena.com/image/scale/7e9a98d90ae0f9bbb293e719e006d1f8e8eb9ae5/height=460;version=1;width=620/http%3A%2F%2Fcdn.mogile.archive.st-hatena.com%2Fv1%2Fimage%2Fshiromatakumi%2F302447785682375631.jpg

Brooklyn - テーマ ストア

ブラックとホワイトを基調としたシンプルな2カラムデザイン

カスタマイズ用のCSSも記述されていてカスタマイズが簡単に行える

 

Blank

http://cdn.image.st-hatena.com/image/scale/bf1a84cec612b04db34e59b87b06f6d33e6ad7cd/height=460;version=1;width=620/http%3A%2F%2Fcdn.mogile.archive.st-hatena.com%2Fv1%2Fimage%2Fwaitingmoon%2F302458882212335580.png

Blank - テーマ ストア

スタイリッシュでカスタマイズ性を重視したシンプルな2カラムテーマ

 

CONTENTS

http://cdn.image.st-hatena.com/image/scale/c329583dec5c2a2f7c861743e49403ff0a7df685/height=460;version=1;width=620/http%3A%2F%2Fcdn.mogile.archive.st-hatena.com%2Fv1%2Fimage%2Fdreamark%2F302450382889713687.png

CONTENTS - テーマ ストア

スタイリッシュな2カラムテーマ

いくつかの使いたい機能のCSSデザインをデフォルトで適用済み

 

Naked

http://cdn.image.st-hatena.com/image/scale/afcb5487aa180ca88cb7220c1380e67a3d9690e7/height=460;version=1;width=620/http%3A%2F%2Fcdn.mogile.archive.st-hatena.com%2Fv1%2Fimage%2Fftmaccho%2F297788247189132655.jpg

Naked - テーマ ストア

オシャレなカスタマイズ向け2カラムテーマ

カスタマイズで有名なゆきひーさん作

 

Spirea

http://cdn.image.st-hatena.com/image/scale/0f9648b3ded9503180870b35445b6e490d34c847/height=460;version=1;width=620/http%3A%2F%2Fcdn.mogile.archive.st-hatena.com%2Fv1%2Fimage%2Fshun_prog0929%2F297787239478858366.png

Spirea - テーマ ストア

カスタマイズ性の高い便利なデザインの2カラムテーマ

作者のshunさんがカスタマイズを詳しく解説しています

 

Minimal Green

http://cdn.image.st-hatena.com/image/scale/2f15d9f595afbf041993b56738f43670f1de25d8/height=460;version=1;width=620/http%3A%2F%2Fcdn.mogile.archive.st-hatena.com%2Fv1%2Fimage%2Fsyofuso_sub%2F316965161679375775.png

Minimal Green - テーマ ストア

白と緑を基調としたシンプルな2カラムテーマ

 

Material

http://cdn.image.st-hatena.com/image/scale/be86af0e070dc2319263594291180dbe9b1a4395/height=460;version=1;width=620/http%3A%2F%2Fcdn.mogile.archive.st-hatena.com%2Fv1%2Fimage%2Fvinton%2F297797313373090337.png

Material - テーマ ストア

マテリアルデザインに沿ったスタイル

デフォルトは1カラム。2カラムに変更可能。

当ブログで使用しています!

 

Chirari

http://cdn.image.st-hatena.com/image/scale/e0fa91cc372b68c0a323408b641dc48a0c7cdf1d/height=460;version=1;width=620/http%3A%2F%2Fcdn.mogile.archive.st-hatena.com%2Fv1%2Fimage%2Frokuzeudon%2F297783317276580965.png

Chirari - チラリ - テーマ ストア

シンプルな2カラムテーマ

最大1000px幅と少しワイド

 

Written

http://cdn.image.st-hatena.com/image/scale/36da104fcefb8c49babf196e853eb96df84e9082/height=460;version=1;width=620/http%3A%2F%2Fcdn.mogile.archive.st-hatena.com%2Fv1%2Fimage%2Fjclv%2F302452789916277357.png

 ⇒Written - テーマ ストア

シンプルでアイコンがかわいい2カラムテーマ

 

Simple Gray

http://cdn.image.st-hatena.com/image/scale/bfb61ed574ed82e5d2fcb3853ae8c474e87b89bd/height=460;version=1;width=620/http%3A%2F%2Fcdn.mogile.archive.st-hatena.com%2Fv1%2Fimage%2Fmr58n%2F302454991816440168.jpg

Simple Gray - テーマ ストア

2カラム

使っている人が多い人気テーマ

 

レスポンシブルー

http://cdn.image.st-hatena.com/image/scale/0e0e315062571cb2a1bc21e6213fc7374a01dbc7/height=460;version=1;width=620/http%3A%2F%2Fcdn.mogile.archive.st-hatena.com%2Fv1%2Fimage%2Fsatotaka99%2F297798873153208763.jpg

レスポンシブルー - テーマ ストア

青色の2カラムテーマです

 

Rouge

http://cdn.image.st-hatena.com/image/scale/706dd312f58d0f69199bd8f42710f63b26181ae3/height=460;version=1;width=620/http%3A%2F%2Fcdn.mogile.archive.st-hatena.com%2Fv1%2Fimage%2Fwedges%2F297795036606253321.png

Rouge - テーマ ストア

アクセントカラーの印象的なヘッダー

2カラム

 

murmur-skyblue

http://cdn.image.st-hatena.com/image/scale/91eb0b7288645fbe368134c22de4295b490a8e8c/height=460;version=1;width=620/http%3A%2F%2Fcdn.mogile.archive.st-hatena.com%2Fv1%2Fimage%2Fkimix%2F302447785701626298.png

murmur - skyblue - テーマ ストア

シンプルにメモを残したい人向け

2カラム

 

Pathbook

http://cdn.image.st-hatena.com/image/scale/28e1fa31068eb3d712b35ab9b0133532ad2a45a9/height=460;version=1;width=620/http%3A%2F%2Fcdn.mogile.archive.st-hatena.com%2Fv1%2Fimage%2Fjclv%2F297791212380895426.png

Pathbook - テーマ ストア

 タイムライン風のシンプルなテーマ

2カラム 

 

ZEN for Hatena Blog

http://cdn.image.st-hatena.com/image/scale/b11d42afa3deaa444c97f0cab72e7e7d051b2390/height=460;version=1;width=620/http%3A%2F%2Fcdn.mogile.archive.st-hatena.com%2Fv1%2Fimage%2Fsngrpx%2F171665885437164901.jpg

ZEN for Hatena Blog - テーマ ストア

1カラム

文字が小さめです。

 

芭蕉

http://cdn.image.st-hatena.com/image/scale/e388f7aec7f935439282861972d9963f054c22d9/height=460;version=1;width=620/http%3A%2F%2Fcdn.mogile.archive.st-hatena.com%2Fv1%2Fimage%2Fnitro_idiot%2F171680557092286179.png

芭蕉 - テーマ ストア

俳句投稿向けテーマ

2カラム

 

まとめ

レスポンシブデザインに対応しているおすすめのテーマを並べてみました!

 お気に入りのテーマを見つけてください(*´ω`*)

他に良さそうなテーマがあれば随時追加していきます!

 

iPhone6とiPad miniで表示確認していますが、保障は致しかねます。

カスタマイズする際はあくまでも自己責任でお願いしますね。

 

私の採用しているこのブログのテーマは

Material - テーマ ストア - はてなブログです。

コチラを2カラムにカスタムして使っています。

 

注意点 

新しいテーマをインストールするときCSSが消えてしまうので、先に元の設定をメモ帳に保存するなどしておいてください。

紹介したテーマを選んでもレスポンシブになっていない場合は、CSSに下記タグを追加してください。

/* Responsive: yes */

 

レスポンシブに対応させる設定は下記記事にて詳しく解説しています。

happylife-tsubuyaki.hatenablog.com

それでは、カスタマイズ楽しんでくださいねー(´艸`*)