Hugo での画像表示
WordPress のサイトを Hugo へ移行したことを書いた。
その後、新たに別の WordPress を Hugo に移行する作業をしている。
最初のサイトでは Stack というテーマを使っていたが、新しいサイトでは heyo というテーマを使っている。
heyo | Hugo Themes
https://themes.gohugo.io/themes/heyo-hugo-theme/
WordPress ではテーマをインストールしても、プレビューで見たテーマと同じルックにするのは苦労するし、思い通りにならないことが多い。でも Hugo は WordPress よりもうまく行きやすい。試行錯誤していろいろいじっているうちに、そのテーマごとの使い方が分かってくる。初心者のうちは、使い方の丁寧なドキュメントを公開しているテーマを使ったほうがいいだろう。
＊
さて、Stack テーマで作ったサイトでは Flickr の画像を埋め込んで表示させていた。パソコンでもモバイルでもちゃんと表示されていた。
一方 heyo テーマでは Flickr の画像が、大きいサイズの場合、画像部分だけウィンドウ幅からはみ出してしまう。Stack テーマでは起こっていなかったことだ（Stack テーマでは自動でリサイズされていた）。
Flickr の画像を埋め込まず、Hugo 内の画像表示でも、サイズが大きい場合これもまたウィンドウ幅からはみ出してしまう。
ウィンドウ幅からはみ出す現象は通常モバイルで見たときに起こる。最近はモバイルからのアクセスが多いので、ちゃんとウィンドウ幅に縮小されるようにすることにした。
＊
調べてみた感じでは、Hugo の Markdown では HTML のコードをいじるように簡単に画像のリサイズはできないようだ。
僕は画像を記事と同一のディレクトリに置いて管理したい（/content/ ディレクトリではなく、/static/ ディレクトリに置く方法もあるが、画像が増えると煩雑になるので却下）。例えば post01 というディレクトリ内に、post.md という記事ファイルと image.jpg という画像ファイルがあるとしよう。記事内で呼び出すには以下のように Markdown で記述する（テーマによって異なる場合もある）。
相対パスで画像を呼び出すことはできないようだ。
またこの Markdown コードを単純にいじるだけでは画像はリサイズされない。
しかし簡単にリサイズする方法がわかった。HTML コードと同じように書けばウィンドウ幅の画像にできるのだ。
<img src="/post/post01/image.jpg" width="100%">Flickr の画像についても、埋め込みコードで width="100%" にすればウィンドウ幅になる（height="〜" は削除する）。
おそらくテーマのドキュメントを読み込めばもっと Hugo らしい解決方法があるのかもしれないが、初心者向けには HTML コードどおりに書く方法が簡単で分かりやすいだろう。
参考：
Hugo で画像をリサイズしたりトリミングしたりするテンプレートを書いてみる | ランディネットワーク
https://www.randynetwork.com/blog/how-to-use-hugo-image-processing/
Hugo Markdown Image Handling - It's All Downhill From Here
https://tracknut.ca/tech/markdown-image-handling/
【HTML＋CSS】ウインドウ幅に合わせて画像サイズを変化させる方法 [ホームページ作成] All About
https://allabout.co.jp/gm/gc/400630/
この記事が気に入ったらサポートをしてみませんか？