読者です 読者をやめる 読者になる 読者になる

はぴらき合理化幻想

海外3年/西成ドヤ2年/沖縄2年/事故物件で寝袋3年目、ミニマリスト10年目でダンボール2箱の持ち物と保存食で大阪に定住中。

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

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

はてなブログでは

次の仕様に対応させる。

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

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

  • コードを簡潔に書けるようにjQueryを使ってCSSを調整し、背景画像を変更する。
  • もしくはjQueryを使わずにJavaScriptで背景画像を変更する。

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

jQueryを使うコード

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を変更しないと当ページの背景画像と同じになるので変更してね。

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

Webデザイナーのための jQuery入門

jQueryを使わないコード

次のコードならプラグインのチョマテヨを使わなくてもいい。

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

売れ筋ランキング: JavaScript の中で最も人気のある商品です

まとめ

小技をいろいろ使いながらブログ運営を楽しもう(^^)

てすとてすと