Hexo のテーマのバナー画像を変更する

Hexo の landscape テーマ使用時にヘッダー部分に表示されるバナー画像を変更してみた。

ヘッダーファイルを保存する

themes/landscape/source/css/images/ にバナー画像ファイルを保存する。

設定ファイルを編集する

設定ファイル themes/landscape/source/css/_variables.styl の以下の箇所を編集する。

1
2
[編集前] banner-url = hexo-config("banner")
[編集後] banner-url = "images/new_banner.jpg"

設定変更を反映する

1
> hexo clean && hexo generate

CSSが変更されていることを確認する

1
2
3
4
5
6
7
8
9
10
11
12
#banner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("images/new_banner.jpg") center #000;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  z-index: -1;
}