WordPressテーマ

【WordPressテーマJIN】ブログ初心者でも簡単にできる設定方法・カスタマイズを徹底解説

JIN

クロネのブログ講座はWordPressテーマ「JIN(ジン)」を利用しています。

「JINをインストールしたは良いけど、どうやって設定すればいいのかよくわからない」

「パーツの名前を聞いても初心者だからどの部分のことかわからない」

「このブログみたいにしたいけど、どの部分を触ればいいかわからない」

と困ってないでしょうか。

私はいつも新しいテーマを導入するときは困ります。

また、同じようにJINを使っているけど、「クロネのブログ講座」のこの部分みたいに設定したい!という声もいただきます。

そこでブログ初心者でも簡単にできる設定方法・カスタマイズを紹介します。

「外観」>「カスタマイズ」だけで操作できるので大丈夫です。

JINカスタマイズ

なお、そもそもWordPress「JIN」の導入を検討している方は、次の記事をお読みください。

以下、「JIN」をブログに導入して有効化した前提で進めていきます。

詳細なマニュアルは公式サイトにあります。

できる限り記事中にも引用していますが、載ってないものがあれば公式マニュアルも探してみてください。

【公式】WordPressテーマ「JIN」の設定マニュアル

【公式】よくある質問

質問ができるフォーラムもあります。

【公式】JIN Forum

※テーマがアップデートされたらこの記事も見直していきます。

▼このブログと同じWPテーマ▼
JIN

1.WordPressカスタマイズの基本はスマホ

どのテーマもそうですが、スマートフォンで見る前提でカスタマイズをしましょう。

7~8割の人はスマホで見ています。

「パソコン」上ではデザインにこだわっているのに、「スマホ」で見ると読者に負担がかかる設計になっていることもよくあります。

スマホを持っていない場合でも、カスタマイズ画面の下に「スマホビュー」があるのでこれを選んで確認も可能です(表示されないパーツもあるので万能ではありませんが)。

スマホビュー

また、下記の記事にもGoogle Chromeを使ってパソコンからスマホビューを確認できる方法を紹介しています。

Google Chromeで見る方法

【Windows】

パソコンで「F12」を押します(または「Ctrl」+「Shift」+「I(ローマ字のアイ)」の同時押し)。

【Mac】

「Command」+「Option」+「I(ローマ数字のアイ)」の同時押しです。

※ダメな場合は「Google Chromeの設定」>「その他のツール」>「デベロッパーツール」を選びます。

以下ではJINのカスタマイズを「パソコン」で操作した場合で説明しています。

必要に応じてスマホビューを入れています。

ちなみに「ブログ運営でパソコンを使った方が良いですか?」と聞かれますが、「本気でやるなら買う一択」です(作業はパソコン、確認はスマホがベスト)。

▼アフィリエイトを加速する▼

2.サイト基本設定

JINカスタマイズ
  1. SEO用タイトル:クロネのブログ講座
  2. SEO用サブタイトル:趣味ブログで自分の好き・得意・趣味を自動販売機化する方法
  3. サイトのタイトル:クロネのブログ講座
  4. ディスクリプション:ブログ初心者が月1万円稼ぐためのブログの始め方講座。趣味ブログで自分の好き・得意・趣味を自動販売機化しよう!
  5. フォント選択:デフォルト(端末の標準フォント)
  6. アニメーション機能:無効
  7. サイトアイコン(512×512ピクセル以上の正方形):画像アップロード
  8. 記事の投稿日時の表示:更新日と公開日

1・2・4番目は自分のブログ名で検索すると次のような感じで表示されます(2番目のサブタイトル切れてるのでもう少し短い方がいいかも)。

JINタイトル

「サブタイトル」と「ディスクリプション」はとりあえず仮にしておいて、ブログの方向性が決まったら変えてみましょう(最初から悩むと日が暮れます)。

5番目の「フォント選択」は「デフォルト」をおすすめします。

【公式】JINでフォントを変更する方法

6番目の「アニメーション機能」は自由です。私は無効にしてます。

7番目の「サイトアイコン」も自由です。いわゆる「ファビコン」のことです。

