ヘッダーとフッターをシンプル画像に変更する方法

f:id:oTn:20210331225154j:plain

はじめに
ヘッダーとフッターをシンプル画像に変更する方法
最後に

はじめに

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

okn.hatenablog.jp

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

「EST」は背景をカスタマズして楽しめるデザインテーマですが、ヘッダー・フッターの画像がデカすぎるので自分の好みに合わない、と感じている方がいるかも知れません。

f:id:oTn:20210331230613j:plain

そこで、「EST」のヘッダーとフッターを普通サイズのシンプル画像に変更する方法を説明します。

ヘッダーとフッターをシンプル画像に変更する方法

作業内容は簡単です。下記CSSをデザインCSSに保存して下さい。

サンプルは表示する画像にpicsum.photosを使用してますが、お好みのものに変更下さい。

その場合、横幅は1200px、縦幅は315pxがバランスがとれると思います。

/*** ヘッダーとフッターをシンプル画像にする　**/
:root {

    /* ヘッダーをシンプル画像にする */
    --header-img: url("//picsum.photos/1280/315.jpg?random1");
    --header-background-size: auto calc(160px + 10vw);
    --header-main-img: none;
    --header-box-shadow: none;
    --header-backdrop-filter: none;

     /* フッターをシンプル画像にする */
    --footer-img: url("//picsum.photos/1280/315.jpg?random3");
    --footer-background-size: auto calc(160px + 10vw);
    --footer-main-img: none;
    --footer-box-shadow: none;
    --footer-backdrop-filter: none;
    --footer-img-margin: 3vw auto 0;

     /* 背景色を1色にする */
    --body-background-color: var(--entry-background-color);
}