ウェブ学のすすめ

Study of Web Design & Programing

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


f:id:vinton:20150502200204p:plain

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

特徴

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

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

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

ユーザーに本文に集中してもらうようにワンカラムにしました。
サイドバーで表示されていたものはフッターの上に表示しています。
<本文>
f:id:vinton:20150502210417p:plain
<サイドバーモジュール>
f:id:vinton:20150502210427p:plain

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

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

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

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

f:id:vinton:20150502211214p:plain

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

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

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

1.ダッシュボード > デザイン
2.スマートフォン > 詳細設定

「レスポンシブデザイン」にチェック
f:id:vinton:20150502211959p:plain

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

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

/* Responsive: yes */

f:id:vinton:20150502212011p:plain

動作確認ブラウザ

更新情報

2015/05/02

テーマ公開