(cache) ブログの記事ごとに背景画像を変更できるJavaScriptサンプルコード

ブログの記事ごとに背景画像を変更できるJavaScriptサンプルコード

記事ごとに背景画像を変更すればそれぞれの記事に個性が出ておもしろいかも。コピペでサンプルコードを追加し、画像のURLを指定するだけ。

はてなブログでは

次の仕様に対応させる。

CSSコードを記事内に記入してもなぜか反映されない。
jQueryがページ下部で読み込まれる。

対応策としては次の通り。

簡潔にコードを書けるようにjQueryを利用してCSSを調整し、背景画像を変更する。

「続きを読む」でリード文と記事本文に分けている人向け。

jQuery記法をページ内で反映させる

jQuery本体が読み込まれる前のjQuery記法でも有効にするために、次のプラグインをデザインテーマに追加する。追加方法など詳細はリンク先ページで図解で確認できる。

チョマテヨ「ちょ待てよ！jQueryの2回読み込み、プラグインあるからさ」 - はぴらき合理化幻想

記事内の下部に追加するコード

このページ固有の背景を指定しているコードは次のとおり。

<script>$(function(){
/*
ブログの記事ごとに背景画像を変更できるJavaScriptサンプルコード - はぴらき合理化幻想
http://hapilaki.hateblo.jp/entry/each-page-has-original-background
ver1.0.0.140529
*/
$('body').css({'background':'url(http://cdn-ak.f.st-hatena.com/images/fotolife/h/hapilaki/20140514/20140514225725.gif)','background-attachment':'fixed'});
});
</script>

上記コードをコピペで追加し、背景が黄色の部分を好きな画像のURLに変更すればOK。画像URLを変更しないと当ページの背景画像と同じになるので変更してね。

スマホ表示でも反映されるよ。