カスタマイズ

【AFFINGER5】ブログサイトの背景画像をオシャレに変える方法

更新日:

AFFINGER5

こんにちは!SHINです♪

今回は、ブログサイトの背景画像をオシャレに変えてみよう!というテーマでお話していきます♪

 

ただ注意してほしいのは、背景画像で大きくイメージが変わるということ。

 

基本は「明るい暖色系基調」の背景にしましょう。暗いダーク系は記事や読みずらかったり、画像が見えずらいという大きなデメリットがあります。

 

真っ白のデフォルトでも十分ですけど、背景画像を変えることによって「可愛い」「POP」「綺麗」「クール」といったサイトイメージを、より強調できるメリットがあります。

 

いろんな素材が手に入るサイトをご紹介、WordPressテーマAFFINGER5で背景画像を変更する方法を解説していきます♪

では早々見ていきましょう!

こんな方におすすめな記事

  • デフォルトである真っ白な背景画像にオシャレ感を付けたい!
  • ブログサイトのイメージに合わせて、もっと強調した背景画像にしたい!

 

画像素材が手に入るサイト集

subtle patterns

subtle patterns,画像素材

種類で言えば、一番豊富であってシンプルデザインが多く揃っています。

背景画像だけでなく、一定スペースの背景にも使用できるのでとても重宝できるサイトです♪

 

 

Peper-co

Paper-co

木目や紙、石材などのホンモノ素材調が揃ったサイト。

モノを中心に取り扱うサイトに合うデザインが豊富です♪基本的にシンプルなのもGOOD!

 

 

 

Bg-Patterns

Bg-Patterns

基本的に柄の入った素材画像を多く取り扱っているサイト。

POP調や可愛いデザインが多いものの、ブログサイトの背景画像としてはちょっと「くどい」かなと・・・。

見出しやサイドバー見出しなどのアクセントに使うなら、いい素材がたくさんありますよ♪

 

 

フリー素材で優秀なサイトは、まだまだたくさんありますけど、この優秀な3サイトがあれば十分ピッタリ合う素材を見つけられると思います♪

 

AFFINGER5で背景画像を変更する方法

背景画像の素材を決めたら、さっそく変更してみましょう!

AFFINGER5では、たったの3ステップで変更できます。

 

step
1
WordPressダッシュボードから「外観」→「背景」をクリック。

WordPress外観背景

 

step
2
カスタマイズ画面に移行したら「画像を選択」して素材ファイルをダウンロード。

WordPress画像を選択

 

 

step
3
背景画像が変更されたか確認して完了!

背景画像変更

ちょっと薄い模様柄にしてみましたけど、分かりずらかったかな;

背景画像は、サイドバーにいたるまで変更されるので、ガラッとイメージが変わりますよ♪

 

まとめ

今回は、AFFINGER5で背景画像を変更する素材サイトの紹介、変更方法をお届けしました♪

 

最後に!注意点を繰り返しますけど・・・暖色系かつシンプルな素材をオススメします。

ぜひ参考にしてください♪

AFFINGER5カスタマイズ記事

AFFINGER5
【AFFINGER5】サイドバー最上部の新着記事を非表示にする方法

こんにちは!SHINでございます♪   AFFINGER5でサイトページ構成を2カラム以上、つまりサイドバーのあるデザインで運営するなら必見。 今回は、AFFINGER5の導入初期時にデフォ ...

続きを見る

AFFINGER5,フォントカスタマイズ
【AFFINGER5】フォントカスタマイズでイメージをガラッと変えてみよう!

こんにちは、SHINでございます♪   今回、AFFINGER5のフォントデザインをガラッと変える2つの方法を解説していきます。   デフォルトでも十分ですけど、もっとポップにした ...

続きを見る

超簡単!サイドバーへTwitterタイムラインを埋め込む方法
【AFFINGER5】超簡単!サイドバーへTwitterタイムラインを埋め込む方法

こんにちは!SHINです♪ 今回Twitterのタイムラインを、サイドバーに表示させる方法をお話していきます♪   何で「サイドバー」なのかと言うと、2カラムサイトであればトップページはもち ...

続きを見る

【AFFINGER5】ファビコンとロゴ画像をかっこいいデザインに設定しよう!

Googleより、2019年5月22日公開で「モバイル端末の検索結果表示にファビコン(アイコン)を表示する」という変更が発表されましたね。 こんにちは。WordPressテーマ研究家SHINです。 & ...

続きを見る

【AFFINGER5】記事下にアドセンス横並び+リンク広告をセット表示する方法
【AFFINGER5】記事下にアドセンス横並びとリンク広告をセット表示する方法

こんにちは。SHINです♪   Googleアドセンス広告の設置方法に、PHPやカスタムCSSにコードを記述する方法がありますけど、正直・・・ めんどくさい! ややこしい! むずかしい! わ ...

続きを見る

【AFFINGER5】カエレバ・ヨメレバを実装!カスタマイズデザイン6選
【2019最新版】カエレバ・ヨメレバをコピペで実装するカスタマイズ5選

こんにちは。WordPessテーマ研究家SHINです。 カエレバ&ヨメレバは、Amazonや楽天市場、Yahoo!ショッピングなど複数サイトの商品アフィリエイトリンクを、ボタンに設置して告知できるツー ...

続きを見る

【AFFINGER5】スマホフッターに固定メニューを設置する方法-min
【AFFINGER5】スマホフッターに固定メニューを設置する方法

こんにちは。WordPressテーマ研究家SHINです。 スマホユーザーへ訴求する重要なポジションとも言えるのがフッターメニューですよね。   スマホフッターメニューと言えば、パソコンで言う ...

続きを見る

【AFFINGER5】コレは使える!クリップメモのアイコンカスタマイズ大特集
【AFFINGER5】コレは使える!クリップメモのアイコンカスタマイズ集

"AFFINGER5生活"も、かれこれ3ヶ月ほど。相変わらずの使いやすさに、ほれぼれ感が全く薄れないSHINです。   今回は、タグパーツの一つ「クリップメモ」のアイコンを、いろんなバリエー ...

続きを見る

alt=【AFFINGER5】テキストやアイコン画像をアニメーション化できる機能紹介
【AFFINGER5】テキストやアイコン画像をアニメーション化できる機能紹介

AFFINGER5に実装されている機能に、テキストやアイコン、画像を簡単にアニメーションにできる機能をご紹介していきます。 こんにちは。WordPressテーマ研究家SHINです。   AF ...

続きを見る

  • この記事を書いた人
  • 最新記事
SHIN

SHIN

WordPressテーマ研究家のSHINです。WPテーマとコーヒーをこよなく愛し、日々マウスをカチカチ!キーボードをパチパチ!しながら研究をしている人。

-カスタマイズ
-,

Copyright© WordPress theme NAVI , 2019 All Rights Reserved.