ブラウザにこんなイラストが表示されますが、最初から設定しなくてもOKです。

JINサイトアイコン

8番目の「記事の投稿日時の表示」は「更新日と公開日」にしてますが、「更新日のみ(未更新の場合は公開日を表示)」もいいです。

リライトしてGoogleの検索結果に新しい日付を表示させたいときは、

  • 「更新日と公開日」の場合:公開日を新しくする
  • 「更新日のみ」の場合:更新すると自動的に新しくなる

となすればいいかと思います。

【公式】「サイトタイトル」と「ディスクリプション」の設定方法

3.サイトデザイン設定

JINカスタマイズ
  1. 背景画像:設定なし
  2. ヘッダーデザインの選択:スタイル3
  3. サイドバーデザインの選択:スタイル4
  4. 記事エリアのデザインの選択:スタイル1
  5. フッターデザインの選択:3カラム
  6. グローバルメニューのデザイン選択:パターン2
  7. 【PC用】グローバルメニューの文字サイズ:14px

この5つはあなたの好きなように設定しましょう。

正解はないと思いますが、クロネのブログ講座風にしたかったら上記のスタイルを選びましょう。

1番目の「ヘッダーデザインの選択」で「ヘッダー画像あり」を選んでいた時もありますが、ファーストビュー(最初の見た目)で画像がバーンと表示されるよりはメニューや記事が見えた方が良いかなと思ってこうしてます。

その代わり、後の「9.トップページ設定」で設定する「ピックアップコンテンツ」で重要な記事へのリンクを実現しています。

4.カラー設定

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

カラー設定は自由です。好きなようにしてみてください。

ただし11番目の「リンクの色」は、伝統的に青系の色=リンクだと認識されやすいので、全体のバランスを取りながら、できる限り青系の色にすることをおすすめします。

ちなみに#d16477(耳)#515966(顔)は統一感を出すためにキャラクターの色を利用しています。

iromiru (イロミル) – 画像からカラーコード抽出便利サービス」を使うとカラーコードが抽出できて便利です。

クロネ配色パターン

配色で悩んだら下記の記事もあわせてお読みください。

5.ヘッダー設定

JINカスタマイズ
  1. ヘッダー全体の表示選択:表示
  2. サイトロゴ:オリジナル画像をアップロード
  3. ロゴとフレーズの文字サイズ調整:30
  4. ロゴとフレーズの上下の余白:10
  5. 検索ボックスの表示選択:表示
  6. SNSアイコンの表示選択:表示
  7. 【スマホ用】ヘッダーロゴとヘッダーフレーズの文字サイズ調整:80
  8. インフォバーに表示する文字:(自由)
  9. インフォバーのリンク先URL:(自由)

サイトロゴにオリジナル画像を使ってます。

最初のうちはなければ「なし」でいいですが、いずれオリジナル画像を作ると自分のブログに愛着が持てます。

3・4・7番目はロゴに合わせて調整しています。

自分で実際の画面を見て確認しながら調整してみてください。

▼サイズ:1200 × 250

クロネのブログ講座

5番目の「検索ボックス」と6番目の「SNSアイコン」は表示してます。

JINカスタマイズ

8番目と9番目の「インフォバー」は1番読んでほしい記事やサイトマップにリンクを貼ると良いでしょう。

【公式】ヘッダー画像を設定する

6.ヘッダー画像設定

JINカスタマイズ

ヘッダー画像設定は、「3.サイトデザイン設定」で「ヘッダー画像あり」を選んだときにカスタマイズする部分です。

※クロネのブログ講座では採用していないので、特に設定していません。

JINの公式サイト」では設定されているので参考にしてみてください。

もし採用する場合は、それぞれ設定してみてください。

  1. ヘッダー画像
  2. ヘッダー画像のリンク先URL
  3. ヘッダー画像のキャッチフレーズ
  4. キャッチフレーズのカラー
  5. キャッチフレーズの文字加工
  6. サブテキストのカラー
  7. サブテキストの文字加工
  8. ヘッダー画像のボタンカラー
  9. ヘッダー画像のボタンのリンク先
  10. ヘッダー画像のボタンテキスト
  11. ヘッダー画像のテキスト位置調整
  12. 【スマホ用】ヘッダー画像のテキスト位置調整
  13. ヘッダー画像の下層ページ表示選択
  14. 【スマホ用】ヘッダー画像

