お陰さまで読者数1000名突破!

お陰さまで読者数1000名突破!
メルマガでは主にネットビジネスを中心に稼ぐ方法をお伝えしていますが、ビジネス以外にも健康やスピリチュアルの話もしてます。もし興味がありましたら「ご登録はこちら」ボタンを押して頂けますと幸いです。
岩田龍希

賢威の背景を画像に変える方法や作り方は?カラーの変更は超簡単!

岩田です、

今回は賢威テンプレートを
使っている際のサイト自体の背景を
変更する方法をお伝えします。

色を変える方法や背景に画像を
設定する方法、背景画像の作り方を
紹介していくので参考にしてください。

賢威の背景カラーの変更方法

まずは簡単なカスタマイズから
紹介していきます。

賢威の背景カラーを変更するのは
とても簡単です。

初期の状態ではこのように背景が
白いですよね。

賢威 背景

ダッシュボードの
外観⇒テーマの編集⇒design.CSSを選択。

賢威 画像 はみ出る

一番上の項目「サイト全体の背景設定」の
カラーコードを好きなカラーに変更。

コードはこちらを参考にしてください。
HTMLカラーコード
※おすすめはカラーピッカーです。

賢威 背景 カラー変更

変更したらファイルを更新し、
確認してみましょう。

賢威 背景 カラー

色が変更されました。

が、

これではものすごく見づらいですよね。

賢威はコンテンツのところが白ではなく
透明に設定されているので背景のカラーを変更すると
このように字がみにくくなってしまうのです。

そこで、背景を画像にするのをおすすめします。

賢威の背景を画像に変える方法

画像に変更するとこのような形に
することができます。

賢威 背景 画像 作り方

背景と区別がつくようになりますね。

背景を画像にするには先程の
サイト全体の背景設定に追記します。

まず、背景にしたい画像をアップロードします。

画像をアップロードすると
URLが生成されるのでそのURLをコピーします。

賢威 ヘッダー

違う画像ですが気にしないでください。
こんな感じでURLをコピーしてください。

そして、ダッシュボードから
テーマの編集⇒design.CSSを選択して
サイト全体の背景設定の部分を確認してください。

以下の記述がありますね?

この記述の「; }」の部分を消します。
その後ろに下記を記述してください。

画像のURLの部分はアップロードした画像の
URLを記述してください。

記述後はこのような感じになります。

記述前

賢威 背景 画像

記述後

賢威 背景 画像 変更

これで設定は終わりですが、
画像の場合もちょっと細工をしなければ
このようになります。

賢威 背景 作り方

これでは普通にカラー変更したときと
なにも変わりませんよね。

そこで、背景に設定する画像を
加工する必要があるのです。

背景画像の作り方

私のサイトの場合は1920×3000という
画像サイズにしています。

これは大きければどんなモニターでも
対応できるだろうと思ったからです。

背景をスクロールさせないとか
固定とかも設定できるので
気にしなくてもいいです。

それで、どのように加工するかというと
賢威の場合はコンテンツ部分が透明と
先程お伝えしました。

これはサイドバーも同じです。

ですので、サイドバーの部分とコンテンツ部分を
白い背景にすればいいのです。

つまり、背景に設定したい画像の
中心部分を白く加工するのです。

こんな感じに

4背景

このようにした画像を背景に設定すれば
背景とコンテンツの区別ができるようになります。

これで背景の設定は終わりです。
お疲れ様でした。

それでは、これで。
最後までお読み頂きありがとうございました。

メルマガ読者募集中!

メルマガ読者募集中!
改めまして、岩田です。

ここまで記事を読んで頂いて、
ありがとうございます!

ブログの記事が読まれることは
僕にとって嬉しいことです。

お陰様でブログからメルマガ登録を
してくれる方も多く、読者さんの数も
1000人を超えました。

僕のメルマガではネットビジネスで
副収入を得る方法を配信しています。

他にも健康に関することや
さらに収入を増やすための仕組み作り
なんかも話しています。

もし、興味がありましたら、
下の「詳細はこちら」というボタンを
クリックして頂けると嬉しいです。

詳しいことはそちらに書いています。
(最終更新:2016年4月26日)

Facebookへのコメント

mail2