Mono Works

株式会社Mono Works OfficialSite

サムネイル画像と画像用ショートコードの導入

サムネイル画像と画像用ショートコードの導入

WebサイトをWordPressからhugoを利用した静的サイト運用に切り替えてから1年ちょっと、ホスト先のさくらインターネットが無料SSL”Let’s Encrypt“の自動更新に対応したので、ウチのサイトも常時SSL化しようかなと、ついでにサイトのパフォーマンスも最適化しておこうと思い、Webサイトのパフォーマンス測定を”PageSpeed Insights“と”モバイルサイトの速度テスト“でおこなってみました。

計測したのは、http://monoworks.co.jp/post/xboxonewirelessadapter20151109/のページ。

2017-10-27-hugo-image-thumbnail01 2017-10-27-hugo-image-thumbnail02 2017-10-27-hugo-image-thumbnail03

結果は、モバイル画面だと並、パソコン画面で努力が必要といった感じでした。

改善ポイントのひとつである「画像の重さ」は、静的サイト運用に変更して画像の貼り付けが面倒になったため、サムネイルを用意せず、大きな画像を画面サイズに合わせて表示させていたことが原因と思われます。

WordPressの場合、画像をアップロードすると、サムネイル用にリサイズされた画像が生成され、ページ内にサムネイルが表示されるようになっていたり、面倒なところをうまく自動で対応してくれるのは、さすがCMSといったところ。

この辺りを多少なりとも解消するため、”サムネイル画像”と”画像貼り付けの記載を簡便化するためのショートコード”を導入。スマートとは、程遠い手法ではございますが…

画像の下ごしらえ

画像を一括でリサイズ、リネーム、フォーマット変更してくれる”Ralpha“というアプリを使って、元画像をjpg形式に統一。そして、そのサムネイル用画像を生成して、それぞれ static/img/post/フォルダに放り込みます。

  • 元画像:original01.jpg
  • サムネイル:s_original01.jpg

画像貼り付け用ショートコードを用意

ショートコードの詳細については、下記サイトを参照ください。

本家サイト:”Hugo | Shortcodes

参考サイト:Shortcodes で HTML コードを埋め込む — ゼロから始める Hugo

今回用意したショートコードは、下記内容を記述したa-img.htmlファイルをlayouts/shortcodes/フォルダに配置。

<a href="{{ .Site.BaseURL }}/img/post/{{ .Get "name" }}.jpg" title="{{ .Get "name" }}" class="a-img">
  <img src= "{{ .Site.BaseURL }}/img/post/s_{{ .Get "name" }}.jpg" alt="{{ .Get "name" }}" />
</a>

Markdownにファイルに{{< a-img name="original01" >}}と記述して、hugoを実行すると、下記のようにHTMLが生成されます。

<a href="https://monoworks.co.jp/img/post/original01.jpg" title="original01" class="a-img">
  <img src= "https://monoworks.co.jp/img/post/s_original01.jpg" alt="original01" />
</a>

手抜きに手抜きを重ねて、リンクのtitle属性とイメージのalt属性をファイル名と同じものにしてしまいました。

あとは、過去に書いたブログ内の画像ファイルと記述内容を、上記内容に合わせて更新。(これが一番大変でした)

さて、もう一度、同じページでパフォーマンス計測してみます。

2017-10-27-hugo-image-thumbnail04 2017-10-27-hugo-image-thumbnail05 2017-10-27-hugo-image-thumbnail06

モバイル画面だと並で変化なし、パソコン画面でかなり改善されました。

他の改善項目については、追々対応していくとして、今後は、少し画像の貼り付けが楽になりました。めでたしめでたし

comments powered by Disqus
Googleブログ検索
Amazon検索
執筆者
"ぽぽろんち" pporoch
pporoch120
Mono Worksの中の人。DQX内では "ぬここ" の中の人もやってます。好きなことをつらつらと書き留めてます。
"DQX@ぬここ(UD487-754)"
採用案内