このブログ、Hugo のテーマとして Tranquilpeak を使っています。
このテーマでは使用しているブログの一覧があるのですが、
そのブログ一覧にこのブログ ふうせん🎈 Fu-sen. が掲載されました。

themes.hugo.io 内。
Hugo のテーマはここから Download や Homepage を選んだ場合、
GitHub プロジェクトに飛ぶ事がほとんどです。それがこちら。

この GitHub ページの Demo で
「Who’s using Tranquilpeak Hugo Theme」ページに
いくつかこのテーマを使っているブログが紹介されています。

ここに……

掲載ページ

はい、入ってます。「BALLOON a.k.a. Fu-sen.」が自分の英語表記です。

すでに Hugo で運営している日本語ブログで使われているのは見られるのですが、
この一覧では日本語ブログはまだ掲載されていませんでした。
それなら自分のブログが掲載されても良いのかな?と
このブログ始めて間もなく申請をしていました。それが 2018年10月 です。
今 2019年7月……9ヶ月待っての掲載でした。


Hugo テーマ Tranquilpeak について

せっかく掲載されたので、Tranquilpeak を使いたい人・使っている人へ、
このテーマについて、いくつか記載しておきます。

日本語表示

Tranquilpeak は日本語が含まれています。 config.toml に次を入れて下さい。
Thank you for translating @dojineko!

languageCode = "ja"
defaultContentLanguage = "ja"

あと、dataFormat も日本表記にしましょうね。

[params]
  dateFormat = "2006-01-02"

メニューの項目

左に出てると思いますので……モバイルは左上から。

# Menu Configuration
[[menu.main]]
  weight = 1
  identifier = "home"
  name = "ホーム"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-home\"></i>"
  url = "/"
[[menu.main]]
  weight = 2
  identifier = "archives"
  name = "アーカイブ"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-archive\"></i>"
  url = "/archives"
[[menu.main]]
  weight = 3
  identifier = "categories"
  name = "カテゴリー"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-bookmark\"></i>"
  url = "/categories"
[[menu.main]]
  weight = 4
  identifier = "tags"
  name = "タグ"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-tags\"></i>"
  url = "/tags"
[[menu.main]]
  weight = 5
  identifier = "about"
  name = "プロフィール"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-user\"></i>"
  url = "/#about"

[[menu.links]]
  weight = 1
  identifier = "balloon"
  name = "サイト一覧"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-globe\"></i>"
  url = "https://fusenballoon.now.sh/"

[[menu.misc]]
  weight = 1
  identifier = "rss"
  name = "RSS"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-rss\"></i>"
  url = "/index.xml"

ここで分からないのは、項目の左にある絵文字・アイコンでしょう。
i タグの中で fa- ではじまる class は Font Awesome を使って表示しています。
これを使っている Hugo テーマ、いくつかあります。記事でも絵文字の代わりに使用可能です。

この Icons から Free を選択した状態がおおよそ使える表示になっています。
クリックした詳細ページに記載する class のタグが表示されています。

https://fontawesome.com/icons?d=gallery&m=free

メニューの横幅

  # Customization
  # Define the behavior of the sidebar
  # 1: Display extra large sidebar on extra large screen, large sidebar on large screen,
  #    medium sidebar on medium screen and header bar on small screen and
  # extra large sidebar is swiped on extra large screen and large sidebar on all lower screen (default)
  # 2: Display large sidebar on large screen, medium sidebar on medium screen and
  #    header bar on small screen and large sidebar is swiped
  # 3: Display medium sidebar on large and medium screen and header bar on small screen and
  #    medium sidebar is swiped
  # 4: Display header bar on all screens, extra large sidebar is swiped on extra large screen and
  #    large sidebar is swiped on all lower screens
  # 5: Display header bar on all screens and large sidebar is swiped on large screen
  # 6: Display header bar on all screens and medium sidebar is swiped
  sidebarBehavior = 2

表示されている環境やウインドウの横幅によってメニューの表示状態が変化します。
デフォルトは 1 で最大限の横幅になっているのですが、
このブログは 2 にしているので、横幅が狭くなっています。
3 で更に狭くなり、文字なしのアイコン表示です。
4 以降は非表示になり、代わりに上部に表示され、左上アイコンでメニューを表示します。

CSS・JavaScript の追記

テーマの状態が満足できず、CSS や JavaScript を追記したい場合があります。
うれしい事に Tranquilpeak はそれを容易に行える設定があります。

  # Custom CSS. Put here your custom CSS files. They are loaded after the theme CSS;
  # they have to be referred from static root. Example
  [[params.customCSS]]
     href = "css/mystyle.css"

  # Custom JS. Put here your custom JS files. They are loaded after the theme JS;
  # they have to be referred from static root. Example
  # [[params.customJS]]
  #   src = "js/myscript.js"

static の中にファイルを入れて下さい。
この場合 static/css/mystyle.css が追加されています。

メニューを黒くしたい

Tranquilpeak のメニュー表示は白固定です。
でもこのブログは黒くしてあります。
GitHub でも質問があり、自分が答えています。

https://github.com/kakawait/hugo-tranquilpeak-theme/issues/312

上の CSS 追記を有効にした上で .css ファイルに次のように追加します。

#sidebar .sidebar-profile .sidebar-profile-name
{
    color: #252525;
}
#sidebar ul.sidebar-buttons li.sidebar-button .sidebar-button-link
{
    color: #252525;
}
@media only screen and (min-width: 1280px)
{
  #sidebar[data-behavior="1"] .sidebar-profile .sidebar-profile-bio,
  #sidebar[data-behavior="1"] .sidebar-profile .sidebar-profile-job,
  #sidebar[data-behavior="1"] .sidebar-profile .sidebar-profile-location 
  {
    color: #252525;
  }
}

記事のヘッダ

---
title: "Hugo テーマ Tranquilpeak の一覧で紹介。"
date: 2019-07-03T23:39:00+09:00
categories:
- Hugo
tags:
- Hugo
- Tranquilpeak
keywords:
- Hugo
- Tranquilpeak
thumbnailImage: /201907/using.jpg
---

このブログではこんな感じです。
Hugo のデフォルトスタイルに合わせてカテゴリー・タグ・キーワードを維持しています。
タグ・カテゴリー・アーカイブは変更が可能です。

[taxonomies]
  tag = "tags"
  category = "categories"
  archive = "archives"

これらを使わない場合は次を追加します。
これ Tranquilpeak に限らず重要です。
入れないとサイトマップや RSS にページが入っていて、
Googlebot さんなどがこっそり参照しにきてしまいます。

disableKinds = ["taxonomy","taxonomyTerm"]

Google+ を消す

もう Google+ はなくなっています。該当の行頭に # を入れて無効にしましょう。

#  [[params.sharingOptions]]
#    name = "Google+"
#    icon = "fa-google-plus"
#    url = "https://plus.google.com/share?url=%s"

各記事の下にリンクが表示されています。ここからシェアできる仕組みです。

Tranquilpeak は完成度の高い Hugo テーマ

Hugo でいくつかの Web サイト・ブログをつくり、
それと共に様々なテーマに触れてきましたが、
テーマが出力する表示が不満で
layouts を編集しないといけないケースがよくあります。
しかし Tranquilpeak は多くの場合 config.toml で完結できます。
最初から OGP も入っていて、SNS の投稿では画像も出てきます。
ここまで考慮されている Hugo テーマは少ないです。
Tranquilpeak は Hugo の数多いテーマの中でも
本当によくできているテーマだと思います。
まともにブログを運用する目的で Hugo のテーマを検討しているなら、
Tranquilpeak はおすすめです。