この中で採用するとき注意が必要なのは「ヘッダー画像の下層ページ表示選択」です。

ヘッダー画像を「トップページだけ」に表示したい場合は「下層ページに表示させない」を、各個別記事にも表示させたい場合は「下層ページにも表示される」にしましょう。

ここは良く設定方法が分からないと質問が多いです。

【公式】ヘッダー画像を設定する

7.フッター設定

JINカスタマイズ
  1. フッターの表示項目の選択:コピーライトのみ
  2. フッターの項目【左】のテキストを変更する:(自由)※このブログは設定なし
  3. フッターの項目【左】のリンクを変更する:同上
  4. フッターの項目【右】のテキストを変更する:同上
  5. フッターの項目【右】のリンクを変更する:同上
  6. スマホサイドメニューのボタンのテキスト:「メニュー」

全文表示かコピーライトのみか選べますが、「コピーライトのみ」にしてます。

JINカスタマイズ

プライバシーポリシー&免責事項」は固定ページに書いてフッターのウィジェットで表示してます。

ちなみにこのブログはGoogleアドセンスを導入していないので、アドセンスについてプライバシーポリシーは書いていませんが、導入する方は必ずどこかに記載しましょう。

参考:アドセンスにはプライバシーポリシーが必須!書き方とテンプレート | iscle [イズクル]

スマホサイドメニューのボタンのテキストは「メニュー」にしています。

スマホサイドメニューとは、後の「15.メニュー」で設定する「④スマホのボタンメニュー」のことです。

JINカスタマイズ

8.トップページ設定

JINカスタマイズ
  1. ピックアップコンテンツのタイプ選択:メニュータイプ(文字なし)
  2. ピックアップコンテンツの下層ページ表示選択:下層ページに表示させる
  3. トップページのレイアウト選択:2カラム
  4. トップページの記事一覧デザイン選択:マガジンスタイル(スマホ1カラム)
  5. 最新記事一覧から除外したいカテゴリーIDに-をつけて入力:設定してません
  6. トップページの記事一覧に表示させるカテゴリーID:3つ設定してます

トップページ設定は上記のようにしています。

JINカスタマイズ

ここも自由です。

のんくら本を実践して「クロネのブログ講座」を変えていく話」に詳細は書いていますが、ピックアップコンテンツを利用することでブログの「始め方」「書き方」「稼ぎ方」「続け方」という4つのコンテンツにアクセスしやすくしています。

ここは自分が1番読んでほしい記事へのリンクにしてもいいと思います。

正解はないですし、記事数が増えると変わることも多いです。試行錯誤してみてください。

【公式】ピックアップコンテンツの作り方

※6番目の「トップページの記事一覧に表示させるカテゴリーID」は、公式では「コンテンツマガジン」と呼ばれている部分です。

【公式】「コンテンツマガジン」の作り方

9.記事のデザイン設定

JINカスタマイズ
  1. 文字サイズ:L
  2. 文字サイズ(スマホ):L
  3. マーカー1の色・太さ、2の色・太さ:自由
  4. CTAの背景色・CTA内の文字色:自由
  5. 関連記事の表示形式:ベーシックスタイル
  6. 関連記事の見出し:こちらの記事もおすすめ!
  7. 関連記事の表示件数:5
  8. 記事に自動で挿入されるアイキャッチ画像を非表示にする:「レ」
  9. 記事のコメントを表示する:「レ」
  10. SNSボタンを表示しない:「 」
  11. ページ上部のSNSボタンのみを表示しない:「 」
  12. 記事下の「次の記事」「前の記事」を非表示にする:「 」
  13. 記事下の関連記事を非表示にする:「 」

※「レ」はチェックボックスをチェックした場合、「 」はしなかった場合という意味です。

この辺りも自由ですが、上記のようにしています。

5番目の関連記事は好きな形式にしましょう。

Googleアドセンスの「関連コンテンツ」でもいいです。

8番目はよく質問がありますが、記事の冒頭にアイキャッチ画像が自動的に設定されないようにするために私は「非表示」にしてます。

