月間8万PVで月間収益0円だった...
ブログデザイン

【WordPressテーマJINカスタマイズ】非公式デモサイト「クロネのブログ講座」の設定方法を徹底解説

JIN

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

同じようにJINを使っているけど、クロネのブログ講座はどういう風に作っているのかな、と気になる方からご要望をいただきましたので解説します。

ちなみに私はあまりカスタマイズしないので、子テーマで何かするとかはしてません。

「外観」>「カスタマイズ」で操作するので難しいことはやってません。

JINカスタマイズ

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

⇒ Word PressテーマをSANGOとJINで迷っている方へ!選ぶときの簡単な判断基準はこれだ!

⇒ ブロガー2,326人にアンケート!Word Pressのおすすめ有料テーマと選び方のポイント【2018年夏】

【公式】JIN利用者さんのレビュー記事まとめ!順次追加していきます。

以下、新しいテーマを導入して有効化した前提で進めていきます。

詳細なマニュアルは公式サイトにあるので、関連するものは各項目のリンク先でご確認ください。

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

【公式】よくある質問

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

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

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

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

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

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

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

スマホビュー

他にもパソコンのままでも確認できる方法があるのでご紹介します。

⇒ 記事を書いたら必ずスマホで見よう!パソコンでもできる確認方法

以下はパソコンで操作した場合で説明しています。

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

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

2.サイト基本設定

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

1、2、4番目は自分のブログ名で検索すると次のような感じで表示されます(2番目のサブタイトル切れてるや。。。)。

JINタイトル

「サブタイトル」と「ディスクリプション」はブログの方向性が決まったら変えてみてください(最初から悩むと日が暮れます)。

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

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

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

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

ブラウザにこんなのが表示されますが、最初からする必要はありません。

JINサイトアイコン

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

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

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

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

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

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

3.サイトデザイン設定

  1. 背景画像:設定なし
  2. ヘッダーデザインの選択:スタイル3
  3. サイドバーデザインの選択:スタイル4
  4. 記事エリアのデザインの選択:スタイル1
  5. フッターデザインの選択:3カラム

この5つは自由です。

正解はないと思いますが、クロネのブログ講座風にしたかったらこのとおりにしましょう。

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

この辺は自由です。

4.カラー設定

  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はキャラクターに使われている色です。

クロネ配色パターン

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

⇒ ブロガーがWord Pressテーマの配色で悩んだときに役立つツールと考え方

5.ヘッダー設定

  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.ヘッダー画像設定

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

クロネのブログ講座では採用していないので、特に設定する必要はありません。

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

採用する場合に1つだけ注意が必要なのは、「ヘッダー画像の下層ページ表示選択」です。

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

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

7.グローバルメニュー設定

  1. グローバルメニューのデザイン選択:パターン2
  2. 【PC用】グローバルメニューの文字サイズ:14px

これは自由です。

8.フッター設定

  1. フッターの表示項目の選択:コピーライトのみ
  2. フッターの項目【左】のテキストを変更する:(自由)※このブログは設定なし
  3. フッターの項目【左】のリンクを変更する:同上
  4. フッターの項目【右】のテキストを変更する:同上
  5. フッターの項目【右】のリンクを変更する:同上

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

JINコピーライト

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

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

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

9.トップページ設定

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

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

JINトップページ設定

ここも自由です。

たまに「なぜ4つ置かないの?」と聞かれますが、まだそんなに置きたい項目がなくて2つにしてます。

そのうち4つになってるかもしれません。

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

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

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

10.記事のデザイン設定

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

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

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

5番目の関連記事は好きな形式にしましょう。アドセンスの関連コンテンツでもいいです。

8番目はよく質問がありますが、記事の冒頭で自動的にアイキャッチ画像が設定されてしまうのを防ぎます。私は「レ」でチェックしてますが、自動的に入れたい場合は「 」にしましょう。

11.見出しデザイン設定

  1. 大見出し(H2)デザイン:スタイル4
  2. 小見出し(H3)デザイン:スタイル7
  3. 小見出し(H4)デザイン:スタイル1

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

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

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

私はほとんど使ってませんが、ブログの色に合わせて変えるなら変えればいいと思います。

下記の2つだけ変えてます。

JINボックススタイル

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

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

13.ボタンデザイン設定

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

私は割とテキストリンクを貼る方なので、あまり使っていません。

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

14.SNS設定(OGP)

SNS設定
  1. SNSボタンのデザイン:スタイル2

あとはtwitterとお問い合わせだけ設定してます。

twitter設定 SNS設定2

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

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

15.メニュー(グローバルナビゲーション他)

メニューバーです。

4種類あります。

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

▼パソコンの場合

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

▼スマホの場合

スマホビュー

4つとも入ります。

何を配置するかは自由ですが、重要なのはスマホビューです。

今のところ、グローバルナビゲーション、スマホ固定フッターメニュー、スマホのスライドメニューの3つは、同じものを入れています。

この辺りは私も試行錯誤中です。

【公式】スマホ固定フッターメニューの設定方法

【公式】【スマホ専用】スライドメニューの設定方法

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

16.ウィジェット

この辺は自由にカスタマイズしてください。

正解はありません。

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

クロネのブログ講座は、

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

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

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

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

17.追加CSS

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

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

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

なお、目次の入れ方は公式サイトを確認してください。

【公式】目次の作り方

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

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

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

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

18.記事下の「CTAの設定」

CTA

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

▼このブログと同じWPテーマ▼
JIN
▼ブログで本気で稼ぎたい方へ▼
ブラックSEO
…数か…戦略か
こちらの記事もおすすめ!

COMMENT

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