JINカスタマイズ

JINでヘッダーをカスタマイズする方法(画像サイズやサイトロゴとの違い)

ヘッダー設定アイキャッチ

次世代バナー

こんちゃす!
CSSとかは全くわからないけど、JINで楽しくカスタマイズできている有川(@arikawa0812)です。

あなたはJINのカスタマイズについてこんなことで困っていませんか?

JINのヘッダーサイズはどうすればいい?

ヘッダーのデザインの変え方がわからない

この記事ではJINでの・・・

  • ヘッダーサイズ・ロゴサイズ
  • ヘッダーのカスタマイズ方法

をお伝えします。

ちなみに、全体のカスタマイズは↓こちらの記事↓でお伝えしています。

JINカスタマイズアイ
JINでブログをカスタマイズ!初心者が一通り設定すべき部分を画像つきで徹底解説JINのカスタマイズを画像つきで紹介!ヘッダー画像やディスクリプションなど1から10まで設定を解説します。...

また、JINの公式サイトのマニュアルは↓こちら↓。

0.ヘッダーサイズやカスタマイズについてまとめ

まずは簡単にヘッダーやロゴについてまとめておきます。

ヘッダーサイズ
  • (公式推奨)幅2400px
  • (オススメ)PC:2400×500 スマホ:1500×250
ヘッダーカスタマイズ法外観ーカスタマイズ
ヘッダーとロゴの違い
  • 表示される位置が違う
  • ロゴは本来社章などを表示させる部分
  • ロゴ画像を設定してヘッダーの役割をしてるブログが多い
ロゴサイズ
  • (公式推奨)無し
  • (オススメ)1200 × 250
  • 表示サイズ変更は可能

簡単にまとめたところで、詳しく見ていきましょう!

ヘッダーに関する設定は、

【外観ーカスタマイズ】から設定できます。

カスタマイズ
  • 「ヘッダー設定」
  • 「ヘッダー画像設定」

の2箇所が関係するので、そこの設定を一つずつ見ていきます。

見やすいようにPC画面で設定していますが、スマホ画面での確認も忘れずに!

1.ヘッダー設定

ヘッダー設定では9つの項目を設定できます。

  1. ヘッダー全体の表示選択
  2. サイトロゴ
  3. ロゴとフレーズの文字サイズ調整
  4. ロゴとフレーズの上下の余白
  5. 検索ボックスの表示選択
  6. SNSアイコンの表示選択
  7. 【スマホ用】ヘッダーロゴとヘッダーフレーズの文字サイズ調整
  8. インフォバーに表示する文字
  9. インフォバーのリンク先URL
わかりやすいように、ヘッダー画像とロゴ画像、どちらも設定して説明します。

1-1.ヘッダー全体の表示選択

ヘッダーそのものを表示するかどうかの選択です。

ヘッダー画像の上の部分が該当します。

表示ver.

ヘッダー設定1

非表示ver.

ヘッダー設定2

1-2.サイトロゴ

サイトロゴ

サイトロゴを設定するときは、ここで設定します。

1-3.ロゴとフレーズの文字サイズ調整

ロゴサイズ調整がここで行えるので、
ロゴ画像サイズはあまり気にしなくてOK。

ロゴサイズ

「フレーズ文字」がどこなのかは分かりませんでした・・・。

PCのみで反映されます。
スマホでのサイズ設定はもう少しあとで設定項目が出てきます。

1-4.ロゴとフレーズの上下の余白

こちらはロゴ画像周りの余白設定。

ロゴ余白

好みの数字で設定しておきましょう。

1-5.検索ボックスの表示選択

ヘッダーに出る検索ボックスの表示についてです。

検索
「表示」にしても表示されない場合は、「サイトデザイン設定ーヘッダーデザインの選択」を変えると表示されるようになります。

スマホ画面では、検索ボックスは左上に表示されます。

スマホ検索

1-6.SNSアイコンの表示選択

こちらの上と同じく、ヘッダーに出る検索ボックスの表示についてです。

SNSボタン
JINの外観設定の「SNS設定」でURLを登録しておくと、表示されます。

スマホ画面では、
ハンバーガーメニュー(右側の「三」をクリックすると展開されるメニュー)の中にあります。

スマホSNS

1-7.【スマホ用】ヘッダーロゴとヘッダーフレーズの文字サイズ調整

上の3,4で設定したように、
スマホ画面でのロゴサイズ設定です。

実機で確認しながら調整していきましょう。

1-8.インフォバーに表示する文字

インフォバーは、ここです。

インフォバー

インフォバーの文字は長くしすぎると、
スマホ画面では2行になってしまうので程々に。

インフォバーのカラーは「外観ーカラー設定」で設定できます。

1-9.インフォバーのリンク先URL

インフォバーの文字をクリックするとどのページに飛ぶかを設定します。

主力商品を紹介しているページなどに飛ばしましょう。

2.ヘッダー画像設定

では、続いてヘッダーの画像設定です。

