Hugo Future Imperfect の設定とデザイン調整について
HUGOのテーマ、「Hugo Future Imperfect」について解説します。本サイトの修正を例にconfigファイルやテンプレートの修正点について紹介します。
本サイトは、HUGOのテーマHugo Future Imperfectを使用しています。 テーマの適用方法は過去の記事で少し触れましたが、今回はテーマ適用後の話をしたいと思います。 各テーマによって設定方法は異なるため、“Hugo Future Imperfect"を使いたいという方は参考にしてみてください。
Hugo Future Imperfect の設定ファイルとレイアウトのカスタマイズについて
他のHUGOテーマでも同じような仕組みですが、“Hugo Future Imperfect"はあらかじめ設定ファイルを用意してくれています。 基本的に設定ファイルの内容を編集すればデザインを変更できるのですが、細かな部分はテンプレートファイルを直接修正する必要が出てきます。 本サイトでもいくつか修正を入れているため、その中でも修正したほうが使い勝手が良さそうなところを説明します。
今回解説する内容は以下になります。
- 設定ファイル”config.toml”について
- カスタムCSS適用について
- テンプレート ファイル(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フォルダ)の編集について”については、次回以降の記事で紹介したいと思います。
記事コンテンツの情報を検索エンジンやブラウザに伝えるための情報。 ↩︎
Share this post
Twitter
Facebook
Email