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

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

完成図

できあがりはこんな感じです。記事の背景がアイキャッチ画像で、ぼかしなどのフィルタを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は必須だと思います。

注意点

• 使っているテーマやcssによっては、このカスタマイズがうまく動かないこともあります。
• もしかしたらほかの.entryなどにz-indexの指定が必要かもしれません。
• うまく動かない時に自分で調整できないようであれば、使わないほうが無難です。