1. Home
  2. /
  3. Saltの使い方
  4. /
  5. Hugoブログテーマ「Salt」とは?

Hugoブログテーマ「Salt」とは?

Hugoブログテーマ「Salt」とは?

「Salt」はシンプルなブログを低コストで作成できる

を目標にしたHugo用テーマです。名前の通り、できるだけ素材そのものを引き出せるようなシンプルなデザイン・レイアウトにしました。

実際にSaltでできることについて紹介したいと思います


1. レスポンシブデザイン対応

PCとSP表示に対応しています。 デフォルトで横幅600pxをデフォルトにしていますが、任意のサイズに変更できます。


2. サイトカラーを自分の好きなように変更可能

ヘッダー・フッダー・コンテンツの背景色、記事カードの細かいスタイルも簡単に変更できます


3. 各SNSのブログカードを簡単表示

Hugo標準のショートコードを使用することで、TwitterやYouTubeといったブログカードを簡単に表示できます

Hugo標準のショートコード表示サンプル

Hugo標準のショートコード表示サンプル

Hugoで用意されているショートコード使用時の表示サンプルです figure スイカの画像 gist highlight <section id="main"> <div> <h1 id="title">{{ .Title }}</h1> {{ range .Pages }} {{ .Render "summary"}} {{ end }} </div> </section> instagram Instagramのdeveloperアカウントが必要です。自前で用意する必要あり tweet Owl bet you'll lose this staring contest 🦉 pic.twitter.com/eJh4f2zncC — San Diego Zoo Wildlife Alliance (@sandiegozoo) October 26, 2021 vimeo youtube

自サイト内のブログカードにも対応

サイト内ブログカードを作る自作ショートコード

サイト内ブログカードを作る自作ショートコード

このテーマ内でサイト内ブログカードを作れる「self-blog-card」というショートコードを作成しました。 使い方 自サイト内のurlを指定します 自記事のブログカードは表示できません。 日本語だとconfig.ymlのsummaryLength: 200以上推奨です {{< self-blog-card "/article/salt/custom-figure" >}} 表示例 画像のリサイズ・トリミング可能な自作ショートコード このテーマ内で画像のリサイズ・トリミングができる「custom-figur

サムネイルなしの記事

サムネイルなしの記事

サムネイルが設定されていない場合の記事です

外部サイトのブログカードにも対応

シンプルなHugoブログテーマ「Salt」をつくりました

「Salt」はシンプルなブログを低コストで作成できる。を目標にしたHugo用テーマです。名前の通り、できるだけ素材そのものを引き出せるようなシンプルなデザイン・レイアウトにしました。


4. 記事内に使用する画像を簡単に最適化

Hugoのショートコードであるfigureを改造した「custom-figure」というショートコードを作成しました。このショートコードで画像のリサイズ・トリミングができます。

画像のリサイズ・トリミング可能な自作ショートコード

画像のリサイズ・トリミング可能な自作ショートコード

このテーマ内で画像のリサイズ・トリミングができる「custom-figure」というショートコードを作成しました。 使い方 Hugo標準のfigureショートコードの機能をそのまま使えます HugoのImage Processingで使えるResize、Fit、Fillが使えます Image Processingについてはこちらをチェック Image Processing Resize, crop, rotate, filter, and convert images. {{< custom-figure src="image.png" title="Resize スイカ" Resize="320x180" >}} {{< custom-figure src="image.png" title="Fit スイカ" Fit="320x180" >}} {{< custom-figure src="image.png"

5. 表示画像を最適化済みなのでサイト全体が高速に動作

記事一覧ページのサムネや、記事ページのサムネ表示時は必ずリサイズ&webpに変換しているので、サイト全体が高速に表示されます。webpは次世代画像フォーマットで高い圧縮率を誇ります

PageSpeed Insightsではモバイル90前後は出せるかと思います
https://developers.google.com/speed/pagespeed/insights/?hl=ja&url=https://hugo-theme-salt.okdyy75.com/


6. メニューを簡単にカスタマイズ可能

フッダー・ヘッダー・サイドのメニューを簡単&自由にカスタマイズできます。
fontawsomeが使用可能なので、サイドメニューのアイコンに最適なものを選べます
もちろん記事内にもアイコンが使えます

※ただし無料アイコンのみです

使いたいアイコンがあるか探してみてください!
https://fontawesome.com/v5.15/icons


7. フルカスタマイズ可能

Hugoの特徴ですが、themeフォルダ内のファイルを、ローカルにコピーすると上書きして使えます。

なのでフルカスタム可能です


8. 固定記事を簡単表示

トップとサイドバーに固定記事を簡単に設定&表示できます。(ピックアップ部分)


9. 記事ページに関連記事を自動で表示

関連記事の表示はもちろん、関連させたい要素(タグやカテゴリー)を設定することも可能です


10. 構造化データ(JSON-LD)対応

構造化データに対応しました


11. 選べるカラーテーマ

標準のテーマ以外に、4種類のテーマからも選べます

ポップブルー

ゴールデンイエロー

桜ピンク

モダンベージュ

詳しい使い方

Zennの本をチェックしてみてください

シンプルなHugoブログテーマ「Salt」をつくりました

「Salt」はシンプルなブログを低コストで作成できる。を目標にしたHugo用テーマです。名前の通り、できるだけ素材そのものを引き出せるようなシンプルなデザイン・レイアウトにしました。

関連記事

Hugoを使い始めた人に捧げるTips11選

Hugoを使い始めた人に捧げるTips11選

1. とりあえずhugo server -Dって使ってるけどこれって何? draft: trueのコンテンツファイルも含めて出力。 詳しくはhugo server --helpでチェック 2. taxonomyとtermの違い taxonomyは「タグ」や「カテゴリー」といった分類自体 termはそのタグやカテゴリーに属する「go」とか「tips」のことです こちらのサイトが非常に分かりやすいです! https://maku77.github.io/hugo/taxonomy/basic.html 3. content配下の固定ページに共通のlayoutを使
Go言語Tips② Hugoで使われるlayoutの正体

Go言語Tips② Hugoで使われるlayoutの正体

Hugoで使われるlayoutですが実態はgo-templateという、いわゆるテンプレートエンジンです https://pkg.go.dev/text/template テンプレート内のハイフンありなしの違い たまにHugoテンプレート内で{{ .Title }}や{{- .Title -}}で書いてるものを見かけます この違いはハイフンを付けることで前後の空白を除去したい場合に使われます ちなみに公式ドキュメントにあります https://pkg.go.dev/text/template#hdr-Text_and_spaces 配列や連想配列の空チェック Hugoを使う際、空ではない文字列or配列