ヘッダー・フッターを好きな画像に変更する方法

f:id:oTn:20210324060212j:plain

はじめに
ヘッダー・フッターの画像変更方法
最後に

はじめに

「EST」を始めて使う方は「EST」の使い方をご一読下さい。

okn.hatenablog.jp

それでは本題を説明します。

「EST」のヘッダーとフッターは、デフォルトではダミー画像がランダムが表示されるようになってます。

ヘッダーとフッターを好きな画像に変更したい場合は、下記手順でカスタマイズ下さい。

ヘッダー・フッターの画像変更方法

「EST」はカスタムプロパティを変更するだけで、好きな画像をヘッダーとフッターに設定できます。

使用する画像はアスペクト比が1.91：1の横幅600px以上の画像がオススメです。

ヘッダー・フッターを指定画像に変更する方法

ヘッダーとフッターの画像を好きな画像に固定したい場合は、下記CSSをデザインCSSに保存して下さい。

/* ヘッダーとフッターの画像を変更する */
:root {
    --header-img: url("画像のURLを入れる");
    --header-background-img: url("画像のURLを入れる");
    --footer-img: url("画像のURLを入れる"); 
    --footer-background-img: url("画像のURLを入れる"); 
}

f:id:oTn:20210326212738j:plain

ページの種類毎にヘッダー背景を変更する方法

「どのページも同じ背景画像だとつまらない」という方はページの種類毎にヘッダー画像を変更してみては如何でしょうか。下記CSSをデザインCSSに保存して下さい。

なお、メイン画像は非表示にした方がスッキリすると思います。

/*** ページの種類毎にヘッダー画像を変更 ***/
:root {

  /* ページ・インデックスのヘッダー背景を変更 */ 
    --page-index-header-img: url("画像のURLを入れる");

  /* ページ・エントリーのヘッダー背景を変更 */
    --page-entry-header-img: url("画像のURLを入れる");

  /* ページ・アーチブのヘッダー背景を変更 */
    --page-archive-header-img: url("画像のURLを入れる"); 

  /* ページ・アバウトのヘッダー背景を変更 */   
    --page-about-header-img: url("画像のURLを入れる"); 

  /* メイン画像を非表示にする */   
    --header-main-img: none;
    --header-box-shadow: none;
    
}

特定のエントリーページのみ指定の画像に変更する方法

このページのように、特定のページのみの背景画像を変更する場合は、記事の編集をHTML編集モードに変更し、記事の一番下に下記HTMLを保存して下さい。

<!-- ヘッダーとフッターの画像を変更する -->
<style><!--
:root {
    --header-img: url("画像のURLを入れる");
    --header-background-img: url("画像のURLを入れる");
    --footer-img: url("画像のURLを入れる"); 
    --footer-background-img: url("画像のURLを入れる"); 
}
--></style>