Customize Minimal Mistakes

Minimal Mistakesをいろいろカスタマイズ。

シェアボタンを追加

Font AwesomePocketPinterestはてなブックマークのシェアボタンを追加。
色はBrandColorsSNSやWebサービスなどのロゴの色(ブランドカラー)を調べてみたを参照。
はてなブログっぽいロゴはFont Awesome などアイコンフォントにないはてなブックマークを自力で追加する簡単な方法より。

PintestとPocketとはてブを追加。数が増えすぎたので文字を改行してある。
_includes/social-share.html _sass/minimal-mistakes/_buttons.css Pocketとはてブを追加。
_sass/minimal-mistakes/_variables.scss Pocketとはてブを追加1、はてブっぽいロゴ指定など。
assets/css/main.scss

フォローボタンを追加

Pinterestのフォローボタンを追加してみる。
色やらアイコンやらは組み込み済みなので、_config.ymlにアカウント設定して以下を追記。
_includes/footer.html

過去記事まとめに月ごとの見出し

トップでやってるやつ。
_layouts/home.html

タイトル一覧もいじってあるんでした。
リスト表示用のclass="triangle"も込み。
_includes/archive-title.html

TOCを固定

TOCというのはTable Of Contentsの略で、記事の右側にある見出し一覧。
たとえばこのページだと、front matter(って言うのかぁ)にこういう記述をしてある。

左側のサイドバーはスクロールしても固定されているので、TOCも同じようにstickyを追加。
_layouts/single.html

  1. 前は_sass/minimal-mistakes/_utilities.cssを修正した分を、assets/css/main.scssに移動。 

Leave a Comment

Leave a Comment