Customize Minimal Mistakes
Minimal Mistakesをいろいろカスタマイズ。ガリガリとやってますねぇ…
シェアボタンを追加
Font AwesomeでPocketとPinterestとはてなブックマークのシェアボタンを追加。
色はBrandColorsやSNSやWebサービスなどのロゴの色(ブランドカラー)を調べてみたを参照。
はてなブログっぽいロゴはFont Awesome などアイコンフォントにないはてなブックマークを自力で追加する簡単な方法より。
PintestとPocketとはてブを追加。
_includes/social-share.html
_sass/minimal-mistakes/_buttons.css
_sass/minimal-mistakes/_variables.scss
_sass/minimal-mistakes/_variables.scss
はてブっぽいロゴ指定と、ボタン6個の幅を設定など。
assets/css/main.scss
フォローボタンを追加
Pinterestのフォローボタンを追加してみる。
色やらアイコンやらは組み込み済みなので、_config.ymlにアカウント設定して以下を追記。
_includes/footer.html
AuthorにBloggerを追加
_includes/author-profile-custom-links.html
<li>
<a href="https://blog.treetop.to/" itemprop="name">
<i class="fab fa-fw fa-blogger" aria-hidden="true"></i> Blogger
</a>
</li>
過去記事まとめに月ごとの見出し
トップでやってるやつ。
_layouts/home.html
タイトル一覧もいじってあるんでした。
リスト表示用のclass="triangle"
も込み。
_includes/archive-title.html
TOCを左サイドバーへ
追記 : ver.4.12.0からは設定で右側固定にできるようになったので、古くなった記事をさっくり削除しました。
Layout: Post with Sticky Table Of Contents
TOCというのはTable Of Contentsの略で、記事の左側(テーマのデフォは右側)にある見出し一覧。
Wide Single Layout Pageなるレイアウトが出てきたので、便利だけど場所を食ってしまうTOCを左側のサイドバーへ押しやってみる。
/includes/sidebar.html
{% if page.sidebar.nav %}
あたりを変更1。
/includes/tocをほぼ書き換える度胸はないので、/includes/toc_listというファイルを作成。
/layouts/single.htmlからTOCをコメントアウト。
あとはmain.scssで体裁を整えたり、記事のfront matterにclasses: wide
を追加したりなど。
元ネタは/_sass/minimal-mistakes_navigation.scssを参考にカスタマイズ。
詳細は後述。
ついでなので「日本語の見出しだとスムーススクロールになってくれない問題」に着手。
カスタムスクリプトとして追加。
モバイル用のボタンを設置
ただ、ここからが困った自体に。
ある程度できて自己満足していたところ、モバイルだとトグルボタンがなくてTOC丸出し状態になっていたという。
これも修正してトグル対応にしたのだが、さてどれにしたもんだろうかと。
各バージョンを作っておいて、後で考える。
縦に並んでいる
/_sass/minimal-mistakes_navigation.scssをコピってTOC用に書き換えてあるだけ。
/assets/css/main.scss
あと、片方のメニューが開いているときにもう一方を閉じるように、カスタマイズ用スクリプトファイルに追記。
横並びで幅いっぱいに
元からあるナビの方も巻き込んで修正してある。
sidebar.htmlにclassを足してあるのはこのため。
/assets/css/main.scss
幅をいい感じに(悩み中)
/assets/css/main.scss
QRコード
フッタにQRコードを追加。実際に使っているのはフッタを低くするなど手を入れまくり。
_includes/footer.html assets/css/main.scss
記事毎にog:imageを設定
デフォの画像は_config.ymlで設定済み。
Post: Teaser Image with OpenGraph Overrideということなので、各記事に追加。
各記事の頭に追加。↓はこの記事の場合。
header:
teaser: /assets/images/minimal-mistakes_edit-toc.png
og_image: /assets/images/minimal-mistakes_edit-toc.png
Facebookシェアデバッガーで確認できるかと。
検索エンジンをGoogleに
- Googleカスタム検索(要Googleログイン)にサイトを登録
- 検索エンジンの編集→デザイン→レイアウトで「結果のみ」を設定
- 設定→基本→詳細設定をクリック
- 除外するサイトにアーカイブなどのURLを設定
(pageの設定が paginate_path: /page/:num/ の場合)https://domain/month-archive/ https://domain/page/ https://domain/categories/ https://domain/tags/
- 保存してコードを取得
- Minimal Mistakesの場合はコードがあればOKなので、必要なのはこれ
var cx = 'nnnnnnnnnnnn:xxxxxxxx';
_config.ymlに設定すると、Google検索が可能に。
search : true # true, false (default)
search_full_content : true # true, false (default)
search_provider : "google" # lunr (default), algolia, google
google:
search_engine_id : "nnnnnnnnnnnn:xxxxxxxx" # YOUR_SEARCH_ENGINE_ID
instant_search : true # false (default), true
インデックスでpostsの本文を省略
_includes/archive-single.html
truncate: 160 の数字を変える
{% if post.excerpt %}<p class="archive__item-excerpt" itemprop="description">{{ post.excerpt | markdownify | strip_html | truncate: 60 }}</p>{% endif %}