ブログ

【JIN】カラー設定のカスタマイズ方法(初心者向け)

こんにちは、よむお(@yomubl)です!

この記事ではブログ初心者に向けてJINのカスタマイズが少しでも早く終わるようにJINのカラー設定のカスタマイズについて説明したいと思います。

ヘッダーの背景色やタイトルの文字列の場所に関しては誰にでも分かるのかもしれませんが、メニューの背景色やスマホ専用メニューの文字色の場所は分かりづらいかなと思います。

ただ、CSSをいじらないでブログの殆どの色を設定できるので便利な機能の一つですね。

【JIN】カラー設定
  1. テーマカラーの設定
  2. アクセントカラーの設定
  3. 背景色の設定
  4. ヘッダーの背景色の設定
  5. タイトルの文字列の設定
  6. メニューの文字色の設定
  7. メニューの背景色の設定
  8. SNSボタンの色の設定
  9. フッターの文字色の設定
  10. フッターの背景色の設定
  11. リンクの色の設定
  12. リンクにマウスを合わせた時の色の設定
  13. サイト内の文字色の設定
  14. スマホ専用メニューの文字色の設定
  15. スマホ専用メニューの背景色の設定
  16. インフォメーションバーの背景色の設定

では、一つずつ説明していきます。(テーマ3を使用して説明します。)

テーマカラーの設定

テーマカラーの色を設定できます。

色は「カラーコードを設定する方法」と「好きな色を選択する方法」のどちらかで設定できます。

カラーコードに関しては、google等の検索エンジンで「カラーコード」で検索するとカラーコードの一覧のサイトが見つかると思います。

JIN,テーマカラーの設定

アクセントカラーの設定

アクセントカラーの色を設定できます。

アクセントカラーの場所は以下の赤枠で囲ったところです。

JIN,アクセントカラーの設定

背景色の設定

背景色の色を設定できます。

JIN,背景色の設定

ヘッダーの背景色の設定

ヘッダーの背景色の設定ができます。

JIN,ヘッダーの背景色の設定

タイトルの文字色の設定

タイトルの文字色の設定ができます。

JIN、タイトルの文字色の設定

メニューの文字色の設定

メニューの文字色の設定ができます。

メニューの表示方法は「WORDPRESS管理画面」-「外観」-「メニュー」のメニュー設定のグローバルナビゲーションにチェックを入れると表示されます。

詳しい設定方法についてはJIN公式ページ グローバルメニューの設定方法を参照ください。

JIN、メニューの文字色の設定

メニューの背景色の設定

メニューの背景色の設定ができます。

JIN、メニューの背景色の設定

SNSボタンの色の設定

twitter、Facebook、instagram等のSNSボタンの色の設定ができます。

JIN、SNSボタンの色の設定

フッターの文字色の設定

フッターの文字色の設定ができます。

JIN、フッターの文字色の設定

フッターの背景色の設定

フッターの背景色の設定ができます。

JIN、フッターの背景色の設定

リンクの色の設定

他サイトへのリンクの色(リンクにマウスを合わせた時)の設定ができます。

JIN、リンクの色の設定

サイト内の文字色の設定

サイト内の文字色の設定ができます。

JIN、サイト内の文字色の設定

スマホ専用メニューの文字色の設定

スマホ画面でのメニューの文字色の設定ができます。(PCやタブレットは対象外)

JIN、スマホ専用メニューの文字色の設定

スマホ専用メニューの背景色の設定

スマホ画面でのメニューの背景色の設定ができます。(PCやタブレットは対象外)

JIN、スマホ専用メニューの背景色の設定

インフォメーションバーの背景色の設定

インフォメーションバーの背景色の設定ができます。

JIN、インフォメーションバーの背景色の設定

他のサイトやブログの色を参考にする方法

今後、ブログを作っていくにあたり他の人が作ったブログを参考にする機会もあると思います。

特に色の使い方等は参考にしてみても良いのではないでしょうか。

ブログのカラーコードの調べ方について書きたいと思います。

と言っても簡単なんですけどね。

  1. 調べたいブログの画面を右クリックして「ページのソースを表示」を選択する
  2. ソースが表示されるのでCtrl+Fで「color」を検索する
  3. 複数ヒットしてしまいますが、それのどれかに対象のカラーコードがあるので一つづつ試す

「JIN」のカラー設定のカスタマイズ方法のまとめ

WordPressテーマ「JIN」のカラー設定のカスタマイズについて説明させていただきました。

青色にも「水色に近い青」、「空の色に近い青色」等、多くの種類の青色があります。

WORDPRESSテーマのJINは同じ青色でも人が心地よく感じる青色をデフォルトで設定しているように感じます。

なので、デフォルトのまま使うのも一つの手だと思います。

JINには着せ替え機能が用意されているので、全ての着せ替えを試してみて好きな色があったらカラーコードをメモしておき使うのもおすすめできます。

最後までお読みいただきありがとうございました。