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

2 min
おすすめの海外FX取引所ランキング

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

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

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

https://www.imia.org/wp-content/uploads/2020/04/nomalog-icon.jpg

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

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

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

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

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

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

https://www.imia.org/wp-content/uploads/2020/04/nomalog-icon.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)」もご覧になってみてください。

カズト

カズト

「ノマログ」編集長

大学を卒業後、クレジット・リース会社で法人営業を2年間→サイト運営で個人事業主として独立。暗号資産歴とサイト運営歴は3年目です。ダイヤモンドZAiの仮想通貨特集掲載、コインテレグラフ寄稿、CryptoTimes主催イベント登壇、BITDAYS主催イベント登壇など

国内FX・海外FXを利用するにあたり、正確な情報を収集し自分に合った優良FX会社を選ぶことは大変です。ノマログFXでは、会社の信頼性、取引スペック、口コミなどを比較調査し、安心してご利用いただけるFX会社の情報を提供しています。

FOLLOW

カテゴリー:

海外FXおすすめランキング

GEMFOREX(ゲムフォレックス)

GEMFOREX(ゲムフォレックス)
  • ニュージーランドFSPの金融業者登録
  • 日本語サポート完全対応
  • MetaTrader4に対応
  • 追証なし
  • 最大レバレッジ1000倍
  • ロスカット維持率20%
  • スキャルピングOK
  • 自動売買ツール使い放題
  • 定期的な口座開設・入金ボーナスキャンペーンを実施

FXGT

FXGT
  • セーシェル金融庁(SC:FSA)の金融ライセンス取得
  • 日本語サポート完全対応
  • MetaTrader5に対応
  • 追証なし
  • 最大レバレッジ500倍
  • ロスカット維持率50%
  • スキャルピングOK
  • 定期的な口座開設・入金ボーナスキャンペーンを実施
  • 暗号資産(仮想通貨)の入金対応
  • ビットコインやイーサリアム、リップルが取引可能
  • BTCも為替も同じ口座でOK

XMTrading(エックスエム)

XMTrading(エックスエム)
  • セーシェル金融庁(SC:FSA)の金融ライセンス取得
  • 日本語サポート完全対応
  • MetaTrader4に対応
  • 追証なし
  • 最大レバレッジ888倍
  • ロスカット維持率20%
  • スキャルピングOK
  • 口座開設で3000円のボーナス・入金ボーナス実施
  • 10年以上の運営実績
  • 日本で人気No.1の取引所
関連記事