Customize Minimal Mistakes

Minimal Mistakesをいろいろカスタマイズ。ガリガリとやってますねぇ…

シェアボタンを追加

Font AwesomePocketPinterestはてなブックマークのシェアボタンを追加。
色はBrandColorsSNSや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を左側のサイドバーへ押しやってみる。
TOC left side

/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丸出し状態になっていたという。
これも修正してトグル対応にしたのだが、さてどれにしたもんだろうかと。
各バージョンを作っておいて、後で考える。

縦に並んでいる

まずはこんな感じで。
TOC mobile TOC mobile

/_sass/minimal-mistakes_navigation.scssをコピってTOC用に書き換えてあるだけ。
/assets/css/main.scss

あと、片方のメニューが開いているときにもう一方を閉じるように、カスタマイズ用スクリプトファイルに追記。

横並びで幅いっぱいに

元からあるナビの方も巻き込んで修正してある。
sidebar.htmlにclassを足してあるのはこのため。 TOC mobile

/assets/css/main.scss

幅をいい感じに(悩み中)

まだ全然いい感じになってない。 TOC mobile

/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に

  1. Googleカスタム検索(要Googleログイン)にサイトを登録
  2. 検索エンジンの編集→デザイン→レイアウトで「結果のみ」を設定
  3. 設定→基本→詳細設定をクリック
  4. 除外するサイトにアーカイブなどのURLを設定
    (pageの設定が paginate_path: /page/:num/ の場合)
    https://domain/month-archive/
    https://domain/page/
    https://domain/categories/
    https://domain/tags/
    
  5. 保存してコードを取得
  6. 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 %}
  1. 後述のモバイル対応のため、classも追加してある。 

Leave a Comment