2019-09-12-木1こんにちは😀広瀬ユキです。今回は、WordPress有料テーマ【JIN】を使っている方向けに、「スマホの背景色を変えるCSSカスタマイズ」をご紹介します。このカスタマイズをすることで、背景設定の自由度が上がり、同時にJINの標準設定では変えられないスマホの背景色も設定できるようになります。WordPress有料テーマ【JIN】を使っている方向けの記事です。設定方法まず、JINの標準の背景色の設定方法は以下です。MANUALJINではさまざまなパーツの色の設定を行うことができます。「カスタ続きを読む背景色をCSSでカスタマイズする背景色を1色にしたい場合は、上記の設定で十分です。JINの標準の設定だと、スマホの背景色が変わりません。背景色にドットやストライプなどの柄や、当ブログのようなグラデーションカラーにしたい場合は、CSSにコードを追加して設定することがオススメです!では、CSSにコードを追加して、背景色を変更してみましょう!CSSにコードを追加する方法がよく分からない方は、下記の記事を参考にしてください。【WordPress】【JIN】ブログのデザインをカスタマイズする方法:2種類【追加CSS】【WordPress】有料テーマ【JIN】を使っている方向けにブログのデザインをカスタマイズする方法:2種類について書きました。囲ってある部分はメモ書きなので、削除してもOKです。#aaa;}「#aaa」にお好きなカラーコードを入れると、変更することができます。【応用~いろいろな背景アレンジ~】このカスタマイズを応用して、様々な背景アレンジができます。20px);}といった具合に、アレンジができます。NxWorldCSSのグラデーションを使って作成した背景パターンのサンプルです。続きを読むなんでも情報館あわせて読みたいチェック・ひし型・ドット背景を画像を使わずCSSで表現ひし型・チェック・ドット背景を画像を使わずCSSだけで表現したパターン一覧です。背景はサンプルのCSSコードをコピペするだけで簡単に変更できます。ひし型・チェック・ドットの細かい設定方法なども紹介しています。続きを読むWebクリエイターボックスあわせて読みたい美しいグラデーションをCSSで実装!配色に使える便利ツールや実例も!背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイトを見かける機会が増えてきました。続きを読むスマホの記事の背景色のみ白にするコード上記の「背景色を変更するコード」を入れるだけで、スマホに背景色を付けることができます。このままだと記事の部分の背景色も変更されてしまいます。囲ってある部分はメモ書きなので、削除してもOKです。※【パンくずリストの上部の余白について】スマホの画面上で固定ページを表示したときに記事の下部とパンくずリストの上部の間に余白がなかったので入力しました。{margin-top:15px;}の部分を削除して下さい。余白を調整することで、スマホの記事の部分の背景色のみ白にすることができました。「#fff」を変更して、お好きなカラーコードを入れることもできます。これをすると、スマホの記事の部分の背景色をお好きなカラーに変更できます。微妙に余白を作り、下の背景を露出したい場合は、maginやpaddingの数値をお好みで変えてみてください。Adsenseの広告がスマホの画面幅いっぱいに表示されるので、記事の部分の背景は余白を作らずに全面白の方が良いとは思います。サルでも分かる図解説明マガジンあわせて読みたいCSSのmarginとは?paddingとは?余白の指定方法まとめ分かりづらいmarginとpaddingの意味や使い方について初心者の方でも分かるように図と例をたくさん用いて解説します。Forumあわせて読みたいスマホの背景色についていつも大変お世話になっております。この度、JINのカスタマイズを実施させていただいてるのですが、どうもスマホの背景色のみ変更することができません。標準のカラー設定で変更してもパソコンのみ反映されて、スマホは反映されないです。{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カスタマイズについて書きました。ファイルが含まれていないサイトがあります。yuki_hirose_広瀬ユキ2019年5月16日(木)ブログ開設。