Facebook
RSS Feed
Apr 12, 2013

レスポンシブテーマで背景を変える方法

2013-04-10 16.55.51

美味しそうなハンバーガーの写真で失礼します。
これパン屋さんのハンバーガーなんですよ。旨いです。

で、本題です。
Minimal WPのレスポンシブテーマは「カスタム背景」に対応してないので、
背景を変えたい場合は、スタイルシート内に直接コードを記述することで簡単に変更出来ます。
スタイルシート初心者の方はカスタマイズの第一歩ですね。

背景色の変更方法

body { background: #FFFFFF; }

こんな感じですね。
#のあとの6桁を変えればOKです。
カラーチャートはWEBで調べてくださいね。

原色大辞典
http://www.colordic.org/

背景画像の変更方法

body { background: #FFFFFF; url(http://minimalwp.com/wp-content/uploads/bg.jpg) repeat; }

こんな感じですね。
メディアから背景画像をアップロードして、画像のURLを指定するだけです。
その後の「repeat」を色々変える事でタイル状にしたり一枚だけ載せたりできます。

repeat:繰り返し(タイル状)
repeat-x:横方向に繰り返し
repeat-y:縦方向に繰り返し
no-repeat:繰り返さない

この辺はスタイルシートの基本なので、
もし分からなかったらGoogleさんで検索すれば詳しい解説がいっぱい出てきます。

記述を追加するのはどこでもいいですけど、
/* 基本設定 */ っていう所のすぐ下辺りに入れるといい感じだと思います。

レスポンシブテーマ以外の通常のテーマは、
カスタム背景が付いてますので、通常通りカラーピッカーで選ぶだけでOKです。

Posted in WordPress初心者講座Comments Closed 

関連記事

今月の人気のワードプレステンプレートBEST 3

WordPressテーマ(スマホ対応レスポンシブデザイン)「Slauson」
公式サイト/マガジン/ビジネス・企業
WordPressテーマ(スマホ対応レスポンシブデザイン)White Studio
ビジネス・企業/コーポレートサイト/公式サイト
WordPressテーマ(スマホ対応レスポンシブデザイン)「Pantomime」
ギャラリー・ポートフォリオ / 公式サイト