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;
}