Hugo Future Imperfect の設定とデザイン調整について

HUGOのテーマ、「Hugo Future Imperfect」について解説します。本サイトの修正を例にconfigファイルやテンプレートの修正点について紹介します。

Ishiguro Suguru

本サイトは、HUGOのテーマHugo Future Imperfectを使用しています。 テーマの適用方法は過去の記事で少し触れましたが、今回はテーマ適用後の話をしたいと思います。 各テーマによって設定方法は異なるため、“Hugo Future Imperfect"を使いたいという方は参考にしてみてください。

Hugo Future Imperfect の設定ファイルとレイアウトのカスタマイズについて

他のHUGOテーマでも同じような仕組みですが、“Hugo Future Imperfect"はあらかじめ設定ファイルを用意してくれています。 基本的に設定ファイルの内容を編集すればデザインを変更できるのですが、細かな部分はテンプレートファイルを直接修正する必要が出てきます。 本サイトでもいくつか修正を入れているため、その中でも修正したほうが使い勝手が良さそうなところを説明します。

今回解説する内容は以下になります。

  1. 設定ファイル”config.toml”について
  2. カスタムCSS適用について
  3. テンプレート ファイル(layoutsフォルダ)の編集について

1. 設定ファイル”config.toml”について

本サイトの"Hugo Future Imperfect"設定ファイル”config.toml”の内容は以下のとおりです。 設定項目が多いため、デフォルトから変更している箇所で見た目が大幅に変わるところを解説します。

baseurl = "https://itsys-tech.com/"
languageCode = "ja-jp"
title = "SIerがいろいろ試してみるブログ"
theme = "hugo-future-imperfect"
preserveTaxonomyNames = true
paginate = 10
disqusShortname = "https-itsys-tech-com"
googleAnalytics = "UA-XXXXXXXXX-X"
pluralizeListTitles = false
# Set the followings to true as part of your site SEO
enableRobotsTXT = true
canonifyURLs = true

[params]
  # Sets the meta tag description
  description          = "当ブログでは主にIT系の情報を発信しています。サイトはHugoを利用しているため、今後HugoでWebページを作りたいという方は参考にしてみてください。"
  # Sets the navbarTitle that appears in the top left of the navigation bar
  navbarTitle          = "SIerがいろいろ試してみるブログ"
  # Sets where "View More Posts" links
  viewMorePostLink     = "/list/"

# Optional Params
  # Sets navbarTitle to match the section of the website
  dynamicTitles        = false
  # Sets RSS icons to appear on the sidebar with the social media buttons
  rssAppearAtTop       = false
  rssAppearAtBottom    = false
  # Sets Social Media icons to appear on the sidebar
  socialAppearAtTop    = false
  socialAppearAtBottom = false
  # Sets Categories to sort by number of posts instead of alphabetical
  categoriesByCount    = true
  # set to show or to hide categories in the sidebar
  showSidebarCategories = true
  # Sets Estimated Reading Time to appear in post headers
  includeReadingTime   = false
  # Sets the Favicon and Version for the site. Default support is for
  # apple-touch-icon-precomposed.png, favicon.png, favicon.ico, and mstile.png.
  # These are stored in the favicon folder. See the following for more information:
  # https://github.com/audreyr/favicon-cheat-sheet
  loadFavicon          = false
  faviconVersion       = ""
  # Sets Social Share links to appear on posts
  socialShare          = true
  # Sets specific share to appear on posts (default behavior is to appear)
  socialShareTwitter   = true
  socialShareGoogleplus = false
  socialShareFacebook  = true
  socialShareReddit    = false
  socialShareLinkedin  = false
  socialShareStumbleupon = false
  socialSharePinterest = false
  socialShareEmail     = true

  # Load custom CSS or JavaScript files. The variable is an array so that you
  # can load multiple files if necessary. You can also load the standard theme
  # files by adding the value, "default".
  # customCSS            = ["default", "/path/to/file"]
  # customJS             = ["default", "/path/to/file"]
  customCSS            = ["default"]
  customJS             = ["default"]

  # options for highlight.js (version, additional languages, and theme)
  disable_highlight = false # set to true to disable Highlight
  highlightjsVersion = "9.11.0"
  highlightjsCDN = "//cdn.bootcss.com"
  highlightjsLang = ["r", "yaml", "css"]
  highlightjsTheme = "github"
  MathJaxCDN = "//cdn.bootcss.com"
  MathJaxVersion = "2.7.1"

