JIN

JINのロゴとヘッダーを理想のデザインに!パターンを全て解説します

JINのロゴとヘッダーを理想のでざいんに!全パターン解説

WordPressテーマJINに変更したばかりで、ロゴとヘッダーのデザイン設定がよくわからない方いるのではないでしょうか。

なぜがロゴ部分にタイトルがそのまま表示されてしまうなんてこともあります。

JINのロゴとヘッダー画像は当ブログでいうと、この部分のことを指します。

JINのロゴ&ヘッダー

このロゴとヘッダー位置がテンプレートによって変わるから設定方法がわからないという悩みをこの記事で解決します。

今回はこのJINのロゴとヘッダー部分を理想のデザインにするパターンを全て解説して行くので、悩んでいる方はぜひ最後まで読んでみてください。

この記事はこんな人におすすめ
  • ロゴとヘッダーをどう設定すればいいか分からない
  • ロゴとヘッダーを理想のデザインにしたい

JINのロゴとヘッダー画像の設定方法

ロゴ

ロゴの設定は「ダッシュボード」→「カスタマイズ」→「ヘッダー設定」から設定できます。

JINロゴ設定

サイトロゴは、背面透過をした画像を設定しましょう。

サイトロゴ作成におすすめ→CANVA

背面透過でおすすめ→画像透過ツール

当ブログのロゴ画像は600px × 200pxで作っています。

JINのロゴ画像の設定
ヘッダー

ヘッダー画像は、「ダッシュボード」→「カスタマイズ」→「ヘッダー画像設定」から設定することができます。

JINヘッダー設定

ヘッダー画像は幅2400px以上に設定したサイズで作ると綺麗にハマります。

当ブログのヘッダー画像は2400px × 800pxで作っています。

JIN MANUALにもヘッダー画像の最適なサイズが記載されています。

JINヘッダー画像設定

ヘッダー画像はスマホ用ヘッダー画像にも設定が必要です。

「ヘッダー画像設定」の下部に【スマホ用】ヘッダー画像という部分があります。そこにスマホ用ヘッダー画像も設定しましょう。

スマホ用ヘッダー設定

ロゴとヘッダー画像を設定できたらテンプレートを変更して理想のデザインを見つけていきます。

JINのロゴとヘッダーデザインパターン(ヘッダー画像あり)

JINロゴとヘッダー設定スタイル3を選んでロゴ画像だけを見せた場合の画像

JINのロゴとヘッダーのテンプレートデザインは全部で11種類あります。

「ダッシュボード」→「カスタマイズ」→「サイトデザイン設定」で確認することができます。

その中でもロゴだけのものと、ヘッダー画像ありのものから選ぶことができ、理想のデザインを作れます。

まず「ヘッダー画像あり」のテンプレートを実際の画像で紹介します。

今から表示する見本画像は、ロゴ画像とヘッダー画像をカスタマイズ画面に読み込んだ状態でテンプレートだけを変更しています。

デザイン2
ヘッダーデザイン2

グローバルナビゲーションがロゴ画像の右側にきているデザインです。

このデザインの場合、グローバルナビゲーションのカテゴリ名が長いと2列になってしまい綺麗にハマらないので注意が必要です。

デザイン4
デザイン4

グローバルナビゲーションがロゴの下にきていて、カテゴリごとに線で区切られているデザインです。

デザイン5
デザイン5

ロゴとヘッダー画像が重なり、グローバルナビゲーションが一番下にきているデザインです。

デザイン7
デザイン7

グローバルナビゲーションがロゴとヘッダーの上にきているデザインです。

デザイン8
デザイン8

ロゴがなく、ヘッダーの上にグローバルナビゲーションがくるデザインです。

デザイン9
デザイン9

ロゴがなく、ヘッダーの下にグローバルナビゲーションがくるデザインです。

デザイン10
デザイン10

ロゴとグローバルナビゲーションが単体で独立したようなデザインです。

スマホ表示は全て同じ

スマホ表示

ヘッダー画像ありの実際の表示を紹介しましたが、スマホ表示は全て同じで上記の画像のようになります。

ロゴのサイズは「ヘッダー設定」で自由に変更可能です。

JINのロゴとヘッダー画像デザインパターン(ロゴのみ)

JINのヘッダーデザイン(ヘッダー画像あり)と書かれているデザイン以外は全てロゴのみのテンプレートになります。

ロゴだけにしたい場合は、(ヘッダー画像あり)と書かれていないテンプレートを選びましょう!

以下で「ロゴのみ」のテンプレート実際の画像を紹介していきます。

今から表示する見本画像は、ロゴ画像とヘッダー画像をカスタマイズ画面に読み込んだ状態でテンプレートだけを変更しています。

デザイン1
デザイン1

ロゴ画像が左寄せになり、その横にグローバルナビゲーションがきているデザインです。

デザイン3
デザイン3

ヘッダー画像がなく、ロゴ画像の下にグローバルナビゲーションがきているデザインです。

デザイン6
デザイン6

ヘッダー画像がなく、ロゴの上にグローバルナビゲーションがきているデザインです。

デザイン11
デザイン11

ヘッダー画像はなく、ロゴとグローバルナビゲーションが単体で独立したようなデザインです。

スマホ表示は全て同じ

ヘッダー画像なしのスマホ表示

ヘッダー画像なしのテンプレートのスマホ表示は全て同じで、上記の画像のようになります。

ヘッダー画像ありとロゴのみのスマホ表示は、ヘッダー画像があるかないかの違いしかありません。

JINのロゴとヘッダーの設定で気をつけたい2つのこと

