デザインテーマを変えてしまいました(*´ｪ`*)
素敵なデザインをみつけたので。
そして少し自分の色に染めてみました。
テーマ『Material』に変更
フラットデザインは最近よく聞きますが、マテリアルデザインというのを初めて知りました（笑）
これはみなさん常識なコトでしょうか…？
ひよっこブロガーのもっちはようやく知りましたよ。
しっかりGoogle先生に教えていただいて、素敵なデザインを理解した上で利用させていただくことにしました。
私的には会話風のコメントがツボです。
カスタム記録
私が変更させてもらったのは、主に４点。
１カラム→２カラムに
色を変更
色はGoogle公式のマテリアルデザインのカラーパレットが使いやすかったです。
Color - Style - Google design guidelines
フォントを変更
いままで使っていたWebフォントはやはり読み込みが遅いのでこれを機に辞めました。
いまの設定は、全体がコチラ↓
body {
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo UI','メイリオ',Verdana,'ＭＳ Ｐゴシック',sans-serif;
}
ブログタイトルや記事タイトルなどはヒラギノ丸ゴシックを指定しています。
ただフォントが入っていないデバイス（iPhoneなど）ではメイリオ、ヒラギノ角ゴシックとかで表示されます。
#title { font-family: "ヒラギノ丸ゴ ProN","Hiragino Maru Gothic ProN","メイリオ", Meiryo,"ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-size: 250%; margin:0 auto; }
}
見出しのデザイン
こんなデザインにしてみました。
大見出し<h3>
中見出し<h4>
小見出し<h5>
.entry-content h3 {
margin: 40px 0px 20px 0px;
padding: 10px 10px 10px 10px;
border-left: 5px solid #80CBC4;
background: #EEEEEE;
font-size: 120%;
}
.entry-content h4 {
margin: 20px 0px 20px 0px;
padding: 10px 0px 10px 10px;
border-left: 5px solid #80CBC4;
font-size: 120%;
}
.entry-content h5 {
margin: 20px 0px 20px 0px;
padding: 10px 0px 10px 10px;
font-size: 110%;
}
主にCSSを変えたのはこのくらいです。
今後変えたいところ
これは何度挑戦しても出来なくて、あえなく撃沈したところ。
そう、読者登録ボタン。
やさしい色に変更したんだけど、どうしてもこの派手な輩が気になって。
色を変えるコードもしくはデフォルトに戻したいのです。
恐れ多くも、作者のid:vintonさま。
教えていただければ幸いです。
＊＊＊６/１追記＊＊＊
作者さまに教えていただき、無事変更できました(*´ｪ`*)
他にもブログタイトルにホバーしたとき（カソールを持ってったとき）に出てくる線の色も教えてくださいました！
コードは作者さまのカラー変更記事に加筆されています。
ありがとうございましたー！！
まとめ
自分色に染めることが出来て、すごく気に入るデザインになりました。
触ると反応してくれるホバーエフェクトも素敵だし、何より
カスタマイズ方法を紹介している作者さまの気遣いがありがたいですよね。
レスポンシブデザインに対応しているので、長く使っていけそうです♪
