サイトデザイン

【JINカスタマイズ】スマホのトップページの背景色を変更する方法

JINは背景色を簡単にカスタマイズできますが、スマホ画面のトップページは反映されずに「#FFFFFF(白)」のままになってしまいます。

nomalog(ノマログ)のトップページは、PC版と同じ「#eeeeee(薄いグレー)」にしたかったので、CSSに少しだけ追記してみました。

スマホ背景のカスタマイズ方法

カズト
カズト
backgroundをそのまま指定すると記事ページまで反映されてしまうので、「トップページ」のみに背景色を反映させるコードを追記します。

カスタマイズコードは、次の2つのどちらかに追記します。

  • [外観] > [カスタマイズ] > [追加CSS]
  • [外観] > [テーマエディタ] > [style.css]

「CSSを触るのが不安、難しそう」という人は、1つめの[追加CSS]にコピペする方法がおすすめです。

追記CSSの場所
[外観] > [カスタマイズ] > [追加CSS]

追加CSSの場所はこちらです。

カズト
カズト
変更が反映されない原因の多くはキャッシュ系プラグインです。

カスタマイズを公開しても変わらない場合は、キャッシュを削除してみましょう。

カスタマイズコード

@media only screen and (max-width: 786px){ 
.home #wrapper {
background-color: #eee; /*背景色を指定する*/
}
}

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

一行目でスマホ画面のサイズを指定、二行目でトップページを指定、三行目で背景色を指定している簡単なコードです。

スマホのトップページで背景色を反映させたい方は使ってみてくださいね。

スマホ記事一覧カードの文字サイズ

nomalogでは、スマホのトップページ記事一覧カードの文字サイズや太さも変更しています。

@media (max-width: 768px)
{
	body#nts-style .post-list-link .entry-title,
	body#nofont-style .post-list-link .entry-title,
	body#rm-style .post-list-link .entry-title
{
		font-weight: 600!important; /*文字の太さ*/
		font-size:0.87em; /*フォントサイズ*/
}
}

上記のコードの[font-weight]と[font-size]の後の数字で調整できるので、こちらもよろしければどうぞ。

まとめ

いつもはカスタマイズを公開してくれているサイトに頼りっきりですが、今回はスマホ背景のカスタマイズが他に見当たらなかったので、記事にしてみました。

nomalogでは、くまさん(@Bearface18)の運営する「for men」のカスタマイズを参考にさせていただいています。

JINをお使いの方で、今と違ったデザインにサイトを模様替えしたい方は、「for men(for-JIN)」もご覧になってみてください。

この記事のURLをコピーする