2019年6月8日こんちゃす!画像づくりは下手の横好きな有川(@arikawa0812)です。ヘッダー画像とか、アイキャッチ画像とか...結構時間かかっちゃうよね。悩む!そこで今回は!サクッときれいなヘッダー画像を作る&JINでヘッダー画像を設定する方法を伝授します。この記事ではJINのヘッダー画像のサイズヘッダー画像の作り方ヘッダー画像の設定の仕方をお伝えします。【注意点1】「サイトロゴ」と「ヘッダー画像」は別モノ【注意点2】ヘッダー画像はヘッダーデザインによって表示されたりされなかったり【注意点3】ヘッダー画像とサイトロゴどちらも設定して、デザインを決める2-1.サイトデザイン設定→ヘッダーデザイン2-2.ヘッダー設定1.ヘッダー全体の表示選択2.サイトロゴ3.ロゴとフレーズの文字サイズ調整4.ロゴとフレーズの上下の余白5・6.検索ボックス&SNSアイコンの表示選択7.【スマホ用】ヘッダーロゴとヘッダーフレーズの文字サイズ調整2-3.ヘッダー画像設定1・2.ヘッダー画像&URL3~5.キャッチフレーズ関連の設定6~8.サブテキスト関連の設定9~13.ヘッダーボタン関連の設定14・15.その他の設定まとめ1.ヘッダー画像を作るまずはヘッダー画像を作りましょう。サイズと作り方をお伝えします。1-1.JINのヘッダー画像推奨サイズJINのヘッダー画像推奨サイズは幅2400px以上。縦は指定はない&ヘッダー画像設定で多少の融通はきくので、私は2400✕500で作っています。1-2.canvaでヘッダー画像を作る私はヘッダー画像はcanvaで作っています。canvaは無料で画像を作れるウェブ上のサービスです。_)mこれが無料!?canvaを使ってすてきなアイキャッチを作る方法【動画&画像解説】canvaを使ったアイキャッチの作り方を動画と画像2つの方法で紹介!...2.ヘッダー画像の設定ヘッダー画像を設定する時は、「外観→カスタマイズ」で行います。上から順に設定していきましょう。・・・と、行きたいところですがその前に。ヘッダー画像設定に関するJINならではの注意点をお伝えしておきます。設定するときは、わかりにくい部分だから、先に注意点を読んでおくと、設定しやすくなるよ!【注意点1】「サイトロゴ」と「ヘッダー画像」は別モノJINでは「サイトロゴ」と「ヘッダー画像」どちらも設定ができます。基本的に、どちらかを設定すればOKです。私のブログは、ヘッダー画像ではなく、「サイトロゴ」を設定して、ヘッダーのように使っています。本来であれば、サイトロゴは、社章のようなモノを設定する部分です。【注意点2】ヘッダー画像はヘッダーデザインによって表示されたりされなかったりサイトロゴは、どのヘッダーザインでも表示されますが、ヘッダー画像はデザインによっては表示されません。【注意点3】ヘッダー画像とサイトロゴどちらも設定して、デザインを決める上記2つの注意点を踏まえ、ヘッダー設定の前に下のことをしておきます。ヘッダーを設定する前にすること3ステップ仮のサイトロゴと、ヘッダーを作る。「ヘッダー画像」でヘッダーを追加この状態で、ヘッダーデザインを決めていきます。2-1.サイトデザイン設定→ヘッダーデザインでは、先述したようにサイトロゴとヘッダーを追加した状態で、ヘッダーデザインの設定をします。カスタマイズ画面なら、どんなふうに変わるのかプレビューが見られます。プレビュー画面を見つつ、好きなデザインに変えましょう。2-2.ヘッダー設定ここでは、ヘッダー全体に関する設定をします。1.ヘッダー全体の表示選択ヘッダーそのものを表示するかどうかの選択です。非表示にすると、グローバルメニュー(グローバルナビゲーション)のみになります。グローバルメニューはココ。基本は表示にしておきましょう。2.サイトロゴサイズ:2400✕500うちのサイトロゴ。私はここにヘッダー画像を持ってきています。↑で設定したサイトロゴに合わせて、数字を変えましょう。こちらもプレビュー画面で実際の見た目を確認できるので、好みの数字に!4.ロゴとフレーズの上下の余白こちらも上のサイズ調整と同じく、ロゴに合わせて設定しましょう。余白はちょっとあったほうがバランスよく見えます。5・6.検索ボックス&SNSアイコンの表示選択どちらも表示にしておくことがオススメ。「サイトデザイン設定」の「ヘッダーデザイン選択」で選んでいるヘッダーデザインによっては表示されないこともあります。「表示」にしてるのに表示されない!という場合は、ヘッダーデザイン選択をし直してみてください。7.【スマホ用】ヘッダーロゴとヘッダーフレーズの文字サイズ調整こちらも、3・4の調整と同様に、プレビュー画面で見つつ設定しましょう。2-3.ヘッダー画像設定ヘッダー画像を使いたい時は、ここも設定をしておきます。私はヘッダー画像を使っていないので、設定していません。!「何がどこに表示されるか」だけ簡単に紹介しておきます。1・2.ヘッダー画像&URL先述したように、ヘッダー画像の位置は、「サイトデザイン設定」の「ヘッダーデザイン選択」によって、変わります。「ヘッダーがぞうはここにでます」の部分。ヘッダー画像を背景に、ブログ名などを表示させる部分です。サイトロゴを設定せずに、ここで表示させてもいいですね。「ヘッダー画像のサブテキスト」の部分。(中央の紫文字)ブログのサブタイトルなどを入れるとカッコイイですね。色も自由に決められるので、背景に合わせて設定しましょう。「ヘッダーボタン」の部分。(黒いボタンにしてます)ヘッダーの上にボタンを表示させます。メインの記事に飛ばしたり、メルマガに飛ばしたり活用法はいろいろ。14・15.その他の設定そもそも下層ページってどこ?下層ページは、「記事コンテンツの上」や、「カテゴリー一覧のページ」のことだよ!そこに、ヘッダー画像を設定させるか否かの設定です。まとめ以上!JINのヘッダー画像の作り方&設定の仕方でした!ヘッダーに関して、初心者が注意しておきたいことは...ブログのトップページの設定なので、つい最初から気合を入れがちなヘッダー。記事を20~30書いて中身が整ってきてから本格的に設定していきましょう。デザインはこだわり始めると、キリがないので(笑)元々webデザイナーとかでもない限り、最初は文字ヘッダーだけでもOKです。コメントをキャンセルメールアドレスが公開されることはありません。付いている欄は必須項目です上に表示された文字を入力してください。@arikawa0812こんにちは!または初めまして!ブログで稼ぐ乙女ゲーマーの【有川】です。趣味ブログのお小遣いでゆとりを持って生活中。趣味ブログで月5万稼げるようになる最短ルートを伝授する!。