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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

【公式】よくある質問

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

【公式】JIN Forum

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

▼このブログのWPテーマ

１．WordPressカスタマイズの基本はスマホ

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

７～８割の人はスマホで見ています。

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

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

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

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

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

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

２．サイト基本設定

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

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

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

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

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

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

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

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

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

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

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

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

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

３．サイトデザイン設定

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

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

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

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

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

４．カラー設定

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 (イロミル) – 画像からカラーコード抽出便利サービス」を使うとカラーコードが抽出できて便利です。

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

５．ヘッダー設定

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

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

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

３・４・７番目はロゴに合わせて調整しています。

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

▼サイズ：1200 × 250

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

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

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

６．ヘッダー画像設定

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

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

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

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

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

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

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

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

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

７．フッター設定

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

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

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

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

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

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

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

８．トップページ設定

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

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

ここも自由です。

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

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

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

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

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

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

９．記事のデザイン設定

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

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

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

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

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

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

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

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

10．見出しデザイン設定

1. 大見出し（H2）デザイン：スタイル４
2. 小見出し（H3）デザイン：スタイル７
3. 小見出し（H4）デザイン：スタイル１
4. オリジナルデザインのCSS記述：特に設定なし

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

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

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

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

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

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

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

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

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

12．ボタンデザイン設定

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

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

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

13．SNS設定（OGP）

1. SNSボタンのデザイン：スタイル１
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/

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

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

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

出典：OGPを設定しよう！SNSでシェアされやすい設定方法とは？

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

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

【公式】OGP設定（SNSに関する設定）について

14．その他の設定

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

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

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

15．メニュー（５か所）

メニューバーです。

５種類あります。

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

▼パソコンの場合

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

▼スマホの場合

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

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

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

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

16．ウィジェット

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

正解はありません。

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

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

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

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

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

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

17．追加CSS

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

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

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

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

【公式】目次の作り方

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

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

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

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

おまけ１：記事下の「CTAの設定」

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

おまけ３：Googleアドセンスの配置

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

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

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

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

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

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

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

▼このブログのWPテーマ

クロネ@趣味ブロガー

TwitterContact

ブログ歴21年。法人第８期。ブログのおかげで会社を辞めて育児セミリタイア中。人生を豊かにする本の紹介、個人事業＆マイクロ法人の情報発信。妻に片想い中。