CSSとかは全くわからないけど、JINで楽しくカスタマイズできている有川 です。
あなたはJINのカスタマイズについてこんなことで困っていませんか?
この記事ではJINでの・・・
- ヘッダーサイズ・ロゴサイズ
- ヘッダーのカスタマイズ方法
をお伝えします。
ちなみに、全体のカスタマイズは↓こちらの記事↓でお伝えしています。
![JINカスタマイズ](https://arikawa0812.com/wp-content/uploads/2019/04/canva-320x180.png)
また、JINの公式サイトのマニュアルは↓こちら↓。
0.ヘッダーサイズやカスタマイズについてまとめ
まずは簡単にヘッダーやロゴについてまとめておきます。
ヘッダーサイズ |
|
ヘッダーカスタマイズ法 | 外観 | カスタマイズ
ヘッダーとロゴの違い |
|
ロゴサイズ |
|
簡単にまとめたところで、詳しく見ていきましょう!
ヘッダーに関する設定は、
【外観ーカスタマイズ】から設定できます。
![カスタマイズ](https://arikawa0812.com/wp-content/uploads/2019/04/cus.png)
- 「ヘッダー設定」
- 「ヘッダー画像設定」
の2箇所が関係するので、そこの設定を一つずつ見ていきます。
1.ヘッダー設定
ヘッダー設定では9つの項目を設定できます。
- ヘッダー全体の表示選択
- サイトロゴ
- ロゴとフレーズの文字サイズ調整
- ロゴとフレーズの上下の余白
- 検索ボックスの表示選択
- SNSアイコンの表示選択
- 【スマホ用】ヘッダーロゴとヘッダーフレーズの文字サイズ調整
- インフォバーに表示する文字
- インフォバーのリンク先URL
1-1.ヘッダー全体の表示選択
ヘッダーそのものを表示するかどうかの選択です。
ヘッダー画像の上の部分が該当します。
![ヘッダー設定1](https://arikawa0812.com/wp-content/uploads/2019/06/header1-700x248.png)
![ヘッダー設定2](https://arikawa0812.com/wp-content/uploads/2019/06/header2-700x195.png)
1-2.サイトロゴ
![サイトロゴ](https://arikawa0812.com/wp-content/uploads/2019/06/header3.png)
サイトロゴを設定するときは、ここで設定します。
1-3.ロゴとフレーズの文字サイズ調整
ロゴサイズ調整がここで行えるので、
ロゴ画像サイズはあまり気にしなくてOK。
![ロゴサイズ](https://arikawa0812.com/wp-content/uploads/2019/06/header4-700x447.png)
「フレーズ文字」がどこなのかは分かりませんでした・・・。
PCのみで反映されます。
スマホでのサイズ設定はもう少しあとで設定項目が出てきます。
1-4.ロゴとフレーズの上下の余白
こちらはロゴ画像周りの余白設定。
![ロゴ余白](https://arikawa0812.com/wp-content/uploads/2019/06/header5-700x521.png)
好みの数字で設定しておきましょう。
1-5.検索ボックスの表示選択
ヘッダーに出る検索ボックスの表示についてです。
![検索](https://arikawa0812.com/wp-content/uploads/2019/06/header6-700x304.png)
スマホ画面では、検索ボックスは左上に表示されます。
![スマホ検索](https://arikawa0812.com/wp-content/uploads/2019/06/header8-2-700x1197.jpg)
1-6.SNSアイコンの表示選択
こちらの上と同じく、ヘッダーに出る検索ボックスの表示についてです。
![SNSボタン](https://arikawa0812.com/wp-content/uploads/2019/06/header7-700x394.png)
スマホ画面では、
ハンバーガーメニュー(右側の「三」をクリックすると展開されるメニュー)の中にあります。
![スマホSNS](https://arikawa0812.com/wp-content/uploads/2019/06/header8-1-700x1210.jpg)
1-7.【スマホ用】ヘッダーロゴとヘッダーフレーズの文字サイズ調整
上の3,4で設定したように、
スマホ画面でのロゴサイズ設定です。
実機で確認しながら調整していきましょう。
1-8.インフォバーに表示する文字
インフォバーは、ここです。
![インフォバー](https://arikawa0812.com/wp-content/uploads/2019/06/header9-700x633.png)
インフォバーの文字は長くしすぎると、
スマホ画面では2行になってしまうので程々に。
1-9.インフォバーのリンク先URL
インフォバーの文字をクリックするとどのページに飛ぶかを設定します。
主力商品を紹介しているページなどに飛ばしましょう。
2.ヘッダー画像設定
では、続いてヘッダーの画像設定です。
見た目にも変化がわかりやすいので、設定しやすいと思います。
設定項目は15個です。
- ヘッダー画像・サイズ
- ヘッダー画像のリンク先URL
- ヘッダー画像のキャッチフレーズ
- キャッチフレーズのカラー
- キャッチフレーズの文字加工
- ヘッダー画像のサブテキスト
- サブテキストのカラー
- サブテキストの文字加工
- ヘッダー画像のボタンカラー
- ヘッダー画像のボタンのリンク先
- ヘッダー画像のボタンテキスト
- ヘッダー画像のテキスト位置調整
- 【スマホ用】ヘッダー画像のテキスト位置調整
- ヘッダー画像の下層ページ表示選択
- 【スマホ用】ヘッダー画像
2-1.ヘッダー画像・サイズ
ヘッダー画像を設定します。
サイズは「2400×500」がオススメ。
![ヘッダー画像](https://arikawa0812.com/wp-content/uploads/2019/06/header11.png)
2-2.ヘッダー画像のリンク先URL
ヘッダー画像をクリックすると飛ぶページのURLを設定します。
ホーム画面に飛ぶURLを設定してる人が多いです。
2-3.ヘッダー画像のキャッチフレーズ
ヘッダー画像の上にかぶせる文字です。
![キャッチフレーズ](https://arikawa0812.com/wp-content/uploads/2019/06/header12-700x159.png)
サイトのキャッチフレーズなどを入れると良し(๑•̀ㅂ•́)و✧
サンプルとしては、こんな感じ。
2-4.キャッチフレーズのカラー
上で設定したキャッチフレーズの色を変えます。
![キャッチフレーズカラー](https://arikawa0812.com/wp-content/uploads/2019/06/header14-700x245.png)
ヘッダー画像に合わせた色にしましょう。
2-5.キャッチフレーズの文字加工
加工の種類は3つです。
- 加工なし
- 白フチ
- 影
![キャッチフレーズ文字加工](https://arikawa0812.com/wp-content/uploads/2019/06/header15-700x410.png)
ヘッダー画像に合わせて加工します。
2-6.ヘッダー画像のサブテキスト
![サブテキスト](https://arikawa0812.com/wp-content/uploads/2019/06/header16.png)
キャッチフレーズの下に表示されるサブテキストです。
テキストのフォントサイズはhtmlタグで設定可能です。
2-7.サブテキストのカラー
キャッチフレーズと同じく、色を変えることができます。
2-8.サブテキストの文字加工
こちらもキャッチフレーズと同じく3種の加工ができます。
2-9.ヘッダー画像のボタンカラー
![ボタンカラー](https://arikawa0812.com/wp-content/uploads/2019/06/header17-700x138.png)
ヘッダー画像とかぶらないようにカラー設定をしましょう。
2-10.ヘッダー画像のボタンのリンク先
ボタンを押すと飛べるページのURLを設定します。
2-11.ヘッダー画像のボタンテキスト
![ボタンテキスト](https://arikawa0812.com/wp-content/uploads/2019/06/header18-700x139.png)
ボタンのテキストを設定します。
<span style=”color: #ff6600;”>ボタンテキスト</span>
テキストの色は、
上のようなhtmlタグで指定できます。
「#ff6600」の部分を好きな色に変えましょう。
2-12.ヘッダー画像のテキスト位置調整
キャッチフレーズなどのヘッダー画像上のテキストの位置を決めます。
これも好みで設定しましょう。
一応、サンプルに数字を変えたバージョンの画像をおいておきます。
![ヘッダーテキスト位置](https://arikawa0812.com/wp-content/uploads/2019/06/header19-700x283.png)
2-13.【スマホ用】ヘッダー画像のテキスト位置調整
こちらも上と同じく、
ヘッダー画像のテキスト位置を調整します。
PCとスマホ、
別々に設定できるのはありがたいですね。
2-14.ヘッダー画像の下層ページ表示選択
ヘッダー画像を記事の上にも表示するか否かの設定です。
![ヘッダー画像の下層設定](https://arikawa0812.com/wp-content/uploads/2019/06/header20-700x520.png)
PC画面上ではどちらでもいいと思いますが
スマホ画面だと印象が変わるので、こちらも好みで設定を。
ヘッダーではなく、
ロゴを設定しているなら「表示させる」ほうがいいかも。
2-15.【スマホ用】ヘッダー画像
スマホ用のヘッダー画像を設定します。
こちらは幅1500px以上なので、おすすめサイズは
1500×250
ぐらい。
JINヘッダー画像設定(まとめ)
以上!
JINでのヘッダー設定
でした!
改めて、簡単にまとめておきます。
ヘッダーサイズ |
|
ヘッダーカスタマイズ法 | 外観ーカスタマイズ |
ヘッダーとロゴの違い |
|
ロゴサイズ |
|
好みサイズのところは、
いろいろいじって実機やプレビュー画面で確認していきましょう。
では、ここまでお読みくださりありがとうございました!
おすすめのJIN記事は↓こちら!
![JINカスタマイズ](https://arikawa0812.com/wp-content/uploads/2019/04/canva-320x180.png)
![JINヘッダー設定](https://arikawa0812.com/wp-content/uploads/2019/04/jin-headerset-320x180.png)
![パンくずリスト設定アイキャッチ](https://arikawa0812.com/wp-content/uploads/2019/06/jin-pankuzu-320x180.png)
![メニューの作り方アイキャッチ](https://arikawa0812.com/wp-content/uploads/2019/06/jin-menu-320x180.png)
↓私がブログ開始1年目、収益ゼロだったときの話(*’ω’*)↓
![CTAマンガ](https://arikawa0812.com/wp-content/uploads/2019/04/ctamanga.jpg)