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を右側に固定

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

TOCを左サイドバーへ

Wide Single Layout Pageなるレイアウトが出てきたので、便利だけど場所を食ってしまうTOCを左側のサイドバーへ押しやってみる。

/includes/sidebar.html
{% if page.sidebar.nav %}の上あたりに追加する。
ページナビなど他のリストとも揃えたいので、<h3 class="nav__title" style="padding-left: 0;">にしてみたり。

/layouts/single.htmlからTOCをコメントアウト

あとはmain.scssで体裁を整えたり、記事のfront matterにclasses: wideを追加したりなど。
/assets/css/main.scss

ついでなので「日本語の見出しだとスムーススクロールになってくれない問題」に着手。
カスタムスクリプトとして追加。

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

Leave a Comment