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

イロイロひとりごと。

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

スポンサーリンク

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

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

2015.5.30 加筆

 

私のブログ、レスポンシブデザインに対応させました。

やり方はコチラの記事で紹介しています。

happylife-tsubuyaki.hatenablog.com

 

PCでも、スマホやタブレットでも、スクリーンの大きさに合わせて表示してくれているハズです。

  

その際レスポンシブ対応のテーマを幾つか調べたし、せっかくなのでご報告します!
ぜひ挑戦してみて(*uωu*)σ
 

公式テーマ

7テーマ

 1カラム

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

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

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

オフィシャルテーマ「Arrow」です。

 

B!KUMA - テーマ ストア - はてなブログB!KUMA - テーマ ストア - はてなブログ

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

 

 

2カラム

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

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

 

ヨミカキ by kanahei - テーマ ストア - はてなブログヨミカキ by kanahei - テーマ ストア - はてなブログ

オフィシャルテーマ「ヨミカキ by kanahei」です。

ブログ紹介文が少し切れています。

 

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

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

 

寿司ゆき - テーマ ストア - はてなブログ寿司ゆき - テーマ ストア - はてなブログ

オフィシャルテーマ「寿司ゆき」です。

 

 

その他のテーマ

12テーマ

1カラム

ZEN for Hatena Blog - テーマ ストア - はてなブログZEN for Hatena Blog - テーマ ストア - はてなブログ

Tumblr テーマ「ZEN」をはてなブログに移植したデザインテーマです。ZEN は、普通の日記を普通に書きたい人のためのテーマです。http://sanogr...

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

Material Design(マテリアル デザイン)風のはてなブログテーマを作成しました。特徴(1)さまざまなデバイスで最適に表示される『レスポンシブ対応』(...

 

2カラム

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

シンプルな2カラムテーマです。文章や写真をすっきり見せたい方に。レスポンシブデザインに対応しています。[デモ]http://written.hatenablog...

 

Simple Gray - テーマ ストア - はてなブログSimple Gray - テーマ ストア - はてなブログ

薄いグレーが背景のシンプルな2カラムレイアウトのテーマです。一応レスポンシブデザインにも対応しています。サイドバーのタイトルは英語表記か日本語表記どちらかに統一...

 

 

 レスポンシブルー - テーマ ストア - はてなブログレスポンシブルー - テーマ ストア - はてなブログ

レスポンシブで青色のテーマです。動作確認Mac OS X 10.8.5Safari最新版Chrom

 

 

 

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

シンプルかつクリーンなイメージのテーマです。はてなブックマークブログパーツの「人気エントリー」のスタイル設定済です。http://tsunagime.haten...

 

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

サーモンカラーのシンプルな レスポンシブデザインテーマです。ラベンダーカラー版はLavenderです。更新履歴2014.11.10 公開

 

murmur - skyblue - テーマ ストア - はてなブログmurmur - skyblue - テーマ ストア - はてなブログ

blue -- dash -- murmurシンプルにメモを残したいひとむけです===2013.12.10===サイドバーにinstagramを表示させたい場...

 

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

タイムライン風のシンプルなテーマです。レスポンシブデザインで、画面サイズに合わせて3種類のレイアウトを用意しています。ヘッダカラムの背景は、ダッシュボードで設定...

 

 

芭蕉 - テーマ ストア - はてなブログ芭蕉 - テーマ ストア - はてなブログ

俳句投稿用ブログテーマです。1エントリにつき1つ俳句を投稿するような日記に向いています。俳句の下には普通の文章を書くことができますので、普通にブログとして使いた...

 
 
murmur - babypink - テーマ ストア - はてなブログmurmur - babypink - テーマ ストア - はてなブログ

グレイとピンクの、シンプルなテーマです===2013.12.20===サイドバーにinstagramを表示させたい場合はこちらのサイトでちょちょっと設定して(2...

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

シンプル、そしてレスポンシブデザイン対応のテーマです。印象的なヘッダーと、サイドバー領域を多く表示することの両立を目指しました。アクセントカラーの変更のしやすさ...

 

人気のありそうなところは試しましたが、すべて試した訳ではないので、まだあると思います。

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

 

まとめ

 

意外とあるなぁ、という印象でした。

 

気に入ったテーマを見つけてください!

新しいテーマをインストールするとき、CSSが消えてしまうので、

先に元の設定をメモ帳に保存するなどしておいてください。

 

/* Responsive: yes */

このタグも消えるので、それも忘れずに入れ直してね。

 

 

私の採用しているテーマはiPhone6とiPad miniで表示確認しました。

このブログは

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

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

 

iPhone6で表示確認していますが、一切保障はしませんので。

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

 

 

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