イロイロひとりごと。

ブログのこと 日々のことをつぶやいています

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

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

ユーザーが作成したおしゃれで人気のテーマを中心にご紹介します(*´ω`*)

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

ぜひ好みのテーマを見つけてくださいね(*´∀`*)

 

 

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

 

Minimalism

https://cdn.image.st-hatena.com/image/scale/b44a3857eaf89d0fcd705e234f1a7989ab421f89/height=460;version=1;width=620/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Ftheme_screenshot%2F133984985%2F1513927630589888

Minimalism - テーマ ストア

シンプルで美しい人気のテーマ

2カラム

作者:こどみすさん

 

 

Brooklyn

https://cdn.image.st-hatena.com/image/scale/0b7f75b9d3fba1eccb58fd452f310d7423420392/height=460;version=1;width=620/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Ftheme_screenshot%2F111183977%2F1513927624778075

Brooklyn - テーマ ストア

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

2カラム

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

作者:シロマさん

 

Innocent

https://cdn.image.st-hatena.com/image/scale/e41c8fe8a6ff64bcc24761f5fb05c80d39f9e9d7/height=460;version=1;width=620/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Ftheme_screenshot%2F106326521%2F1513927625606569

Innocent - テーマ ストア

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

2カラム

 

Blank

https://cdn.image.st-hatena.com/image/scale/8e1e31535b2877d68b93535cfd12a7183e4e0e06/height=460;version=1;width=620/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Ftheme_screenshot%2F106326521%2F1513927628248846

Blank - テーマ ストア

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

 

CONTENTS

https://cdn.image.st-hatena.com/image/scale/90a8cf432bd04ca699cdeb38ee6ad2005cb81727/height=460;version=1;width=620/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Ftheme_screenshot%2F118586729%2F1513927625651320

CONTENTS - テーマ ストア

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

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

 

はてなブログPro(有料)の方のみ使用できるカード型

はてなブログProを申込みしている方がトップページの表示形式を「一覧形式」にするとカード型で表示できるようになります。

 

Yumekawa

https://cdn.image.st-hatena.com/image/scale/fd7c8d96c91621032aa593d2f50c27771178042f/height=460;version=1;width=620/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Ftheme_screenshot%2F141213641%2F1513927612583723

Yumekawa - テーマ ストア

 かわいらしい配色とデザインのテーマ

カード型/記事ページは2カラム

作者:minimalgreenさん

 

UnderShirt

https://cdn.image.st-hatena.com/image/scale/7c0578a44fcce12ebf9b6adcb39337a944874beb/height=460;version=1;width=620/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Ftheme_screenshot%2F28542263%2F1515190772808669

UnderShirt - テーマ ストア

 カード型でアイキャッチが大きく表示されるシンプルなデザイン

記事ページは2カラム

 

まとめ

レスポンシブデザインに対応しているテーマを7つご紹介しました。

お好みのテーマをインストールして設定してみてくださいね(*´∀`*)

 

PCとiPhone8で表示確認していますが、ご自身でも確認してくださいね。

 

ちなみにこのブログは自作テーマ(非公開)を利用しています。

 

注意点 

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

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

/* Responsive: yes */

 

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

 

関連記事

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

©2014イロイロひとりごと。
当ブログに掲載されている画像を、無断で他サイトへ転載することはご遠慮ください。 文章を引用する際は、引用元として当ブログURLを記載ください。