見た目にも変化がわかりやすいので、設定しやすいと思います。

設定項目は15個です。

  1. ヘッダー画像・サイズ
  2. ヘッダー画像のリンク先URL
  3. ヘッダー画像のキャッチフレーズ
  4. キャッチフレーズのカラー
  5. キャッチフレーズの文字加工
  6. ヘッダー画像のサブテキスト
  7. サブテキストのカラー
  8. サブテキストの文字加工
  9. ヘッダー画像のボタンカラー
  10. ヘッダー画像のボタンのリンク先
  11. ヘッダー画像のボタンテキスト
  12. ヘッダー画像のテキスト位置調整
  13. 【スマホ用】ヘッダー画像のテキスト位置調整
  14. ヘッダー画像の下層ページ表示選択
  15. 【スマホ用】ヘッダー画像

2-1.ヘッダー画像・サイズ

ヘッダー画像を設定します。

サイズは「2400×500」がオススメ。

ヘッダー画像

2-2.ヘッダー画像のリンク先URL

ヘッダー画像をクリックすると飛ぶページのURLを設定します。

ホーム画面に飛ぶURLを設定してる人が多いです。

2-3.ヘッダー画像のキャッチフレーズ

ヘッダー画像の上にかぶせる文字です。

キャッチフレーズ

サイトのキャッチフレーズなどを入れると良し(๑•̀ㅂ•́)و✧

サンプルとしては、こんな感じ。

キャッチフレーズサンプルクリックでページへ飛びます

2-4.キャッチフレーズのカラー

上で設定したキャッチフレーズの色を変えます。

キャッチフレーズカラー

ヘッダー画像に合わせた色にしましょう。

2-5.キャッチフレーズの文字加工

加工の種類は3つです。

  1. 加工なし
  2. 白フチ
キャッチフレーズ文字加工

ヘッダー画像に合わせて加工します。

2-6.ヘッダー画像のサブテキスト

サブテキスト

キャッチフレーズの下に表示されるサブテキストです。

テキストのフォントサイズhtmlタグで設定可能です。

2-7.サブテキストのカラー

キャッチフレーズと同じく、色を変えることができます。

2-8.サブテキストの文字加工

こちらもキャッチフレーズと同じく3種の加工ができます。

2-9.ヘッダー画像のボタンカラー

ボタンカラー

ヘッダー画像とかぶらないようにカラー設定をしましょう。

2-10.ヘッダー画像のボタンのリンク先

ボタンを押すと飛べるページのURLを設定します。

2-11.ヘッダー画像のボタンテキスト

ボタンテキスト

ボタンのテキストを設定します。

<span style=”color: #ff6600;”>ボタンテキスト</span>

テキストの色は、
上のようなhtmlタグで指定できます。

「#ff6600」の部分を好きな色に変えましょう。

2-12.ヘッダー画像のテキスト位置調整

キャッチフレーズなどのヘッダー画像上のテキストの位置を決めます。

これも好みで設定しましょう。

一応、サンプルに数字を変えたバージョンの画像をおいておきます。

ヘッダーテキスト位置

2-13.【スマホ用】ヘッダー画像のテキスト位置調整

こちらも上と同じく、
ヘッダー画像のテキスト位置を調整します。

PCとスマホ、
別々に設定できるのはありがたいですね。

2-14.ヘッダー画像の下層ページ表示選択

ヘッダー画像を記事の上にも表示するか否かの設定です。

ヘッダー画像の下層設定

PC画面上ではどちらでもいいと思いますが

スマホ画面だと印象が変わるので、こちらも好みで設定を。

ヘッダーではなく、
ロゴを設定しているなら「表示させる」ほうがいいかも。

2-15.【スマホ用】ヘッダー画像

スマホ用のヘッダー画像を設定します。

こちらは幅1500px以上なので、おすすめサイズは

1500×250

ぐらい。

まとめ

以上!

JINでのヘッダー設定

でした!

改めて、簡単にまとめておきます。

ヘッダーサイズ
  • (公式推奨)幅2400px
  • (オススメ)PC:2400×500 スマホ:1500×250
ヘッダーカスタマイズ法外観ーカスタマイズ
ヘッダーとロゴの違い
  • 表示される位置が違う
  • ロゴは本来社章などを表示させる部分
  • ロゴ画像を設定してヘッダーの役割をしてるブログが多い
ロゴサイズ
  • (公式推奨)無し
  • (オススメ)1200 × 250
  • 表示サイズ変更は可能

好みサイズのところは、
いろいろいじって実機やプレビュー画面で確認していきましょう。

 

では、ここまでお読みくださりありがとうございました!

次世代バナーストーリー

次世代バナー 次世代バナー吹き出し

jisedai-cta

そんなあなたへ!

私が趣味ブログで

わずか2ヶ月

収益0→1万円になった秘訣を公開中★

↓ちょっとでも興味があったらLet’s クリック!↓

 

記事を購読する!
follow us in feedly

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA