こんにちは😀広瀬ユキです。
今回は、WordPress有料テーマ【JIN】を使っている方向けに、「スマホの背景色を変えるCSSカスタマイズ」をご紹介します。
このカスタマイズをすることで、背景設定の自由度が上がり、同時にJINの標準設定では変えられないスマホの背景色も設定できるようになります。
WordPress有料テーマ【JIN】を使っている方向けの記事です。
背景色の設定方法
まず、JINの標準の背景色の設定方法は以下です。
- WordPressの編集画面から、「カスタマイズ」→「カラー設定」を開きます
- 「背景色」の項目でお好きなカラーを選択します
- 画面上部の「公開」を押します
背景色をCSSでカスタマイズする
背景色を1色にしたい場合は、上記の設定で十分です。
が、JINの標準の設定だと、スマホの背景色が変わりません。
また、背景色にドットやストライプなどの柄や、当ブログのようなグラデーションカラーにしたい場合は、CSSにコードを追加して設定することがオススメです！
では、CSSにコードを追加して、背景色を変更してみましょう！
CSSにコードを追加する方法がよく分からない方は、下記の記事を参考にしてください。
コード
背景色を変更するコード
/*背景色*/
#wrapper {
background: #aaa;/*色*/
}
/*背景色*//* */ で囲ってある部分はメモ書きなので、削除してもOKです。
【メモ書きなしver.】
#wrapper {
background: #aaa;
}「＃aaa」にお好きなカラーコードを入れると、変更することができます。
※スマホの背景色も、コレを追加するだけで変更することができます！
【応用～いろいろな背景アレンジ～】
このカスタマイズを応用して、様々な背景アレンジができます。
例えば、ドット（水玉）にしたい場合は、
#wrapper {
background: #888;
background-image: radial-gradient(#444 20%, transparent 0), radial-gradient(#444 20%, transparent 0);
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
}水平ストライプにしたい場合は、
#wrapper {
background: repeating-linear-gradient(#444, #444 10px, #888 0, #888 20px);
}といった具合に、アレンジができます。カラーコードや数値を変えて、お好きな背景にアレンジしてみてください！
スマホの記事の背景色のみ白にするコード
上記の「背景色を変更するコード」を入れるだけで、スマホに背景色を付けることができます。
しかし、このままだと記事の部分の背景色も変更されてしまいます。
記事の部分の背景色は白にしたい！という方は、上記のコードにプラスで以下のコードをCSSに追加し、カスタマイズしましょう！
/*スマホの記事の背景色*/
@media all and (max-width:767px)/*767px以下のとき↓を読み込む*/ {
.cps-post {
margin: -15px;
margin-top: -25px;
padding: 15px;
padding-top: 15px;
padding-bottom: 22.5px;
background: #fff;/*白*/
}
#breadcrumb {
margin-top:15px;
}
}
/*スマホの記事の背景色*//* */ で囲ってある部分はメモ書きなので、削除してもOKです。
【メモ書きなしver.】
@media all and (max-width:767px) {
.cps-post {
margin: -15px;
margin-top: -25px;
padding: 15px;
padding-top: 15px;
padding-bottom: 22.5px;
background: #fff;
}
#breadcrumb {
margin-top:15px;
}
}説明
.cps-post
- @media all and (max-width:767px) →767px以下（スマホなど）の画面上で読み込む
- cps-post→投稿（記事）の部分
- margin→外側の余白
- margin-top→外側上部の余白
- padding→内側の余白
- padding-top→内側上部の余白
- padding-bottom→内側下部の余白
- background→背景（色）
#breadcrumb
- margin-top→パンくずリストの上部の余白
※【パンくずリストの上部の余白について】スマホの画面上で固定ページを表示したときに記事の下部とパンくずリストの上部の間に余白がなかったので入力しました。必要なければ#breadcrumb {margin-top:15px;}の部分を削除して下さい。
余白を調整することで、スマホの記事の部分の背景色のみ白にすることができました。
もちろん「#fff」を変更して、お好きなカラーコードを入れることもできます。これをすると、スマホの記事の部分の背景色をお好きなカラーに変更できます。
もし、微妙に余白を作り、下の背景を露出したい場合は、maginやpaddingの数値をお好みで変えてみてください。
【メモ書きありver.】
/*背景色*/
#wrapper {
background: #aaa;/*色*/
}
/*背景色*/
/*スマホの記事の背景色*/
@media all and (max-width:767px)/*767px以下のとき↓を読み込む*/ {
.cps-post {
margin: -15px;
margin-top: -25px;
padding: 15px;
padding-top: 15px;
padding-bottom: 22.5px;
background: #fff;/*白*/
}
#breadcrumb {
margin-top:15px;
}
}
/*スマホの記事の背景色*/
【メモ書きなしver.】
#wrapper {
background: #aaa;
}
@media all and (max-width:767px) {
.cps-post {
margin: -15px;
margin-top: -25px;
padding: 15px;
padding-top: 15px;
padding-bottom: 22.5px;
background: #fff;
}
#breadcrumb {
margin-top:15px;
}
}スマホの背景色を変えるCSSカスタマイズができました‼
編集後記
このカスタマイズは、スマホに背景色を付けられるので、気に入っています。
☆クリックで応援お願いします☆