WordPress

WordPress - JINテーマのカスタマイズ

WordPressの人気テーマ「JIN」をカスタマイズした内容のメモです。

本家サイトのマニュアルに丁寧に記載されている。実際にカスタマイズした内容を備忘録として記しておく。

基本設定

JINをインストールする方法

省略

サイトタイトル・ディスクリプションの設定

メタタグの設定を「カスタマイズ」からできるとのことだが、プラグイン「All in One SEO Pack」で設定しているので省略。

SEOチェッキで内容を確認。

デザインの「着せ替え」設定

使わないので省略

デザインの「切り替え」設定

マニュアルだと、スタイル〇〇となっていて、どんな切り替えになるかわからないのでメモ。

  • ヘッダー
    • スタイル１
    • ロゴ と メニューが横並び
    • スタイル２（ヘッダー画像あり）
    • ロゴ と メニューが横並び > ヘッダー画像
    • スタイル３ ※ 採用
    • ロゴ と メニューが縦並び
    • スタイル４（ヘッダー画像あり）
    • ロゴ > メニュー > ヘッダー画像
    • スタイル５（ヘッダー画像あり）
    • ロゴ > ヘッダー画像 > メニュー
    • スタイル６
    • メニュー > ロゴ
    • スタイル７（ヘッダー画像あり）
    • メニュー > ロゴ > ヘッダー画像
    • スタイル８（ヘッダー画像あり）
    • メニュー > ヘッダー画像
    • スタイル９（ヘッダー画像あり）
    • ヘッダー画像 > メニュー
  • サイドバー
    • スタイル１
    • 下線
    • スタイル２ ※ 採用
    • 背景塗りつぶし
    • スタイル３
    • 斜め下線
    • スタイル４
    • 背景塗りつぶし + 白枠線
    • スタイル５
    • 二重下線
    • スタイル６
    • 背景塗りつぶしBox
  • 記事エリア
    • スタイル１
    • 枠あり
    • スタイル２
    • 枠なし
  • フッター
    • ４カラム
    • ３カラム

「グローバルメニュー」の設定

メニューを追加して、メニュー画面の下の方に「メニューの位置」のチェックボックスがあるので、「グローバルメニュー」にチェックを付けて保存する

「ピックアップ」の設定

メニューを追加して、メニュー画面の下の方に「メニューの位置」のチェックボックスがあるので、「トップページのピックアップコンテンツ」にチェックを付けて保存する

「コンテンツマガジン」の設定

JINテーマのなかでもお気に入りの機能が「コンテンツマガジン」
「コンテンツマガジン」を設定すると、トップページがおしゃれになる
「カスタマイズ」>「トップページ設定」にて、カテゴリーIDをカンマ区切りで指定する

「カラー」の設定

「カスタマイズ」>「カラー設定」にて、パーツごとに16進数のカラーコードを記入していく

マテリアルカラーを探すならここ

「関連記事」の設定

「カスタマイズ」>「記事のデザイン設定」にて設定

  • スライドスタイル
  • ベーシックスタイル
  • マガジンスタイル（２カラム）
  • マガジンスタイル（３カラム）

「インフォメーションバー」の設定

「インフォメーションバー」は、スマホの場合にメニューしたに出てくるお知らせ

「カスタマイズ」>「ヘッダー設定」にて設定

「スマホスライドメニュー」の設定

メニューを追加して、メニュー画面の下の方に「メニューの位置」のチェックボックスがあるので、「スマホスライドメニュー」にチェックを付けて保存する

「スマホフッターメニュー」の設定

メニューを追加して、メニュー画面の下の方に「メニューの位置」のチェックボックスがあるので、「スマホフッターメニュー」にチェックを付けて保存する

アイコンはFontawesomeから取得する

「OGP（SNS関連）」を設定する

登録してあるSNSアカウントの情報を設定していく

ヘッダーの設定

ヘッダーデザインの「切り替え」

基本設定の デザインの「切り替え」設定 と重複

「サイトタイトル」の設定

基本設定の サイトタイトル・ディスクリプションの設定 と重複

「グローバルメニュー」の設定

「カスタマイズ」＞「グローバルメニュー設定」にて、デザインと文字の大きさを切り替えることができる

「ヘッダー画像」の設定

省略

「ロゴ画像」の設定

省略

「サイトタイトル」「ロゴ画像」の大きさ調整

省略

「インフォメーションバー」の設定

基本設定の 「インフォメーションバー」の設定 と重複

「スマホスライドメニュー」の設定

基本設定の 「スマホスライドメニュー」の設定 と重複

「ファビコン」の設定

「カスタマイズ」>「サイト基本設定」にて設定
画像は512 × 512ピクセル以上の正方形を用意する必要あり

サイドバー（ウィジェット）の設定

サイドバーデザインの「切り替え」

「プロフィール」の設定

「おすすめ記事」の設定

「サイドメニュー」の作り方

「ランキング」の作り方

フッターの設定

フッターの作り方（４カラム編）

フッターの作り方（３カラム編）

スマホフッターメニューの設定

記事のデザイン設定

「見出し」のデザインを変更する

「ボタン」のデザインを変更する

「マーカー」の色・太さを変更する

「ボックス」の色・タイトルを変更する

「目次」を作る

「フォント」を変更する

「カテゴリーの色」を設定する

「ライタープロフィール」の設定

「カエレバヨメレバデザイン」の設定

エディターの使い方

「吹き出し（会話）」の作り方

「見出し」の作り方

「マーカー」の使い方

「ボックス」の作り方

「CVボタン」の作り方

「表」の作り方

「ブログカード」の作り方

「ランキング」の作り方

「ショートコード」の使い方

収益化機能の設定

「LP」を作成する

「CTA」を設置する

「広告管理」の設定をする

「インフィード広告」を設定する

「Google Adsense」の申請方法

その他の応用設定

JINのおすすめプラグイン

「お問い合わせフォーム」の設置

「Googleアナリティクス」の設置

「サーチコンソール」の設置

その他の細かな設定（一問一答）

トップページに記事を固定したい

トップページを1カラムにしたい

記事を1カラムにしたい

記事一覧のデザインを変更したい

コメント欄を表示したい

関連記事を非表示にしたい

SNSボタンのスタイルを切り替えたい

SNSボタンを非表示にしたい

カテゴリーのアイキャッチを設定したい

記事のアイキャッチ画像を非表示にしたい

記事のアイキャッチの最適サイズを知りたい

その他

AmaozonJSのレイアウト崩れ対策

子テーマのsytle.cssに以下を追加

.amazonjs_item .amazonjs_info ul:not([class]) li:before, .amazonjs_item .amazonjs_info table ul:not([class]) li:before {
  content:none;
}
.amazonjs_item .amazonjs_info h4::before {
    filter: opacity(0.0);
}

FontAwesomeを動かす

HTMLタグ設定 > head内 に以下のコードをペタッと

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all" />

-WordPress