背景画像でページにアクセントを：WordPress簡単カスタマイズ その４

背景画像で、画面のタイトル部にアクセントを入れると、シンプルなテーマも雰囲気が変わり、いろんなイメージが打ち出せます。

特に、minimal WPのようなシンプルなテーマでは効果的です。

Webデザインの専門知識を持たない私が、ブログの見せ方で実際にやっているカスタマイズ法をご紹介します。

ページトップにアクセントを入れるメリット

最初にブログを開いたときに目に入るところなので、タイトルロゴともども、ブログの個性を印象付けるのにとても効果的です。

レスポンシブデザインのテーマでは、パソコン、タブレット、スマホのいずれから見たときも同じデザインで表示されるため、印象に残ります。「あ、このブログだ」と認識率が高まります。

また、WordPress標準の機能を使うため、とても簡単に、しかも安全にできます。

設定の仕方

1. フリーの素材サイトで、素材画像を選ぶ

Webサイトのパターンの背景は、小さな画像をタイルのようにしきつめて、表示する仕様になっています。

この、「背景・バックグラウンド」用の素材を、素材サイトから借りて、自分のパソコンにダウンロードします。

2. 「ダッシュボード」＞「外観」＞「背景」を開く

背景画像の操作は、こちらで行います。

3. 背景画像をアップロードする

「画像を選択」あるいは「画像の変更」というボタンを押します。
「画像を選択」画面が出るので、「ファイルをアップロード」のタブを押して、用意した画像をアップロードします。

4. 背景画像の設定を行う

「背景画像」のウィンドウを下へスクロールし、設定を行います。

「背景の繰り返し」で、「水平方向に繰り返し」を選択します。

「背景の位置」は「左」（背景画像によっては「中央」か「右」）、「背景スクロール」は「スクロール」のままにしておきます。

5. 最後に「保存して公開」ボタンを押す

「保存して公開」を押さなければ、変更は反映されません。
ボタンを押さずに、いくつかの画像を入れて試してみることも可能です。

画像を差し替えれば、簡単に模様替えできます。
また、「やはり無しでスッキリさせたい」と思ったら、背景画像を「削除」することで、取消すことができます。

素材によっていろんな表現が可能

「素材画像を横に並べる」というだけですが、選ぶ素材によって雰囲気がガラリと変わり、いろんな表現が可能になります。

minimal WP「Slauson」の場合、スマホからの閲覧では、メニュー画面が折りたたまれ、右上の三本線から開閉するようになります。これが見えなくなるほど濃い色の画像は、見やすさを損なうため、避けたほうがいいでしょう。

背景画像のみを変えて、いろいろ試してみました。（素材元／web*citron）

きれいに、女性的に

かわいく、カジュアルに

クールに、スマートに

ブログの「顔」を意識しましょう

ブログのタイトルロゴが自分の店の看板だとしたら、背景画像でつけるアクセントは、お店ののれんやカフェのテントみたいなものだと思っています。

両方組み合わせると、あなたのブログの「顔」になるはずです。

ちょっとしたカスタマイズで、無味乾燥に見えるシンプルなテーマが、大きく変わってくるのがわかるのではないでしょうか。

どう見せるか、どんなイメージを伝えるか、どう印象に残すか。あれこれ考えて試して、楽しんでみてください。

 

【こちらもあわせてご覧ください】
・ブログをリニューアルしました。
・リンクの色を変えてみる：WordPress簡単カスタマイズ その１
・タイトルにフリーフォントを使ってみる：WordPress簡単カスタマイズ その２
・シルエット素材でアイコンを作成：WordPress簡単カスタマイズ その３
・安全運転で楽しく。初心者がWordPressを始めるときの心得4つ

 

---

宮野真有ツイッター（お気軽にフォローどうぞ。基本フォロー返しします）
https://twitter.com/miyano_mayu

宮野真有のブログ　Facebookページ（「いいね！」をするとブログの更新情報がタイムラインに届きます）
https://www.facebook.com/miyanomayu

宮野真有の植物時間　Instagram
（★Instagram始めました。お気軽にフォローどうぞ。基本フォロー返しします）
https://www.instagram.com/miyanomayu/