サイトデザイン設定では、サイトの細やかな見た目を整えることが出来ます。
ブログのデザインを変更したいとき、CSSの専門的な知識がないと思い通りのデザインにすることはまあ大変です。
だけどJINにはサイトを形作るたくさんのデザインが用意されていて、設定一つで簡単に切り替えることができます。
トップページ、サイドバー、フッターなど、それぞれを別に設定できるので、組み合わせはまさに千差万別！
※なお、トップページは「トップ画面設定」の設定も含めてレイアウトが異なってきます。
JINの公式HPにあるdemoページは、それをあらかじめ組み合わせてくれている設定を、そのままダウンロードできるというわけです。
demoのおしゃれスタイルをそのまま使ってもよし、自分でオリジナル設定を変えても良し。サイトがよりよく見える設定を見つけてみましょう！
JIN公式：JINのデモ一覧
Contents
背景画像
ここでサイトの背景を変更することができます。
当ブログでは設定なしですが、ためしてみるとこんな感じです。
ヘッダー画像や記事ブロックの背景に、設定した画像が表示されています。
設定した画像は正方形なので、背景全体を埋めるのにパターンのように繰り返し表示になるようです。
ヘッダーデザインの選択
ヘッダーとは？
ブログでいうヘッダーとは、ブログ名やメニューバー、トップページなどでブログのメイン画像など、常時表示させたい情報が表示されている部分です。
当サイトでいうとこの部分↓
これが、スタイルの変更でどのように変わっていくか、実際に設定してみました。
表示見本
スタイル1
・ヘッダー画像なし（設定していても非表示になる）
・ブログ名表示とメニューを帯状の1つのバーに表示 左端：ブログ名 右端：グローバルメニュー
スタイル2
・ヘッダー画像あり
・ブログ名表示とメニューを帯状の1つのバーに表示 左端：ブログ名 右端：グローバルメニュー
スタイル3
・ヘッダー画像なし（設定していても非表示）
・ブログ名とメニューそれぞれ別の帯状のバーに表示 上段中央：ブログ名 下段中央：グローバルメニュー
スタイル4
・ヘッダー画像あり
・ブログ名とメニューをそれぞれ別の帯状バーに表示 上段中央：ブログ名 下段中央：グローバルメニュー
スタイル5
・ヘッダー画像あり
・ブログ名とメニューをそれぞれ別の帯状バーに表示
ヘッダー画像上中央：ブログ名 ヘッダー画像下中央：グローバルメニュー
スタイル6
・ヘッダー画像なし（設定していも非表示になる）
・ブログ名とメニューをそれぞれ別の帯状バーに表示 上段左端：グローバルメニュー 下段中央：ブログ名
スタイル7
・ヘッダー画像あり
・ブログ名とメニューをそれぞれ帯状バーに表示 上段左端：グローバルメニュー 下段中央：ブログ名
スタイル8
・ヘッダー画像あり
・ブログ名表示なしでメニューバーのみ帯状で表示 ヘッダー画像上 左端：グローバルメニュー
スタイル9
・ヘッダー画像あり
・ブログ名表示なしでメニューバーのみ帯状で表示 ヘッダー画像下 左端：メニュー
スタイル10
・ヘッダー画像あり
・ブログ名とメニューを1つのボックスバーに表示 左端：ブログ名 右端：グローバルメニュー
※メニューバーのデザインがスタイル1～9と異なる（左右が短く独立している）
スタイル11
・ヘッダー画像なし（設定していても非表示になる）
・ブログ名とメニューを1つのボックスバーに表示 左端：ブログ名 右端：グローバルメニュー
・メニューバーのデザインが1～9と異なる（左右が短く独立している）
サイドバーデザインの選択
サイドバーとは
記事が表示されるメインブロック（カラム）とは別に、画面の左、もしくは右に、プロフィールやカテゴリーを表示できるブロックのこと。
表示見本
実際にスタイル1～6を設定してみました。
デザインや外枠の有無などで印象も大きく変わってきますね。
記事エリアのデザイン選択
記事エリアのデザインは2種類から選ぶことができます。
表示見本
当サイトだとちょっとわかりにくいのですが、枠の中で白背景に表示されるスタイル1と背景色で枠なしに表示されるのがスタイル2になります。
スタイル2のほうが、1行の文字数が多く表示されます。
フッターデザインの選択
フッターとは
ブログのフッターとは、サイトの一番下にある、copyrightや問い合わせ先など、常時表示させたい情報などを載せる箇所です。
表示見本
2種類あって、全面帯状に表示されるスタイル1と、ボックスのように表示されるスタイル2があります。
フッターのカラム選択
カラムとは、ブログ要素の表示を分ける列のことです。
JINでは3カラムと4カラムが選択できるようになっていて、選択後はウィジェットでそれぞれに表示したいコンテンツを設定します。
1つ上の項目にある当サイトのフッターデザイン見本は3カラムを選択していて、左は未設定、中央は「アーカイブ」、右端は「サイトについての固定ページ」の設定となっています。
4カラムにした場合の例は下の図のようになります。
左に「タグ」、中央左に「アーカイブ」、中央右に「検索」、右に「サイトについての固定ページ」を設定しています。
どのカラムにどんな要素を設定するのかはサイトにより異なりますが、ヘッダーやサイドバーに載せないけれど、ユーザーに見てほしいメニューやページへ効果的に誘導できる設定を目指したいです。
グローバルメニューのデザイン選択
グローバルメニューとは？
主要ページなど、固定で紹介したいサイト内やリンクサイトへショートカットできるリンク集です。ユーザーはこのメニューでサイトにどんな記事があるのかなどを判断するため、効果的に設定できるとサイト周遊率UPに繋がると言われています。
JINにはトップページの設定で可能なオリジナルの機能のピックアップコンテンツやコンテンツマガジンもあるため、機能を上手に使い分けたいです。
ここでは表示のデザインだけの設定になるので、グローバルメニュー自体の設定方法はJIN公式のマニュアルを確認してください。
JIN公式：グローバルメニューの設定方法
表示見本
グローバルメニューのデザインは、ヘッダーデザインのスタイルによって、表示が変更にならないものもあるようです。
本サイトで使用しているスタイル10では変更にならなかったため、スタイル5でためしてみました。
パターン1ではメニューの文字自体がアイコンになった形式。パターン2はメニューが仕切られてボタン状になった形式です。
【PC用】グローバルメニューの文字サイズ
グローバルメニューに表示されているメニューの文字を変更できます。
当サイトの『サイトデザイン設定』
ここで設定できる項目は、使用している画像やサイト全体の雰囲気などで、選ぶスタイルは変わってきそうです。
細かな設定になるので、まずはJIN公式のdemoを設定して、最初のサイト作りが落ち着いてから、色々試してみると良いと思います。
- 背景画像：設定なし
- ヘッダーデザインの選択：スタイル10（ヘッダー画像あり）
- サイドバーデザインの選択：スタイル3
- 記事エリアのデザイン選択：スタイル1
- フッターデザインの選択：スタイル1
- フッターのカラム選択：3カラム
- グローバルメニューのデザイン選択：パターン1
- 【PC用】ブローバルメニューの文字サイズ：設定なし
