【ブログの装飾】ブログの背景に壁紙画像を設定する方法

2016/04/08

【ブログの装飾】ブログの背景に壁紙画像を設定する方法

ワードプレスでブログ

たのちんのブログデザインの考え方をベースにブログの装飾をしていくことにした、たのちん管理人なむ。

たのちんでは、背景やヘッダー画像の設定、ロゴやアイコンなど【デザイン】に関する設定は、テーマと子テーマの設定後に行っています。デザイン性の高いテーマや子テーマを使用する場合は、先にそちらの設定をしてしまってからの方が雰囲気が合わせやすくなると思います。

*【テーマ】WordPressテーマ「STINGER5」のインストール方法

*【子テーマ】STINGERの子テーマ「SIMPLESTER」のインストール方法

*【子テーマ】エックスサーバーで子テーマのテーマフォルダを作成する

 

スポンサーリンク

ado

 

まずは雰囲気を決める画像を用意する

基本的なレイアウトや構成はWordPressのテーマを導入することで整いますので、大幅に変更することはないのですが、画像を用意することで簡単に印象を変えることができる部分をカスタマイズしてみます。

 

1.ブログの背景に壁紙画像を設定する方法 ←コレを設定します

2.ヘッダー部分にタイトル画像を設定する方法

3.目を引くタイトルロゴ画像を設定する方法

4.ブログの目印!アイコンやファビコンの作り方

5.アバターの作成とコメントアイコンの設定方法

 

背景の画像を設定してみる

ブログの背景は広い面積を占めるので、サイトの印象に与える影響は小さくないと思います。

k1

例えば、単色でシンプルなものだとコンテンツに集中できるので、ぐいぐい読ませる効果がありそうです。

実際、下の「バズ部」さんというサイトは、ブログを作るにあたってものすごく参考にさせていただきました。

知りたい情報への導線がわかりやすくて、とても助かりました。

k2

もうひとつは、たのちんの子テーマに使用させていただいている、「SIMPLESTER」さんのサイトです。

やわらかい印象を感じさせる暖色系の背景です。

SIMPLESTERはテーマの雰囲気自体がとても明るいんですよね。
すごく印象がよくて好きなので使わせていただいています(ありがとうございます)。

k3

ブログの運営方針や好みによってデザインは変わると思います。

 icon-hand-o-up たのちんの場合はメインのネタが賃貸住宅ですから、木目の背景素材をお借りして設定してみています。

今後運用していきながら変更することもあると思いますが、背景の設定は簡単なので気軽にやってみたらいいのかな?と思っています。

 

背景の設定方法

① 素材を準備する

たのちんの背景に使わせていただいている木目の画像は、「フリー素材 * ヒバナ」さんからお借りしています。

和紙風、布地風、木目・レンガ風などのナチュラルな画像や、ドット柄やチェック柄、ストライプ柄などのファンシーなもの、花柄やレース・レザーなどの特徴的なものまでたくさんの背景用素材があります。

k4

素材がたくさんあって悩みますが、コレだと思う画像のデータをPCに保存します。

もちろん自分で撮影した写真でもOKです。

② 背景画像を設定する

WordPressにログインして、管理画面のサイドバーにある外観>カスタマイズをクリックします。

k5

カスタマイズ画面が出ますので(STINGERの場合)「背景画像」をクリック。

k6

「画像を選択」ボタンをクリック。

k7

先ほどPCに保存した、背景用画像をアップロードします。

k8

背景全体に画像を敷きつめる場合は、「背景の繰り返し」をタイルにします。

k9

保存して公開をクリックしたら設定は完了です。
簡単ですね!

これで完成です。

k10

おつかれさまでした(*´ω`)

 

その他の装飾はこちらです

*【ブログの装飾】ヘッダー部分にタイトル画像を設定する方法

*【ブログの装飾】目を引くタイトルロゴ画像を設定する方法

*【ブログの装飾】ブログの目印!アイコンやファビコンの作り方

*【ブログの装飾】アバターの作成とコメントアイコンの設定方法

 

機能面の拡張はプラグインやテーマのカスタマイズで

*3.プラグインをインストールしてブログの機能を強化

*4.プラグインを使わずにブログの機能を強化

 

-ワードプレスの使い方
-,