ムニエルブログのテーマをマテリアルデザイン風の「Material」に変更しました

ムニエルブログのテーマを、id:vintonさんが作成されたマテリアルデザイン風のブログテーマ「Material」に変更しました。

Materialの特徴

Materialの最大の特徴は、その名の通りマテリアルデザインに準拠していることです。
レスポンシブデザインにも対応しているので、PCとスマートフォンで共通のデザインにすることができます。
詳しくは、作者自身による紹介記事をご覧ください。

行なったカスタマイズ

テーマをインストールして終わりではなく、色々とカスタマイズして使用しています。

Mixed Contentを解消

ウェブサイトをHTTPSで配信している場合、ページ内にHTTPで配信されているコンテンツ（画像や動画など）があるとMixed Content扱いになり、ブラウザによって警告が表示されます。*1
テーマで使用している検索アイコンのURLがHTTPだったので、CSSで標準テーマのアイコンに置き換えることでMixed Contentを解消しました。

.hatena-module-search-box .search-module-button {
  background: rgba(48, 48, 48, 0.5) url(https://cdn.blog.st-hatena.com/images/theme/search_w@2x.png) no-repeat center center;
  background-size: 24px 24px;
}

2カラム化

上記の記事を参考に、レイアウトを1カラムから2カラムに変更しました。
ただし、ブレークポイントは1024pxではなく960pxに設定しています。
こうすることで、iPadの縦向きでは1カラム、横向きでは2カラムという絶妙な塩梅になるのです。

縦向き	横向き

メインエリアの横幅は600px、サイドバーの横幅は300pxに設定しています。

テーマカラーを変更

上記の記事を参考に、テーマカラーを変更しました。
マテリアルデザイン的にはプライマリーカラーとセカンダリーカラーの2色を使用すべきなのかもしれませんが、どうもしっくり来る組み合わせが無かったので、すべてIndigo 500（#3f51b5）を指定しています。

文字色を変更

文字色がGray 600（#757575）と薄かったので、Gray 900（#212121）に変更しました。
ちょっと濃すぎる気もするので、そのうちGray 800（#424242）ぐらいにするかもしれません。

色	実際の表示
Gray 600（#757575）	吾輩は猫である。名前はまだ無い。
Gray 900（#212121）	吾輩は猫である。名前はまだ無い。

ヘッダーのウェイトを変更

ヘッダーのウェイト（文字の太さ）が200と細かったので、700に変更しました。
ちょっとも太すぎる気もするので、そのうち500ぐらいにするかもしれません。

ウェイト	実際の表示
200
700

ソーシャルボタンを設置

上記の記事を参考に、記事の上下にソーシャルボタンを設置しました。
各サービスが提供している公式ボタンはJavaScriptで描画するのでどうしても読み込みが遅くなりますが、この場合はただのHTMLなので速いです（JavaScriptで描画位置を変更する処理はありますが）。

サイドバーのモジュールを修正

レスポンシブデザインになったことで、場合によってはサイドバーのモジュールの見た目が不自然になってしまうので、デザインを修正しました。

ライフログ

TwitterのウィジェットとQiitaのウィジェットを1つのモジュールにまとめることで、各ウィジェットの横幅を固定しつつ、サイドバーの横幅に応じて縦並びになったり横並びになったりするようにしました。

縦並び	横並び

ブクログ

ブクログのブログパーツは横幅が最大200pxしかないので、CSSで頑張って300pxに拡大しました。

最新記事・人気記事・関連記事

記事一覧系のモジュールはサイドバーの横幅が大きいときに画像とタイトルが横並びになってしまうので、常に縦並びになるようにしました。

Amazon

今までは縦長のバナーを掲載していましたが、正方形に近いサイズのバナーに変更しました。
サイドバーの横幅に応じて、縦並びになったり横並びになったりします。

縦並び	横並び

ソースコードについて

デザインCSSやサイドバーのモジュールなど、各種ソースコードはGitHubで公開しています。

---

はてなブログ Perfect GuideBook

*1:混合コンテンツとは  |  Web  |  Google Developers