賢威7

【画像付きで解説】賢威7プリティーの背景に画像を設定する方法

 

ブログの背景が真っ白だと寂しいと思ってしまうのは私だけでしょうか…?

アドセンスブログでライバルチェックをしていくと、背景が真っ白の方が結構多いんですよね。

 

これは目がチカチカしないようにという配慮なのか、

白背景の方が文字が読みやすいからなのか、

特にそこにこだわりはないという事なのか、

それともやりたいけどやり方が分からないからなのか…。

その辺は良く分かりませんが!

 

私はどうしてもそこにこだわってしまうのです。

何だろう、背景を自分好みにしないと、ブログに愛着が持てないというか…(^_^;)

 

そこで、やりたいけど設定方法が良く分からないんだよ~。

CSSとかいじるの恐いんだよ~という方のために、

私がやった方法をお伝えします♪

これでもか!というくらい分かりやすく解説しますので、

どうぞ、恐がらないでください^^

賢威7に背景を設定する方法

今回は賢威7のプリティーを使って解説していきます。

 

まずは、ワードプレスの管理画面より

「メディア」→「新規追加」で、背景に設定したい画像をアップロードします。

「ファイルを選択」をクリックするか、アップロードしたいファイルを点線内にドロップするかのどちらかで

ワードプレスにアップロードします。

 

下記のようにファイルが表示されていればOK!

次に右端の「編集」をクリック。

 

 

そうすると画像のURLが表示されるので、このURLをPC上のメモ帳等にコピーしておいて下さい。

 

 

※賢威の場合、基本的にカスタマイズする時はCSSを直接編集するので、

もし間違えて編集してしまうと元に戻せなくなる可能性があります(:_;)

ですので、まずは編集する部分のコードをメモ帳などにコピーしておくことをオススメします。

コピーしておけば「あ、やっぱ元に戻そ。」というのが簡単に出来ますので!

 

続いては、実際に背景を設定していきます。

「外観」→「テーマの編集」を開くと、右にずらーっと色々出てきますので、

ずーっと下の方に行ってもらって、「base.css」をクリック。

 

 

「base.css」のテンプレートレイアウトを変更するのですが、

base.cssってすごーーーく長いんですよね。

おいおい、それってどこよ?って私は探すの苦労したので…

全体の中の、だいたいこのあたりにあります。(下図参照)

ご参考までに!

 

 

編集するのはこの部分。

◆変更前

.container{
position: relative;
}

◆変更後

.container{
position: relative;
background-image: url(画像URL);
}

この部分の(画像URL)のカッコ内に、先ほどメモ帳にコピーした画像のURLを貼り付けます。

「ファイルを更新」すれば完了!

 

 

どのように変わったのかというと…。

こんな感じに背景が設定されました。

おおー、記事より背景の方が目立つねー。

 

背景に適しているのはどんな色?

今回は変化が分かりやすいように派手な背景にしましたが、

背景は基本的に派手ではない方が読む人に優しいです。

さすがにこの背景でアドセンスブログ、私ならやらないです(..)

趣味でブログやるなら良いけどね☆

 

なぜか?

それは、アドセンスブログって文章をなるべく最後まで読んでもらって、

願わくば途中にちょこちょこ登場する広告をクリックしては頂けませんか~。

というような手法なので、

できるだけシンプルな背景で、読者さんに読みやすい環境にしておきたいわけです。

最後まで読んでもらった方が広告をクリックしてもらえる確率が上がりますしね。

 

背景ばかりが目立ったり、やけに細かい柄でずーっと見てると目がおかしくなりそうなのとか、

黒背景、赤背景だったりすると、

「何か、このサイト見づらい!離脱っ!」

と、背景が原因で最後まで読んでもらえないなんて、論外っ(>_<)

 

なんで、背景はなるべくシンプルで、奇抜な配色は避けた方が無難ですよ~^^

というお話でした!

 

賢威の詳細はこちら