JINカスタマイズ

【WordPress】【JIN】スマホの背景色を変えるCSSカスタマイズ★オススメ★

こんにちは😀広瀬ユキです。

今回は、WordPress有料テーマ【JIN】を使っている方向けに、「スマホの背景色を変えるCSSカスタマイズ」をご紹介します。

このカスタマイズをすることで、背景設定の自由度が上がり、同時にJINの標準設定では変えられないスマホの背景色も設定できるようになります。

WordPress有料テーマ【JIN】を使っている方向けの記事です。

背景色の設定方法

まず、JINの標準の背景色の設定方法は以下です。

  1. WordPressの編集画面から、「カスタマイズ」→「カラー設定」を開きます
  2. 「背景色」の項目でお好きなカラーを選択します
  3. 画面上部の「公開」を押します

背景色をCSSでカスタマイズする

背景色を1色にしたい場合は、上記の設定で十分です。

が、JINの標準の設定だと、スマホの背景色が変わりません。

また、背景色にドットやストライプなどの柄や、当ブログのようなグラデーションカラーにしたい場合は、CSSにコードを追加して設定することがオススメです!

では、CSSにコードを追加して、背景色を変更してみましょう!

CSSにコードを追加する方法がよく分からない方は、下記の記事を参考にしてください。

CSSにコードを追加する方法はコチラ↓
【WordPress】【JIN】ブログのデザインをカスタマイズする方法:2種類【追加CSS】【WordPress】有料テーマ【JIN】を使っている方向けにブログのデザインをカスタマイズする方法:2種類について書きました。【追加CSS】...

コード

背景色を変更するコード

/*背景色*/
#wrapper {
background: #aaa;/*色*/
}
/*背景色*/

/* */ で囲ってある部分はメモ書きなので、削除してもOKです。
【メモ書きなしver.】

#wrapper {
background: #aaa;
}

「#aaa」にお好きなカラーコードを入れると、変更することができます。

※スマホの背景色も、コレを追加するだけで変更することができます!

え?これだけ!?と思うような簡単な設定!でも「#background」では変えられないんですね~😂やり方がよく分からなくて迷走しました・・・💀

【応用~いろいろな背景アレンジ~】

このカスタマイズを応用して、様々な背景アレンジができます。

例えば、ドット(水玉)にしたい場合は、

#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の数値をお好みで変えてみてください。

ただ、Google Adsenseの広告がスマホの画面幅いっぱいに表示されるので、記事の部分の背景は余白を作らずに全面白の方が良いとは思います。
marginと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カスタマイズができました‼

編集後記

このカスタマイズは、スマホに背景色を付けられるので、気に入っています。

【WordPress】【JIN】サイトタイトルの色を変えるCSSカスタマイズ★オススメ★【WordPress】有料テーマ【JIN】を使っている方向けに、サイトタイトルの色を変えるCSSカスタマイズについて書きました。☆オススメ☆...
【WordPress】【JIN】Twitterカードのサイズを設定する方法【便利】大きく設定しよう!【WordPress】有料テーマ【JIN】を使っている方向けに、Twitterカードのサイズを設定する方法について書きました。【便利】summary_large_imageに設定するのがオススメです。...
【WordPress】【JIN】ハンバーガーメニューの「MENU」の文字色と背景色のCSSカスタマイズ【WordPress】有料テーマ【JIN】スマホのハンバーガーメニューの色のCSSカスタマイズについて書きました。...

☆クリックで応援お願いします☆

ブログランキング・にほんブログ村へ にほんブログ村 スイーツブログ コンビニスイーツへ にほんブログ村 ブログブログ ブログ初心者へ