そして1記事ずつ必要に応じて画像を記事冒頭に挿入しています。

自動的に入れたい場合は非表示のチェックを外して「 」(=表示)にしましょう。

10.見出しデザイン設定

JINカスタマイズ
  1. 大見出し(H2)デザイン:スタイル4
  2. 小見出し(H3)デザイン:スタイル7
  3. 小見出し(H4)デザイン:スタイル1
  4. オリジナルデザインのCSS記述:特に設定なし

上記を選んでいます。自由です。

【公式】見出しのデザインを変更する

11.ボックスデザイン設定

JINカスタマイズ

ボックスデザインというのは、下記のようなものですね。

ここにテキストを入力

いろいろなボックスがありますが、私が下記の2つをよく使っています。

JINボックススタイル

「ボックスタイトル」も変えてます。

自由にやってみましょう。

あまり使いすぎるとごちゃごちゃするのでバランス大事です。

【公式】ボックスデザイン(色・タイトル)を変更する

12.ボタンデザイン設定

JINカスタマイズ

ボタンデザインも自由に変更しましょう。

私は「テキストリンク」で対応してしまうのであまり使っていませんが、アフィリエイトのボタンとしても利用できると思います(アフィリエイトリンクとして利用する場合は改変可能か各ASPにご確認下さい)。

【公式】ボタンのデザイン設定

13.SNS設定(OGP)

JINカスタマイズ
  1. SNSボタンのデザイン:スタイル1
  2. トップページのOGP画像:設定
  3. facebookの管理者ID:自由
  4. Twitterのユーザー名:@kuroneblog
  5. Twitterのカードタイプ:summary
  6. facebookのURL:自由
  7. TwitterのURL:https://twitter.com/kuroneblog
  8. InstagramのURL:自由
  9. YouTubeのURL:自由
  10. LINEのURL:自由
  11. お問い合わせページのURL:https://kurone43.com/contact/

1番目の「SNSボタンのデザイン:スタイル1」は次の部分です。

JINカスタマイズ

2番目の「トップページのOGP画像」とは、twitterなどでブログをシェアしたときに出てくる画像です。

OGP画像

OGPとは、「Open Graph Protcol」の略でFacebookやTwitterなどのSNSでシェアした際に、設定したWEBページのタイトルやイメージ画像、詳細などを正しく伝えるためのHTML要素です。

出典:OGPを設定しよう!SNSでシェアされやすい設定方法とは?

3番目~11番目のSNS設定はパソコンでは右上に表示されます(スマホは右上のスライドメニューを開くと表示)。

SNS設定

InstagramとかYouTubeとかある方は自由にどうぞ。

【公式】OGP設定(SNSに関する設定)について

14.その他の設定

JINカスタマイズ
  1. カエレバヨメレバをJINオリジナルデザインにする:自由
  2. アプリーチをJINオリジナルデザインにする:自由
  3. コードのシンタックスハイライターを利用する:自由
  4. ショートコードの系列を無効化する:自由
  5. パンくずリストの表示:表示
  6. トップへ戻るボタンの表示:表示
  7. NO IMAGE画像の設定:設定

1~4番目は上記リンク先の公式サイトの説明を読んで必要かどうか判断してみてください。私は特に設定してません。

5番目の「パンくずリスト」、6番目の「トップへ戻るボタン」は「表示」がおすすめです。

15.メニュー(5か所)

JINカスタマイズ

メニューバーです。

5種類あります。

  1. グローバルナビゲーション
  2. スマホ固定フッターメニュー
  3. スマホのスライドメニュー
  4. トップページのピックアップコンテンツ
  5. スマホのボタンメニュー

▼パソコンの場合

JINカスタマイズ

1番目の「グローバルナビゲーション」と5番目の「トップページのピックアップコンテンツ」が入ります。

▼スマホの場合

JINカスタマイズ

パソコンで設定した2つのメニューのほかに上記のようにスマホ固有の3つのメニューが入って5つ設定できます。

※1番目の「グローバルナビゲーション」は右上の三重線の「スマホスライドメニュー」の中に出ます。

