アイキャッチを記事全体の背景にしてなんかいい感じにするカスタマイズ

2017年6月9日

当ページのリンクには広告が含まれています。

前回の記事で記事タイトルの背景にアイキャッチ画像を敷いてみました。同じように、記事全体の背景としてアイキャッチを使ってみます。記事ごとに背景が変わるので、なかなかカッコイイですよ。

INDEX

完成図

f:id:c-miya:20170609081750j:plain
できあがりはこんな感じです。記事の背景がアイキャッチ画像で、ぼかしなどのフィルタをcssで掛けてあります。

html

はてなブログのデザイン設定から、「ヘッダ」に以下のコードを加えます。

<div class="penta"></div>

クラス名は適当です。

javascript

はてなブログのデザイン設定から、「記事下」に以下のコードを加えます。

<script>
function productImg() {
var pi = document.getElementsByTagName('meta');
for(i=0;i<pi.length;i++){
if(pi[i].getAttribute("property")=="og:image"){
return pi[i].getAttribute("content");
}
}
return "";
}
var penta = document.getElementsByClassName('penta');
penta[0].style.backgroundImage = 'url(' + productImg() + ')';
</script>

前半はアイキャッチ系を扱ってきたカスタマイズでやってきたのと同じコードなので、それらも使っている時は同じ部分は省略してOKです。

css

はてなブログのデザイン設定から、「デザインcss」に以下のコードを加えます。

.page-index .penta,
.page-archive .penta{
display: none;
}
body:not(.page-index) .penta{
background-size: cover;
background-position: center center;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
filter: brightness(300%) contrast(40%) saturate(40%) blur(10px);
}

一番下のfilterが画像にかけるフィルターです。brightnessは明るさ、contrastはコントラスト、saturateは彩度、blurはぼかしです。適当に数値をいじってみるといいでしょう。アイキャッチ画像はそこまで大きなものを指定してないでしょうし、みやすさの点からもblurは必須だと思います。