Affinger カスタマイズ

【Affinger】背景に動く画像を設定する方法を紹介【コピペでOK!】

ブログ画面の後ろで背景を動かしたいんだけど、どうやってしてるんだろう...

 

という疑問にお答えしましょう。
 

 この記事で分かること 

  • ブログ画面の背景を動くようにする CSS の設定方法
  • 動きをしっかり見せるためにしておきたい Affinger の設定
  • 利用できる画像を 3 つプレゼント

 

このブログを含め、僕が運営している Affinger を使ったブログではブログ記事の背景画像が動くように設定してあります。

背景画像を動かしても何の意味もないのですが、何となく不思議な気持ちになるかなと思ってカスタマイズしました。

そこで、もし同じように動く背景画像を設定してみたいと思った人は、真似してみてくださいね。
 

背景に動く画像を設定する方法を紹介【CSSを追加するよ】


 

背景に動く画像を設定する方法なんですが、知ってしまえば「たったそれだけ!?」と思ってしまうほど簡単です。

ほぼコピペで完了するので、ぜひ試してみてください。
 

手順①:ベースとなる CSS を追加する

まずは、「外観」→「カスタマイズ」→「追加 CSS」に以下の CSS をコピペしちゃいましょう。
 

これをコピペ

 

body {
  background-image: url(ここに画像のURL); /* image url*/
  background-size: 720px 720px; /* image size */
  -webkit-animation: bg 30s linear infinite;
  animation: bg 90s infinite linear;
}
@keyframes bg {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 720px -720px;
  }
}

 

手順②-1:画像を作ってコードに貼り付ける

まずは、背景に動かす用の画像を作ります。

「手順①」で紹介したコードでは 720 px の正方形に適した状態にしているので、「720 px × 720 px」の画像を Canva とかで用意してみましょう。
 

もし「500 px × 500 px」の画像を用意した場合は、

  • background-size
  • background-position

の値を 500 に変えれば OK です。
 

そもそもなぜ 720 px にしたかというと、500 px くらいだと同じ画像がループしてる感が少し出てしまう気が個人的にしたんですね。

かといって 1000 px だと画像のデータが大きすぎるので、720 px くらいで設定しただけです。

なので、画像の大きさは好きなようにしてカスタマイズしちゃって問題ないです。
 

手順②-2:僕のブログで使ってるサンプル画像

僕が運営しているそれぞれのブログでは、みな違う背景画像を設定しています。

その中で使っている 3 つの画像を置いておくので、お好きに使っていただいても OK です。
 

サンプル画像①:点々

 

サンプル画像①をダウンロードする
 

サンプル画像②:四角

 

サンプル画像②をダウンロードする
 

サンプル画像③:星

 

サンプル画像③をダウンロードする
 

これらの画像を WordPress の「メディア」にアップロードし、「ファイルの URL」に表示される URL を上記 CSS の「ここに画像のURL」に入力すれば表示されます。

オトマミ
コピペしてくだけなので、簡単ですね。

 

Affinger で動く背景を上手に演出する手順


 

動く背景をできるだけ演出する場合には、ヘッダーやメニューバーなども透明にしておくと映えます。

そこで、Affinger ではどこの設定で透明にするのかも合わせて紹介しておきましょう。
 

ヘッダーエリアを透明にする

まずは、サイトタイトルやロゴ画像を表示できる「ヘッダーエリア」から。

WordPress の「外観 → カスタマイズ」に入り、さらに「基本エリア設定 → ヘッダーエリア」を開きます。

そしたら、「背景色」に入力されている「#e3e3e3」を削除すれば透明になります。

オトマミ
削除しても薄っすら #e3e3e3 と表示されますが、透明になるので大丈夫です。

 

PCヘッダーメニューを透明にする

次に、「PCヘッダーメニュー」も透明にしてみましょう。

ヘッダーエリア同様に「外観 → カスタマイズ」に入り、さらに「各メニュー設定 → PCヘッダーメニュー」を開きます。

そしたら、「背景色」「ボーダー上下色」「ボーダー右色」の入力欄を削除すれば透明になります。
 

背景に動く画像を設定してオリジナリティを出してみよう

CSS についてよく分からなくても、コピペで設定できるので簡単ですよね。

もちろん好きに画像を作成して、画像が動く速さを変えたりしても OK です。

オトマミ
オリジナリティを出して、サイト作成を楽しみましょう!

-Affinger カスタマイズ
-