# Disqus will take priority over Staticman (github.com/eduardoboucas/staticman)
# due to its ease of use. Feel free to check out both and decide what you would
# prefer to use. See Staticman.yml for additional settings.
[params.staticman]
  # Sets Statiman to be active
  staticman = false
  # Sets the location for Staticman to connect to
  username  = ""
  repo      = ""
  branch    = ""

  [params.staticman.recaptcha]
    sitekey = "SITE_KEY"
    secret  = "ENCRYPTED_SECRET"

  # These are optional params related to the sidebar. They are recommended, but not
  # required for proper functionality. HTML is supported within the params.
[params.intro]
  header    = "SIerがいろいろ試してみるブログ"

  paragraph = "このサイトはHugoで作成しています。Hugoを使ったWebサイトを作成してみたい方は参考にしてみてください。"

  about     = "SIerとして働くサラリーマンが自身のスキルアップと情報共有のために作ったブログです。本ブログの公開手順など順次記事をまとめていきます。"

  # This appears at the top of the sidebar above params.intro.header.
  # A width of less than 100px is recommended from a design perspective.
  [params.intro.pic]
    src       = "/img/main/logo.PNG"
    # Sets Image to be a cirlce
    circle    = true
    # Sets Image to be Future Imperfect's hexagon
    imperfect = true
    width     = "70 px"
    alt       = "SIerがいろいろ試してみるブログ"

[params.postAmount]
# Sets the number of recent posts to show in the sidebar. The default value is 5.
    sidebar = 5

# Sets the menu items in the navigation bar
# Identifier prepends a Font Awesome icon to the menu item
[[menu.main]]
  name = "記事一覧"
  url = "/list/"
  identifier = "fa fa-home"
  weight = 1

[[menu.main]]
  name = "サイトについて"
  url = "/about/"
  identifier = "fa fa-id-card-o"
  weight = 2

# [[menu.main]]
#   name = "Blog"
#   url = "/blog/"
#   identifier = "fa fa-newspaper-o"
#   weight = 3

# [[menu.main]]
#   name = "Itemized"
#   url = "/itemized/"
#   identifier = "fa fa-list"
#   weight = 4

[[menu.main]]
  name = "カテゴリ"
  url = "/categories/"
  identifier = "fa fa-sitemap"
  weight = 3

# [[menu.main]]
#   name = "Contact"
#   url = "/contact/"
#   identifier = "fa fa-envelope-o"
#   weight = 6

# Sets Social Media icons to appear and link to your account. Value should be your
# username unless otherwise noted. These are the icons affected by socialAppearAtTop
# and socialAppearAtBottom.
[social]
  # Coding Communities
  github           = "jpescador/hugo-future-imperfect"
  gitlab           = ""
  stackoverflow    = "" # User Number
  bitbucket        = ""
  jsfiddle         = ""
  codepen          = ""
  # Visual Art Communities
  deviantart       = ""
  flickr           = ""
  behance          = ""
  dribbble         = ""
  # Publishing Communities
  wordpress        = ""
  medium           = ""
  # Professional/Business Oriented Communities
  linkedin         = ""
  linkedin_company = ""
  foursquare       = ""
  xing             = ""
  slideshare       = ""
  # Social Networks
  facebook         = "Ishiguro Suguru"
  googleplus       = ""
  reddit           = ""
  quora            = ""
  youtube          = ""
  vimeo            = ""
  whatsapp         = "" # WhatsApp Number
    # WeChat and QQ need testing.
    wechat         = ""
    qq             = "" # User ID Number
  instagram        = ""
  tumblr           = ""
  twitter          = "Ishiguro Suguru"
  skype            = ""
  snapchat         = ""
  pinterest        = ""
  telegram         = ""
  vine             = ""
  googlescholar    = ""
  orcid            = ""
  researchgate     = ""
  # Email
  email            = "Ishiguro Suguru"