何を配置するかは自由ですが、必ずスマホビューで確認して使い勝手のいいものにしましょう。

【公式】ピックアップコンテンツの作り方

16.ウィジェット

JINカスタマイズ

ウィジェットも自由にカスタマイズしてください。

正解はありません。

例えば自分が使いやすいと思っているブロガーさんのブログと同じ要素を入れるといいかなと思います。

クロネのブログ講座は次のとおりです。

  1. サイドバー【PC】:検索、カテゴリー、カスタムHTML(他サイトの紹介)
  2. サイドバー追尾【PC】:TOC+目次、ナビゲーションメニュー、カテゴリー
  3. フッター左・中央:なし
  4. フッター右:テキスト(プライバシーポリシー)

なお、「サイドバー追尾【PC】」のところにGoogleアドセンスの広告を入れないように注意しましょう。

追尾広告はごく一部のサイトにだけ許されたものです。それ以外はポリシー違反になります。

【参考】AdSenseを追尾型広告として配置するのはOK?サポートチームに聞いてみた

17.追加CSS

CSSはよくわからないので基本的にやってません。

1つだけ、「目次の番号ふり」をなくすためのCSSを入れています。

目次

私は自分で「1.」など見出しに入れて、しめは「最後に」と番号ふりがないようにしているためです(趣味です)。

詳細は「ブログ記事の目次は必要?不要?ブログ初心者は自分のために設定しよう!」をお読みください。

【公式】目次の作り方

公式サイトではSNSボタンのカスタマイズや他のブロガーさんによるカスタマイズが紹介されていて、「追加CSS」にコピペで簡単にできます。

【公式】SNSボタンのカスタマイズ

【公式】WordPressテーマ「JIN」のカスタマイズ方法

※17までで「カスタマイズ」の部分を使った設定は終わりです。

おまけ1:記事下の「CTAの設定」

CTA

記事下にまとめてCTA(コール・トゥ・アクション)を設定したい場合には、「ダッシュボード」>「CTA」で設定ができます。

詳細は次の記事をお読みください。

【公式】CTAを設定する方法

ブログをスタートしたばかりのときは気にしなくていいと思いますが、アフィリエイト記事に誘導するような場合に使うこともできます。

そのときはカテゴリーごとにCTAを設定した方が良いかもしれません。

【公式】カテゴリー別にCTAを設置する

他のブロガーさんがどんなことをしているか参考にするといいかなあと思います。

⇒ ブログを読み終わった人に行動してもらうための「記事下CTA」

おまけ2:Googleアナリティクス・サーチコンソールの設定

Googleアナリティクスもサーチコンソールも設定は簡単です。

「ダッシュボード」>「HTMLタグ管理」>「head内」にコードを貼るだけです。

詳細は下記の記事をお読みください。

【公式】Google Analyticsを利用する方法

【公式】サーチコンソールの設置方法

なお、他のテーマから移行する方は「プラグイン」でGoogleアナリティクスのコードを入れたままこの設定もして2重でカウントする例をたまに見かけます。

いずれか一方にしましょう。

おまけ3:Googleアドセンスの配置

このブログではGoogleアドセンスは導入していませんが、配置については下記の記事を参考にしてみてください。

⇒ もう悩ませない!ブログ初心者のためのアドセンス広告の位置・サイズ・貼り方

そもそも申請していない方はひつじさんの下記の記事をご紹介します。

【参考】Google Adsenseの攻略ガイド!アドセンス申請方法と審査基準のまとめ

最後に:記事を書くのを忘れずに

テーマをカスタマイズするのは楽しいですが、デザインにこだわりすぎて記事が全然ないなんてことはよくあります。

記事を書くことも忘れないでね。

▼このブログと同じWPテーマ▼
JIN
▼ブログで本気で稼ぎたい方へ▼
ブラックSEO

POSTED COMMENT

  1. みさと より:

    いつも楽しく拝見させていただいてます!ありがとうございます‼️
    アフィリエイトの広告がど真のん中に表示されて消すことが出来ないので、
    記事もスマホの下の方でしか読めないのですが
    広告の表示を消すことはできますか?
    下にスクロールするとずっと表示されます

COMMENT

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