こんにちは、リン☆だあく(@rindark)です〜！
さて、前回の記事でプラグインのインストールまで終わりました。
次は、ブログのデザインを決めて行く作業を解説していきます。
このブログでは、JINでのデザインのカスタマイズを解説していきますので、JINを購入された方は、参考になさってください。
JINテーマカスタマイズをしていこう
このサイトでは、JINテーマをサンプルにテーマのカスタマイズの仕方を解説していきます。
まずは、ダッシュボードの「外観」から、「カスタマイズ」を選びましょう。
するとこの様な設定画面になります。
この画面で、JINのカスタマイズをしていく事が出来ます。
左の項目で設定、右の画面は設定が反映されたプレビューとなります。
JINカスタマイズ：サイト基本設定
ここでは、サイトの基本設定ができます。
WordPressの基本設定でしてきたのと同じ効果になります。
サイトのタイトルや、SEOで必要なタイトルなどを記入していく事ができます。
ディスクリプションは、サイトの説明を簡単に書いて検索サイトで表示する事ができます。
フォント選択
ブログに選べるフォントが３種類選べます。
アニメーション機能
アニメーション機能を有効にすると、動的なブログになります。
サイトアイコン
サイトアイコンは、ブログのアイコンとして表示されます。
記事の投稿日時に表示
投稿日時を次の三つから選べます。
- 公開日のみ
- 更新日のみ
- 更新日と公開日
JINカスタマイズ：サイトデザイン設定
ここでは、サイトの基本的なでざいんができます。
ヘッダーデザインの選択
ヘッダーのデザインを選択できます。
スタイルが11まであるので、お好みのデザインを選んでみてください。
サイドバーデザインの選択
サイドバーのデザインを選択できます。
ここは、スタイルが6つあります。
記事エリアのデザインの選択
記事エリアのデザインを選択できます。スタイルは２つあります。
フッターデザインの選択
フッターのデザインを選択できます。
スタイルは２つあります。
フッターのカラム選択
フッターのカラムを４つにするか、３つにするか選べます。
【PC用】グローバルメニューの文字サイズ
メニューの文字サイズをカスタマイズできます。
JINカスタマイズ：カラー設定
JINテーマの様々な色の設定が出来ます。
ここはお好みなので、お好き色に設定してみてください。
| 色の変更可能箇所 |
|---|
| テーマカラー |
| アクセントカラー |
| 背景色 |
| ヘッダーの背景色 |
| タイトルの文字色 |
| メニューの文字色 |
| メニューの背景色 |
| SNSボタンの色 |
| フッターの文字色 |
| フッターの背景色 |
| リンクの色 |
| リンクにマウスを合わせた時の色 |
| サイト内の文字色 |
| スマホ専用メニューの文字色 |
| スマホ専用メニューの背景色 |
| インフォメーションバーの背景色 |
| 記事中のアイコンの色 |
JINカスタマイズ：ヘッダー設定
ブログのヘッダーまわりの設定が出来ます。
ヘッダーはブログの上部の部分です。
ヘッダー全体の表示選択
ヘッダーを表示させるかどうかを選択することができます。
サイトロゴ
サイトのオリジナルのロゴ画像を貼ることができます。
サイトロゴのaltタグ設定
サイトロゴに名前を名前をつける設定です。（特に表示はされません。）
ロゴとフレーズの文字サイズ調整
ロゴのサイズを調節することができます。
ロゴとフレーズの上下の余白
ロゴなどの上下の余白を設定できます。
検索ボックスの表示選択
サイト内の検索をするボックスを表示させるかどうかを設定できます。
SNSアイコンの表示選択
SNSの設定をしている時には、ヘッダーにSNSのアイコンを表示させるかどうかを選択できます。
【スマホ用】ヘッダーロゴとヘッダーフレーズの文字サイズ調整
スマホ用で、ロゴのサイズを調節することができます。
インフォバーに表示する文字
ヘッダーの下にインフォバーというのを表示でき、そこに表示する文字を設定できます。
インフォバーのリンク先URL
インフォバーをクリックしたときにどこにリンクするか設定できます。
JINカスタマイズ：ヘッダー画像設定
ヘッダーには画像を入れる事ができます。
その画像周りの設定ができます。
(サイトデザイン設定でヘッダー画像ありを選択しないと効果がありません。）
ヘッダー画像
ライブラリーやアップロードで好きな画像を設定できます。
ヘッダー画像のリンク先URL
ヘッダー画像をURL指定で設定することができます。
ヘッダー画像のキャッチフレーズ
ヘッダー画像の上にキャッチフレーズの文字を表示できます。
キャチフレーズのカラー
キャッチフレーズの色を好きな色にカスタマイズできます。
キャッチフレーズの文字加工
キャッチフレーズの文字にお好みの加工を加える事ができます。
- 加工なし
- 白フチ
- 影
ヘッダー画像のサブテキスト
ヘッダー画像にサブテキストを入れる事ができます。（キャッチフレーズの補足などに利用できます。）
サブテキストのカラー
サブテキストの色を好きな色にカスタマイズできます。
サブテキストの文字加工
サブテキストの文字にお好みの加工を加える事ができます。
- 加工なし
- 白フチ
- 影
ヘッダー画像のボタンカラー
ヘッダー画像に表示させるボタンのカラーを選べます。
ヘッダー画像のボタンのリンク先
ヘッダー画像のボタンを押したときのリンク先を設定できます。
ヘッダー画像のボタンテキスト
ヘッダー画像のボタンに表示させる文字を設定できます。
ヘッダー画像のテキスト位置調整
ヘッダー画像上の文字の位置を調節することができます。
【スマホ用】ヘッダー画像のテキスト位置調整
スマホ用でヘッダー画像上の文字の位置を調節することができます。
ヘッダー画像の下層ページの表示選択
ヘッダー画像をトップページ以下に表示させるか設定できます。
【スマホ用】ヘッダー画像
通常とは別の画像をスマホ用に設定できます。
JINカスタマイズ：フッター設定
ブログの一番したの部分であるフッターの設定をする事ができます。
フッターの表示項目の選択
フッターに何を表示するのかが選べます。
フッターの項目【左】のテキストを変更
フッターの左側に表示するテキストを設定できます。
フッターの項目【左】のリンクを変更
フッターの左側のテキストのリンク先を変更します。
フッターの項目【右】のテキストを変更
フッターの右側に表示するテキストを設定できます。
フッターの項目【右】のリンクを変更
フッターの右側のテキストのリンク先を変更します。
スマホサイドメニューのボタンテキスト
スマホで表示したときのサイドメニューのボタンのテキストを設定できます。
JINカスタマイズ：トップページ設定
トップページのデザイン、表示の各種の設定をする事ができます。
ピックアップコンテンツのタイプ選択
上部に表示されるピックアップコンテンツの表示の設定ができます。
- メニュータイプ
- メニュータイプ（文字なし）
- 記事タイプ
ピックアップコンテンツの下層ページ表示選択
ピックアップコンテンツをトップページ以下に表示させるかどうかを設定できます。
トップページのレイアウト選択
１カラム表示と２カラム表示を選べます。
トップページの記事一覧デザイン選択
記事一覧のデザインを３スタイルから選べます。
- マガジンスタイル（スマホ２カラム）
- マガジンスタイル（スマホ１カラム）
- ベーシックスタイル
最新記事一覧から除外したいカテゴリーIDに-をつけて入力
カテゴリーIDに-をつける事で、最新記事一覧から除外できます。
トップページの記事一覧に表示させるカテゴリーID
トップページの記事一覧に表示させるカテゴリーを設定できます。
コンテンツマガジンの【最新記事】のテキスト
コンテンツマガジンの最新記事のテキストを好きなように変更できます。
JINカスタマイズ：記事のデザイン設定
記事のデザイン関係の設定をすることができます。
文字サイズ
記事の文字サイズを変更することができます。
５サイズ選べます。
文字サイズ（スマホ）
スマホでの記事の文字サイズを変更することができます。
５サイズ選べます。
マーカー１の色
記事内のマーカー１の色を決める事ができます。
マーカー１の太さ
記事内のマーカー１の太さを３種類から選べます。
マーカー２の色
記事内のマーカー２の色を決める事ができます。
マーカー２の太さ
記事内のマーカー２の太さを３種類から選べます。
CTAの背景色
Call To Actionの略で、JINでは記事下に設定することができます。（収益化に有効）
その背景色を選択できます。
CTA内の文字色
おなじくCTA内の文字の色を選択できます。
関連記事の表示形式
記事下に表示される関連記事の表示形式を選べます。
- スライドスタイル
- ベーシックスタイル
- マガジンスタイル（２カラム）
- マガジンスタイル（３カラム）
関連記事の見出し
関連記事の見出しの文字を自分でカスタマイズできます。
関連記事の表示件数
関連記事の表示件数を自由に選ぶ事ができます。
その他の詳細設定
- 記事に自動で表示されるアイキャッチ画像を非表示できる
- 記事のコメントを表示する
- SNSボタンを表示しない
- ページ上部のみのSNSボタンを表示しない
- 記事下の「前の記事」「次の記事」を非表示にする
- 記事下の関連記事を非表示にする
JINカスタマイズ：見出しデザイン設定
記事見出しのデザインをH2からH4まで設定設定する事ができます。
見出しのスタイルを選ぶ
まずは、お好みのスタイルを選んでください。
見出しごとのアイコンを選ぶ
見出しの頭に表示できるアイコンを選ぶ事ができます。
見出しをオリジナルデザインにする
CSSを記述する事によって見出しをオリジナルデザインに変更する事ができます。
JINカスタマイズ：ボックスデザイン設定
JINには各種いろいろなボックスが用意されています。
ここでは、それらボックスのデザインを設定することができます。
JINカスタマイズ：ボタンデザイン設定
JINに用意されているボタンのデザインを変更することができます。
ボタンのデザインから、色、丸み、横幅、高さなどを変更できます。
JINカスタマイズ：SNS設定（OGP）
各種SNSの設定がここですることができます。
また、OGPといって、SNSなどに貼りつけた場合に、表示されるトップページのOGP画像などを設定する事ができます。
表示できるSNSの種類
- YouTube
- LINE
- お問い合わせページへのリンク
JINカスタマイズ：その他設定
その他、JINには便利な設定ができます。
商品紹介でよく使われるカエレバ、ヨメレバのデザインを変更できたりもします。
設定できる項目
- カエレバヨメレバをJINオリジナルデザインにする
- アプリーチをJINオリジナルデザインにする
- ショートコードの[1]系列を無効化する
- fontwesomeを読み込まない
- パンくずリストの表示
- トップへ戻るボタンの表示
- NO IMAGE画像の設定
JINカスタマイズ：メニュー
ここでは、ナビゲーションバーのメニューの設定ができます。
メニュー
ここで、表示したいページを設定していきます。
固定ページや、特定の記事などをメニューにすることができます。
JINカスタマイズ：ウイジェット
サイドバーやトップページ上部などの順番を入れ替えたり、表示する項目を選択したりすることができます。
サイドバーをうまく使う事で、ユーザビリティが上がります。
JINカスタマイズ：追加CSS
こちらは、初心者のレベルを出た方が、サイトをカスタマイズをしたい場合にCSSをつかって、表示方法を変更していく事ができます。
慣れてきたら、是非チャレンジしてみてください。
JINカスタマイズ：エクスポート／インポート
JINには、デザインの着せ替えをする昨日が備わっています。
JIN公式ページからダウンロードしたファイルをアップロードする事で、一気にデザインを変更できます。
（※プラグインが必要になります。）
まとめ
JINではかなりの項目でカスタマイズができるので、自分のお好みのブログを作る事ができます。
項目によっては、初心者では難しい所もありますが、慣れたら是非チャレンジしてみてください。
では、またね～。