EST

背景画像がコロコロ変わるデザインテーマです

タイトル下の画像をバックグラウンドに表示する方法

f:id:oTn:20210322210130j:plain

はじめに

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

okn.hatenablog.jp

 

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

 

「EST」ではアイキャッチ画像を記事トップに貼り付けることをおススメしてますが、記事の背景にぼかしたアイキャッチ画像を表示すると、奥行き感と迫力がある演出でき、読者の心を引き付ける効果が期待できます。

 

今回のカスタマイズは「ヘッダーとフッターのメイン画像を非表示にカスタマイズする方法」の変形例にあたるのですが、このような表示を行うためのカスタマズを説明します。

 

タイトル下の画像を背景に表示する方法

記事の編集をHTML編集モードに変更し、記事の一番下に下記HTMLを保存して下さい。 

<!-- タイトル下の画像を背景に表示する -->
<style><!--
:root {
    --header-main-img: none;
    --header-box-shadow: none;
    --page-entry-header-img: url("記事トップの画像のURLを入れる");
}
--></style>

f:id:oTn:20210325211605j:plain

 

なお、このページはタイトル下の画像をぼかして背景に表示してます。

 

その他

毎回記事にHTMLを貼り付けるのはダルい、という方は、JavaScriptで自動で表示させることは可能です。プログラミングの勉強も兼ね、是非チャレンジしてみて下さい。

 

と丸投げしてしましたが、面倒臭いから作ってないだけです。すみません。

 

最後に

この記事が「良かった・参考になった」と感じた方は、リアクションボタンを押して気持ちを伝えてもらえると嬉しいです!