JINの導入から設定までのメモ

JINの導入と、JIN関連の設定をメモします。

ブログを新しく立ち上げた時は「新しくブログを立ち上げた時にやることメモ」をあわせてみること。

導入

1. JINの公式サイトでテーマを購入
2. ダウンロードURLとパスワードがメールで送られてくるのでダウンロード
3. WordPressにインストール、有効化

設定変更

デザインの変更

1. 「Customizer Export/Import」プラグインをインストール。
2. JINのデモサイト好きなデザインを選んでダウンロード。
3. 「外観」「カスタマイズ」「エクスポート / インポート」を開く。
4. 「ファイルを選択し」「画像ファイルをダウンロードしてインポートしますか ?」にチェックを付けてファイルをインポート。

サイト基本情報の編集

1. 「外観」「カスタマイズ」「サイト基本設定」を開く。
2. サイトタイトル、サブタイトル、ディスクリプションを修正
3. サイトアイコンを設定
4. 設定したら、SEOチェキで確認
5. 記事の更新日時の設定を「更新日と公開日」にする。

カラーの設定

カラー設定で役に立つサイト

• 配色パターン見本40選
• Color Hunt
• colorsupplyyy

メニューを作成

メニューを作成（編集）し、「グローバルナビゲーション」「スマホのスライドメニュー」に表示させる。

• ホーム
• プロフィール
• お問い合わせ

目次用プラグインの設定

1. プラグイン「Rich Table of Contents」をインストール。
2. ダッシュボードの「RTOC設定」で設定を変更できる。

OPG（Open Graph Protcol）設定

SNSでシェアされた時に情報が正しく表示されるように、ページタイトル、サムネイル、概要をHTMLに記載する設定のこと。

1. 「外観」「カスタマイズ」「OGP設定」を開く。
2. トップページのOPG画像を設定
3. ツイッターアカウントを設定「はずけい@hazukei1」
4. Twitterのカードタイプを「summary_large_image」に変更
5. 「TwitterのURL」にツイッターのプロフィールURLを入力。「https://twitter.com/hazukei1」
6. Facebook、LINEのURL欄はクリアする。

サイドバー作成

1. 「カスタマイズ」「ウィジット」「サイドバー」を選択して、サイドバーの設定を開く。
2. 検索バーを表示
3. カテゴリを表示
4. 人気記事ランキングを表示
5. 自己紹介を表示

※人気記事ランキングを表示させるために「WP-PostViews」プラグインのインストールが必要

フッター設定

1. 「カスタマイズ」「フッター設定」を開く。
2. フッターの表示項目で「コピーライトのみ」を選択

ピックアップの作成

トップページ上部に特定の記事を表示させる機能

・「外観」「メニュー」を開く。

・新しいメニューを作成、メニュー名に「ピックアップ」と入力して、メニューを保存。

・ピックアップに記事を追加する。

・トップページのピックアップコンテンツにチェック。

・「カスタマイズ」「トップページ設定」にある「ピックアップコンテンツのタイプ選択」でデザイン変更可能。

コンテンツマガジンを設定

最新記事と別タブで特定カテゴリのタブを表示する機能

・「カスタマイズ」「トップページ設定」を開く。

・トップページの記事一覧に表示させるカテゴリーIDに、カテゴリIDを登録する。（カンマ区切りで3つまで）

スマホメニュー作成

・「外観」「メニュー」を開く

・新しいメニューを作成、スマホメニューと入力して保存。

・必要に応じて、スマホスライドメニュー、フッターメニューを作成する。

Autoptimizeのインストール（効果を感じなかったので中止）

1. サイト表示速度を上げてくれる「Autoptimize」をインストール。
2. プラグインの設定画面で、「JavaScript コードの最適化」「CSS コードを最適化」「HTML オプション」にチェックして保存。

サムネイル画像をそろえる

テーマを変更した時にすでに記事がある状態で、サムネイルのサイズが異なるとデザインが崩れる。サムネイルを再生性して正しく表示されるようにしてくれる。新しく作成するブログの場合は不要。

1. プラグインのRegenerate Thumbnailsを有効化。
2. 「ツール」「Regenerate Thumbnails」を開きアイキャッチ画像のサムネイルを再生成。

子テーマでカスタマイズしたところ

投稿者の情報を非表示に変更

記事の下に、投稿者の情報が表示される。これは各記事のページで表示できないように変更できるが、一括変更はできない。

スタイルシートで非表示に設定。

スマホで見た際のテーブルのデザイン変更

スマホでテーブルを表示すると、どうしても横幅が足りなくてデザインが崩れてしまう。

Cocoonでは、スマホの場合文字サイズを少し小さく表示するように設定されているらしい。

スタイルシートを修正して、表示幅が小さい場合、文字が少し小さめになるように修正。