という疑問にお答えしましょう。
この記事で分かること
- ブログ画面の背景を動くようにする 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」を削除すれば透明になります。
PCヘッダーメニューを透明にする
次に、「PCヘッダーメニュー」も透明にしてみましょう。
ヘッダーエリア同様に「外観 → カスタマイズ」に入り、さらに「各メニュー設定 → PCヘッダーメニュー」を開きます。
そしたら、「背景色」「ボーダー上下色」「ボーダー右色」の入力欄を削除すれば透明になります。
背景に動く画像を設定してオリジナリティを出してみよう
CSS についてよく分からなくても、コピペで設定できるので簡単ですよね。
もちろん好きに画像を作成して、画像が動く速さを変えたりしても OK です。