JINのロゴとヘッダーの設定をする時に気をつけたいことが2つあります。

  1. ヘッダー設定の非表示ボタンは押さないこと
  2. (ヘッダー画像あり)テンプレートはロゴ画像を入れること

ヘッダー設定の非表示ボタンを押すとスマホで確認した時にグローバルナビゲーションが表示されなくなってしまうので注意しましょう。

ヘッダー画像ありテンプレートを選んだ時に、ロゴ画像を入れていないとサイト名が文字でそのまま表示されてしまいます。

1. ヘッダー設定の非表示ボタンを押さないこと

「ダッシュボード」→「カスタマイズ」→「ヘッダー設定」を開くとロゴを設定をするページになります。

ヘッダー全体設定の非表示ボタンは押さないようにしましょう。

ロゴの非表示設定

下にロゴを設定する部分があるため、ロゴを非表示するボタンだと勘違いしている方がいます

この非表示ボタンはヘッダー全体を非表示にしてしまうので、スマホ表示で見たときにグローバルナビが表示されなくなってしまいます。

ボタンを押した時のスマホ表示
ヘッダー設定を非表示にしたときのスマホ表示

グローバルナビゲーションが消えヘッダー画像のみとなってしまっています。

読者はほぼスマホから記事を見ているので、スマホのデザイン重視で考えるのがベストです!

グローバルナビゲーションは読者が読みたい記事に辿り着きやすくするために設置するものです。

読者のために必要な部分なので、ヘッダー全体設定の非表示ボタンは押さないように気をつけてましょう。

2. ヘッダー画像ありテンプレートはロゴ画像を入れること

ヘッダー画像ありテンプレートを選択した時、ロゴ画像が入っていないとサイト名が文字で表示されてしまいます。

JINサイトタイトルロゴ画像を消し、スタイル4(ヘッダー画像あり)を選択した時の表示

サイトタイトルを設定から消すと、この箇所の文字も消えますがSEO的によくありませんし、何か味気ない…。

ヘッダー画像ありテンプレートを選ぶときはロゴ画像を入れるようにしましょう!

タイトル文字がそのまま表示されてしまう時のおすすめ対処法

タイトルの文字がそのまま表示されてしまう時のおすすめの対処法を紹介します。

その場合の対処法は2つあります。(上のツイートでは3つ紹介していますが、今回の記事では綺麗に見えるものだけ紹介します)

  1. ヘッダー画像とロゴ画像の両方を入れる
  2. ヘッダー画像をロゴ画像に移動し、ロゴのみテンプレートを選ぶ

この2つのどちらかで設定すると綺麗に見せることができます!

ヘッダー画像とロゴの両方を入れる

デザイン4

1つ上の章でも説明しましたが、ヘッダー画像ありのテンプレートを選ぶ時は、ヘッダー画像とロゴ画像を両方とも設定すると綺麗に表示させることができます。

 

ヘッダー画像をロゴに移動し、ロゴのみテンプレートを選ぶ

JINロゴとヘッダー設定
  1. ロゴ画像を600px × 200pxで作成
  2. 「ヘッダー設定」からロゴ画像を設定
  3. (ヘッダー画像あり)と書かれていないテンプレートから選ぶ

この順番で設定し、ロゴ画像をヘッダー画像のように作ると問題が解決します。

この方法は、ロゴ部分がいらないなと感じる方にはおすすめです。

ロゴ画像は記事を開いた時にも常に表示されるので、ロゴ部分にヘッダー代わりの画像を入れると誰のブログなのかもわかりやすくなりますよ。

当ブログもこの方法で設定していて、

ロゴをCANVAで作った後、画像透過ツールで背面透過し、背景色は設定で変更しています。

(グローバルナビゲーションと色を合わせるため)

JINのロゴとヘッダーを理想のデザインにしよう!まとめ

JINのロゴとヘッダーを理想のデザインにする方法を紹介しました。

JINのロゴとヘッダーをデザインする時に気をつけたことをまとめるとこうなります。

JINのロゴとヘッダーまとめ
  1. ヘッダー設定の非表示ボタンは押さない
  2. 最初にロゴとヘッダーを設定してしまうと失敗しない
  3. ヘッダー画像ありテンプレートを選ぶ時はロゴ画像を入れる
  4. ロゴにヘッダー画像の代わりになるものを入れるのもあり

この4つさえ理解しておけば可愛く理想のデザインを作れますよ♪

わかりにくかった部分がありましたら、気軽にTwitterのDMからご連絡ください。

まるこぼーろが回答いたします!

ズボラ神
ズボラ神
この記事を書いたのはまるこです(@shokoofficial1)
よかったらTwitterフォローしてね♪
WordPressJIN便利に使えるプラグインまとめ
WordPress「JIN」便利に使えるプラグインまとめ私はWordPressのテーマで「JIN」を使用しています。JINには相性の悪いプラグインがありますが、現在私がJINで快適に使用できている便利なプラグインをご紹介します。JIN公式サイトに掲載されていないプラグインも多く使用しています。...
WordPressテーマ「JIN」レビュー!SimplicityからJINに変更しました!先日WordPressのテーマを「Simplicity」から「JIN」に変更したのでレビューしていきます!SimplicityとJINの比較や、JINの素敵な機能なども紹介します。1番最後には、JINを作成したひつじさんとの絡みも...あるかも...しれないよ......
ABOUT ME
アバター
ズボラ神まるこ
3児のズボラママ。別ブログ74記事で月5万円達成。 Twitter1ヶ月でフォロワー500人増。 ズボラを極めるために、日々戦っている。 初心者のための月3万稼ぐ方法を発信していく。

COMMENT

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください