JINカスタマイズ

JINでヘッダー画像を設定・カスタマイズする方法(ヘッダー画像の作り方&サイズ)

JINヘッダー設定
こんちゃす!画像づくりは下手の横好きな有川(@arikawa0812)です。

ヘッダー画像とか、アイキャッチ画像とか…結構時間かかっちゃうよね。悩む!

そこで今回は!

サクッときれいなヘッダー画像を作る

JINでヘッダー画像を設定する方法

を伝授します。

この記事では

  1. JINのヘッダー画像のサイズ
  2. ヘッダー画像の作り方
  3. ヘッダー画像の設定の仕方

をお伝えします。

目次を見て、気になる項目があればジャンプしてね!

↓ブログ運営に悩んでいるあなたはクリック!↓ 動画バナー

1.ヘッダー画像を作る

まずはヘッダー画像を作りましょう。

サイズと作り方をお伝えします。

1-1.JINのヘッダー画像推奨サイズ

JINのヘッダー画像推奨サイズは

幅2400px以上。

縦は…?

いくつでもいいよ!

と、いうことで、

縦は指定はない

ヘッダー画像設定で多少の融通はきく

ので、私は

2400✕500

で作っています。

1-2.canvaでヘッダー画像を作る

私はヘッダー画像はcanvaで作っています。

canvaは無料で画像を作れるウェブ上のサービスです。なので、ソフトをダウンロードする必要もなし!

canvaの使い方を知りたいときは、↓こちらの記事↓をお読みくださいm(_ _)m

canvaでアイキャッチ
これが無料!?canvaを使ってすてきなアイキャッチを作る方法【動画&画像解説】canvaを使ったアイキャッチの作り方を動画と画像2つの方法で紹介!...

2.ヘッダー画像の設定

ヘッダー画像を設定する時は、「外観→カスタマイズ」で行います。

cus

ヘッダー画像に関する設定は、3箇所!

  1. サイトデザイン設定→ヘッダーデザイン
  2. ヘッダー設定→サイトロゴ追加
  3. ヘッダー画像設定→ヘッダー画像追加

上から順に設定していきましょう。

・・・と、行きたいところですがその前に。

ヘッダー画像設定に関するJINならではの注意点をお伝えしておきます。

初めて設定するときは、わかりにくい部分だから、先に注意点を読んでおくと、設定しやすくなるよ!

【注意点①】「サイトロゴ」と「ヘッダー画像」は別モノ

JINでは「サイトロゴ」と「ヘッダー画像」どちらも設定ができます。

ヘッダー・ロゴ

基本的に、どちらかを設定すればOKです。

私のブログは、ヘッダー画像ではなく、「サイトロゴ」を設定して、ヘッダーのように使っています。

本来であれば、サイトロゴは、社章のようなモノを設定する部分です。

【注意点②】ヘッダー画像はヘッダーデザインによって表示されたりされなかったり

サイトロゴは、どのヘッダーザインでも表示されますが、

ヘッダー画像はデザインによっては表示されません。

【注意点③】ヘッダー画像とサイトロゴどちらも設定して、デザインを決める

上記2つの注意点を踏まえ、ヘッダー設定の前に下のことをしておきます。

ヘッダーを設定する前にすること3ステップ

  1. 仮のサイトロゴと、ヘッダーを作る。(windowsならペイントでOK)
  2. 「ヘッダー設定」でサイトロゴを追加
  3. 「ヘッダー画像」でヘッダーを追加

この状態で、ヘッダーデザインを決めていきます。

2-1.サイトデザイン設定→ヘッダーデザイン

では、先述したようにサイトロゴとヘッダーを追加した状態で、ヘッダーデザインの設定をします。

カスタマイズ画面なら、どんなふうに変わるのかプレビューが見られます。

cus1

プレビュー画面を見つつ、好きなデザインに変えましょう。

2-2.ヘッダー設定

ここでは、ヘッダー全体に関する設定をします。

cus12

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

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

非表示にすると、グローバルメニュー(グローバルナビゲーション)のみになります。

グローバルメニューはココ。

基本は表示にしておきましょう。

2.サイトロゴ

サイズ:2400✕500

headerうちのサイトロゴ。

本来であれば、社章のようなものを設定する部分ですが、

私はここにヘッダー画像を持ってきています。

私はcanvaで作っています(*´∀`)ノcanvaの使い方は↓こちら↓

canvaでアイキャッチ
これが無料!?canvaを使ってすてきなアイキャッチを作る方法【動画&画像解説】canvaを使ったアイキャッチの作り方を動画と画像2つの方法で紹介!...

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

↑で設定したサイトロゴに合わせて、数字を変えましょう。

こちらもプレビュー画面で実際の見た目を確認できるので、好みの数字に!

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

こちらも上のサイズ調整と同じく、ロゴに合わせて設定しましょう。

余白はちょっとあったほうがバランスよく見えます。

5・6.検索ボックス&SNSアイコンの表示選択

cus13

どちらも表示にしておくことがオススメ。

ただし、「サイトデザイン設定」の「ヘッダーデザイン選択」で選んでいるヘッダーデザインによっては表示されないこともあります。

「表示」にしてるのに表示されない!

という場合は、ヘッダーデザイン選択をし直してみてください。

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

こちらも、3・4の調整と同様に、プレビュー画面で見つつ設定しましょう。

2-3.ヘッダー画像設定

ヘッダー画像を使いたい時は、ここも設定をしておきます。

cus14
私はヘッダー画像を使っていないので、設定していません。

が!

「何がどこに表示されるか」だけ簡単に紹介しておきます。

1・2.ヘッダー画像&URL

cus16
先述したように、ヘッダー画像の位置は、「サイトデザイン設定」の「ヘッダーデザイン選択」によって、変わります。

3~5.キャッチフレーズ関連の設定

cus16

「ヘッダーがぞうはここにでます」

の部分。

 

ヘッダー画像を背景に、ブログ名などを表示させる部分です。

サイトロゴを設定せずに、ここで表示させてもいいですね。

6~8.サブテキスト関連の設定

cus16

「ヘッダー画像のサブテキスト」

の部分。(中央の紫文字

 

ブログのサブタイトルなどを入れるとカッコイイですね。

色も自由に決められるので、背景に合わせて設定しましょう。

9~13.ヘッダーボタン関連の設定

cus16

「ヘッダーボタン」

の部分。(黒いボタンにしてます)

 

ヘッダーの上にボタンを表示させます。

メインの記事に飛ばしたり、メルマガに飛ばしたり活用法はいろいろ。

14・15.その他の設定

そもそも下層ページってどこ?

下層ページは、「記事コンテンツの上」や、「カテゴリー一覧のページ」のことだよ!

そこに、ヘッダー画像を設定させるか否かの設定です。

まとめ

以上!

JINのヘッダー画像の作り方&設定の仕方

でした!

 

ヘッダーに関して、初心者が注意しておきたいことは…

ブログのトップページの設定なので、つい最初から気合を入れがちなヘッダー。

しかし、記事を20~30書いて中身が整ってきてから本格的に設定していきましょう。

デザインはこだわり始めると、キリがないので(笑)

元々webデザイナーとかでもない限り、最初は文字ヘッダーだけでもOKです。

 

何かわからないことがあれば、下のコメント欄やTwitter(@arikawa0812)のリプでお気軽にどうぞ!

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

また次の記事でお会いしましょう♪

↓ブログ運営に悩んでいるあなたはクリック!↓ 動画バナー
jisedai-cta

そんなあなたへ!

私が趣味ブログで

わずか2ヶ月

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

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

 

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

COMMENT

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

CAPTCHA