Material Design（マテリアル デザイン）風のはてなブログテーマ「Material」を公開しました

Material Design（マテリアル デザイン）風のはてなブログテーマを作成しました。

公開したテーマ

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

特徴

(1)さまざまなデバイスで最適に表示される『レスポンシブ対応』

PCやタブレット、スマートフォンなど画面の大きさが異なっても最適な表示をするレスポンシブデザインに対応しています。

(2)記事が読みやすい『ワンカラム』レイアウト

ユーザーに本文に集中してもらうようにワンカラムにしました。
サイドバーで表示されていたものはフッターの上に表示しています。
＜本文＞

＜サイドバーモジュール＞

(3)『Webフォント』を使用することでユーザーの閲覧環境に依存しない読みやすい本文

WindowsやMacでインストールされているフォントが異なっていてもGoogleが提供しているWebフォントを利用することで見え方が共通になります。

(4)Googleの新しいデザインガイドラインであるMaterial Design（マテリアル デザイン）に沿ったスタイル

AndroidやGoogleのサイトでよく見られるようになったデザインに則ってスタイルを指定しています。

(5)ホバーエフェクトや会話風コメント等楽しい要素も入れてみました

コメントを入力するのが楽しくなるようにLINEやFacebookのような会話風レイアウトにしました。
またブログ名をホバーするとアニメーションするようになっています。他にもありますので探してみてください！

レスポンシブ対応にするには？

1.ダッシュボード > デザイン

2.スマートフォン > 詳細設定

「レスポンシブデザイン」にチェック

3.カスタマイズ > デザインcss

一番上の行に下記を追加して保存します

/* Responsive: yes */

動作確認ブラウザ

• Google Chrome 最新版
• Firefox 最新版
• IE 最新版

更新情報

2015/05/02

テーマ公開