WordPress から Hexo に移行して投稿にアイキャッチ画像を張る方法がわからなかったので試してみた。

WordPress ならダッシュボードの右下あたりに「アイキャッチ画像を貼る」のボタンがあり、そこを押して写真を選べばよい。それに慣れてしまっていたため Hexo に移行して以来、投稿にアイキャッチ画像を張る方法がわからないままだった。

先日、使用している Hexo テーマの Tranguilpeak のドキュメントを読んでいたらそれらしき設定を見つけた。どうやらフロントマターの中に書いていけばよいみたいなのだ。さっそくこの投稿でやってみよう。

Tranguilpeakのドキュメンテーション - Github

ここに Example : として以下のように例示してあった。

disqusIdentifier: fdsF34ff34
keywords:

  • javascript
  • hexo
    clearReading: true
    thumbnailImage: image-1.png
    thumbnailImagePosition: bottom
    autoThumbnailImage: yes
    metaAlignment: center
    coverImage: image-2.png
    coverCaption: “A beautiful sunrise”
    coverMeta: out
    coverSize: full
    coverImage: image-2.png
    gallery:

このうち

thumbnailImage: image-1.png
thumbnailImagePosition: bottom
autoThumbnailImage: yes

と thumbnailImage 見えているのが投稿一覧で表示されるWordPressにいうアイキャッチだろう。サムネイルという名前からしておそらくそうだ。

そして、

coverImage: image-2.png
coverCaption: “A beautiful sunrise”
coverMeta: out
coverSize: full
coverImage: image-2.png

このあたりが、投稿ページのトップに大きく表示されるイメージで、カバーイメージとこのテーマでは呼んでいるのではないかと推測ができる。

サムネイルに戻って、

thumbnailImagePosition: bottom

の設定は、一覧表示のなかで横幅いっぱいに、サムネイル画像を横長に広げて表示する設定で、これが bottom 。投稿タイトルと本文の一部の左右に表示するのが それぞれ left と right である。一つ一つ追うとだいたいわかる。 

カバーイメージの方は、表示サイズが 60% と全幅、キャプションの設定ができるようだ。こちらも追々試していこう。