JINカスタマイズ

【JINカスタマイズ】スマホ画面の背景色の変更方法とは!?

[chat face="ojisan2_think.png" name="" align="left" border="none" bg="gray"] カラー設定の背景色を変更したのにスマホ画面だと変わらないだよな [/chat]

[chat face="chaneko-kaisetsu.png" name="" align="right" border="none" bg="blue"] スマホ画面はCSSを追加する事で変更できるよ!説明するね! [/chat]

みなさんこんにちは。UD(@ud_34m)です。

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

通常のカラー設定>背景色の設定では変更できなかったスマホ画面の背景の色を変更できることによってサイトのデザインの自由度が上がりますね!

この記事は以下のような方にオススメです。

  • JINを使っていて、PC画面の背景色は変更できているがスマホ画面の背景色が変更できない
  • サイトで見かけた色のカラーコードが知りたい
  • JINのカスタマイズ方法に詳しくなりたい

背景色の変更方法

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

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

[blogcard url="https://jin-theme.com/manual/color/"]

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

パソコンの背景色を変更したい際は、上記の設定で十分です。

ただ、JINの設定上スマホの背景色は変わりません。

スマホの背景色を変えたい際はCSSにコードを追加して変更しましょう!

[chat face="chaneko-kaisetsu.png" name="" align="right" border="none" bg="blue"] 「CSSってよく分からない、不安...」という人は、以下のコードを[追加CSS]にコピペする方法がおすすめだよ ![/chat]

背景色を変更するCSSコード

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

/* */ で囲ってある部分の「背景色」は分かりやすいようにメモをしているだけなので、削除してもOKです。
【メモなしverはこちら】

#wrapper {
background: #aaa;
}

カスタマイズコードはたったこれだけです。

「#aaa」を好みのカラーコードに変更することで、背景色を変更することができます。

 

おまけ:このサイトのカラーコードが知りたい!

ネットサーフィンをしていて、

「この色いいな!何色なんだろう??」

って思ったことはありませんか?

僕はめちゃめちゃあります笑

そんな時に役立つChromeの拡張機能が存在します!

それは「ColorPick Eyedropper」というものです!

 

[box03 title="使用方法"]

  1. 画面右上の拡張機能をクリック
  2. カラーコードを知りたい色をクリック
  3. 表示されるカラーコードをコピー

[/box03]

手順はたったこれだけなので、気になったらぜひ入れてみてください!

[chat face="chaneko-kaisetsu.png" name="" align="right" border="none" bg="blue"] これでサイトのデザインが理想に一歩近づくかも![/chat]

まとめ

スマホ画面の背景の色の変え方はお分かりいただけたでしょうか?

追加CSSにコードを追記するだけ誰でも簡単に変更することができますので、ぜひやってみてください!

 

ブログランキング参加中!クリックで応援お願いします!

  • この記事を書いた人
  • 最新記事

-JINカスタマイズ
-, , , ,

© 2020 ジブンナビ