はてなブログの人気テーマ「Minimalism」を導入｜手順と追加カスタマイズの記録

f:id:mai_go:20170707232359j:plain:w500
最近ブログをいろいろアレンジしたい欲が出てきて、テーマをMinimalismに変えることにしました。
テーマ変更に伴っていくつかカスタマイズもしてみたので、どこに手を入れてどこを放置したのか忘れないように、自分の備忘録的に纏めておきたいと思います。

テーマインストール

Minimalismのテーマはこちらから参照できます。
Minimalism - テーマストア

実際にインストールする場合には、事前にCSSのバックアップを取っておくことを忘れずに。

テーマ公開ページの指示に従いカスタマイズ

上記テーマストアのページ内「使い方・注意事項」欄に貼られているリンク先に飛びます。
（念のためこちらにも直接リンク貼っておきます）
シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました。 - ひつじの雑記帳

対応したもの

・ナビゲーションメニューを設置する

※2019年8月、当ブログのナビゲーションメニューは撤去しました。以下は設置時の記録です。

ここではメニューにアイコンを添えるために「FontAwesome」を使用しているため、head要素内にリンクコードを追記する必要があります。
上記リンク先にも「このページを参考にして！」とあったのですが、そこに記載されたコードをコピペしても一部のアイコンがうまく表示されなかったので、FontAwesomeのスタートページから「これをhead要素に追記してね！」と提示されているコードを取得してhead要素に追加しました。
これで選んだアイコン全てがきれいに表示されるように！

・見出しデザインについて

こちらはガイドに従って好きな見出しを選んで設定しました。

対応しなかったもの

・シェアボタンを設置する

当初はガイド通りに設置してみたんですが、FacebookとTwitterのアイコンがうまく表示されなくて、結局別の方法で設置することにしました。
こちらも、上記「ナビゲーションメニューを設置する」の段と同様に、FontAwesomeを使用してアイコンを取ってきているようなのですが、たぶんそのためにHEAD要素に記載すべき内容と、上段「ナビゲーションメニュー設置」で追加したコードが競合してしまって、こちら立てたらあちらが立たず、、、みたいな状況になってしまいました。
ということがあったのと、シェアボタンは必要なもののみに絞ってカラーで表示したいな！という欲もあり、後述の方法を取りました。

・ヘッダーを好きな色に設定する

こちらもいくつか色を試してみたのですが、自分の使いたい色を設定してみても、なんか全体的にしっくりこなくて。
それならシンプルに白のままがいいなーと思い、結局ヘッダー色付けは行いませんでした。

【さらに】自分好みにカスタマイズを追加

上記までが、Minimalismのテーマページで紹介されたカスタマイズでした。
ここからはさらに自分好みにしていくためにいろいろ調べて追加したものです。

グローバルメニューの色付け

※2019年8月、当ブログのナビゲーションメニューは撤去しました。以下は設置時の記録です。

ヘッダーの色付けをしなかったので、グローバルメニューだけ色付けして引き締めたいなーという気分になり、対応。
帯の部分を暗めの色に、フォントは白に色付けしました。
基本的なデザインはテーマの通りがいいなと思ったので、以下のコードだけ、CSSに追加しました。

#gnav {
background: #424242;
}
#gnav .menu a {
color: #ffffff;
}

シェアボタン

シェアボタンは必要な分のみカラーで表示したい、ということで、はてなのメニューから設定できるデフォルトのやり方でもよかったのですが、こちらも先人のお知恵を借りることにしました。
シェア数カウントとか重くなるならやらないほうがいいと思っているので、とにかくサクサク動くこと重視でえらびました。
はてなブログでめっちゃ動作の軽いシェアボタン作った！ - 技術を磨くだいぱんまん