次回から「ノマログ」と検索ください

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

2 min

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

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

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

https://www.imia.org/wp-content/uploads/2020/03/d57cb12f-kazuto.jpg

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

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

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

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

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

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

https://www.imia.org/wp-content/uploads/2020/03/d57cb12f-kazuto.jpg

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

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

カスタマイズコード

@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)」もご覧になってみてください。

おすすめの取引所

GemForex

狭いスプレッド・最大1000倍レバレッジ・金融ライセンスも取得している人気FX取引所。2019年頃から口座開設数が爆発的に伸びています。口座開設ボーナス&入金ボーナスが充実。

XM Trading

人気、ユーザー数が世界トップクラスの海外FX取引所。金融ライセンスも取得済みで、運営実績も当サイトが紹介する取引所の中で最も長いです。口座開設で3,000円のボーナス。

FXGT

FXGT

人気の仮想通貨FX「CryptoGT」の運営会社が新たにはじめたFX特化の取引所。入金ボーナスが充実しており、はじめての方にもおすすめです。仮想通貨入金にも対応しています。

【FX】GEMFOREX自宅待機応援キャンペーン

時間
新規口座開設で30,000円がボーナス!
入金不要で即トレードができます。

カズト

カズト

メディア運営者

クレジット・リース会社に2年勤めた後、メディアの運営で個人事業主として独立しました。主に仮想通貨の情報サイトと当サイトを運営しています。仮想通貨歴とサイト運営歴は4年目です。

当サイトの記事で気になる点やご質問があればTwitterのDMよりご連絡ください。

FOLLOW

カテゴリー:
にほんブログ村 為替ブログ FX 副業投資家へ
関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です