top3

賢威で背景画像や色を変更したり、コンテンツと分ける方法

Pocket

4268924347_0ff6e368a5
読みやすい背景というと白が基本だと思いますが、色を変えたり背景画像を加えることによってオリジナリティ溢れるブログを作ることができます。

背景を変えるということはブログのイメージを一瞬で変えてしまうほど効果があると思うので、お気に入りの色や背景画像に変えてみましょう。

背景の色を変える


まずは背景の色を変えてみましょう。

「外観」→「テーマ編集」→「design.css」と進みます。



表示されたページの一番上に「1、サイト全体の背景設定」があるので、その下の以下の部分を好きな色に変えましょう。

【before】

/*——————————————————–
1、サイト全体の背景設定
——————————————————*/

#container{ background-color: #FFF; }

        
【after】

/*——————————————————–
1、サイト全体の背景設定
——————————————————*/

#container{ background-color: 好きな色; }




背景を画像にする


背景を画像にするには、先ほどの#container{ background-color: 好きな色; }

を以下のようにします。

#container{ background-color: #fff;
background: url(画像URL) center center repeat;
background-attachment: fixed;}


画像URLに好きな画像をサイトにアップロードし、URLを貼り付けます。

※画像URLをカッコで囲むことを忘れずに!


以下のサイトが無料で壁紙をダウンロードできますしオススメです。
http://subtlepatterns.com/


コンテンツだけ色を変える


これで、背景を画像にできたり、色を変えたりすることができたと思いますが、これだとコンテンツの背景もすべて変わってしまいます。


例えば背景は変えても、コンテンツ付近だけは白にしたい場合は、このように設定しましょう。


【before】

/*——————————————————–
コンテンツ全体
——————————————————–*/

#main-in{ padding-top: 1.5em; }

        
【after】

/*——————————————————–
コンテンツ全体
——————————————————–*/

#main-in{ padding-top: 1.5em;
      backgroud-color:#fff;}

           



ちなみに、サイドバーだけを白くしたいという場合は、すぐ下に以下を付け加えましょう。

#sidebar {
background-color: #fff;
}




コンテンツは読者が読みやすい色にするべきです。

ですので、できれば画像は使用しないほうがいいかもしれませんね。    

コメントを残す

サブコンテンツ