[params] パラメータについて

以下は基本的なパラメータです。 任意の値を設定してください。

  • description: サイトの説明文です。metaタグ1に使われます。
  • navbarTitle: サイトのタイトルです。画面トップのタイトル文に使用されます。
  • viewMorePostLink: パラメータ名通りですが、“View More Post"ボタンのリンク先URLを指定します。

[params] > Optional Params パラメータについて

  • dynamicTitles: 画面トップのタイトル文をページごとに変更する場合はtrue、固定する場合はfalseにします。
  • socialAppearAtTop/Bottom: プロフィール エリアのSNS共有ボタンの表示/非表示を制御します。

  • includeReadingTime: 記事を読むのにかかる時間の表示を制御します。HUGO側で記事の文字数をカウントして予測時間を出力します。デフォルトは表示になっていますが、非表示にしています。

  • socialShareXXXXX(Sets specific share to appear on posts): 記事内のSNS共有ボタンの表示/非表示を制御します。

[params.intro.pic] パラメータについて

  • circle: プロフィール画像を円にしたい場合は、trueを選択する。

2. カスタムCSS適用について

デザインを変更するためにはCSSを編集する方法があります。 テンプレートのCSSファイルを編集する方法もありますが、自身で作成したCSSファイルを適用して上書きする方法があります。 カスタマイズ用のCSSファイルを作るほうが管理もしやすいため、CSSでデザインを変更する場合はそちらの方法を利用しましょう。

カスタムCSSを適用する方法は、プロジェクト直下のフォルダにあるファイル"static > css > add-on.css"にCSSを記述します。 本ファイルが所定の位置にない場合は作成してください。 以下のCSSは本サイトのCSSファイルで適用している内容になるので参考にしてみてください。

/*
  This css file is for individual users to restyle items for their personal site,
  or for the implementation of features specifically for their site. Anything that
  is an official part of the theme (ex. Pull Requests) should be included in main.css
  within the formating given.
*/

/* フォント変更、英文字をすべて大文字なし */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'MS Pゴシック',sans-serif;
  text-transform: none;
}

/* カテゴリ・タグ デザイン変更 */
a.article-category-link {
  font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'MS Pゴシック',sans-serif;
  text-transform: none;
  letter-spacing: 0;
  padding: 0.3em;
  background-color: #fff;
  border: 1px solid #aaa;
  border-radius: 3px;
  color: #333;
  text-decoration: none;
  -webkit-transition: .2s;
  transition: .2s;
}

/* カテゴリ・タグ デザイン変更(ホバー) */
a.article-category-link:hover {
  background-color: #3498db;
  border: 1px solid #3498db;
  color: #fff !important;
}

/* サイト タイトルのフォント間隔変更 */
#header h1 a {
  letter-spacing: 0;
}

/* プロフィール画像の下線を非表示 */
#intro a {
  border-bottom: none;
}

/* プロフィール欄のサイト タイトルを削除したためレイアウト調整 */
#intro header {
  padding-top: 10px;
}

/* Recent Posts のブロック内レイアウト調整 */
.mini-post header {
  padding: 0.5em 0.8em 0.1em 0.8em;
}

/* 記事内の見出しタグのデザイン変更 */
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
  padding: 0.4em;
  color: #494949;
  background: #f8fbff;
  border-left: solid 5px #00319c;
  letter-spacing: 0;
}

最後に

長くなったため”3. テンプレート ファイル(layoutsフォルダ)の編集について”については、次回以降の記事で紹介したいと思います。


  1. 記事コンテンツの情報を検索エンジンやブラウザに伝えるための情報。 ↩︎

comments powered by Disqus