WordPressテーマJINに変更したばかりで、ロゴとヘッダーのデザイン設定がよくわからない方いるのではないでしょうか。
なぜがロゴ部分にタイトルがそのまま表示されてしまうなんてこともあります。
JINのロゴとヘッダー画像は当ブログでいうとこの部分のことを指します。
このロゴとヘッダー位置がテンプレートによって変わるから設定方法がわからないという悩みをこの記事で解決します。
今回はこのJINのロゴとヘッダー部分を理想のデザインにするパターンを全て解説して行くので、悩んでいる方はぜひ最後まで読んでみてください。
- ロゴとヘッダーをどう設定すればいいか分からない
- ロゴとヘッダーを理想のデザインにしたい
JINのロゴとヘッダー画像の設定方法
ロゴの設定は「ダッシュボード」→「カスタマイズ」→「ヘッダー設定」から設定できます。
サイトロゴは、背面透過をした画像を設定しましょう。
当ブログのロゴ画像は600px × 200pxで作っています。
ヘッダー画像は、「ダッシュボード」→「カスタマイズ」→「ヘッダー画像設定」から設定することができます。
ヘッダー画像は幅2400px以上に設定したサイズで作ると綺麗にハマります。
当ブログのヘッダー画像は2400px × 800pxで作っています。
JIN MANUALにもヘッダー画像の最適なサイズが記載されています。
ヘッダー画像はスマホ用ヘッダー画像にも設定が必要です。
「ヘッダー画像設定」の下部に【スマホ用】ヘッダー画像という部分があります。そこにスマホ用ヘッダー画像も設定しましょう。
ロゴとヘッダー画像を設定できたらテンプレートを変更して理想のデザインを見つけていきます。
JINのロゴとヘッダーデザインパターン（ヘッダー画像あり）
JINのロゴとヘッダーのテンプレートデザインは全部で11種類あります。
「ダッシュボード」→「カスタマイズ」→「サイトデザイン設定」で確認することができます。
その中でもロゴだけのものと、ヘッダー画像ありのものから選ぶことができ、理想のデザインを作れます。
まず「ヘッダー画像あり」のテンプレートを実際の画像で紹介します。
今から表示する見本画像は、ロゴ画像とヘッダー画像をカスタマイズ画面に読み込んだ状態でテンプレートだけを変更しています。
グローバルナビゲーションがロゴ画像の右側にきているデザインです。
このデザインの場合、グローバルナビゲーションのカテゴリ名が長いと2列になってしまい綺麗にハマらないので注意が必要です。
グローバルナビゲーションがロゴの下にきていて、カテゴリごとに線で区切られているデザインです。
ロゴとヘッダー画像が重なり、グローバルナビゲーションが一番下にきているデザインです。
グローバルナビゲーションがロゴとヘッダーの上にきているデザインです。
ロゴがなく、ヘッダーの上にグローバルナビゲーションがくるデザインです。
ロゴがなく、ヘッダーの下にグローバルナビゲーションがくるデザインです。
ロゴとグローバルナビゲーションが単体で独立したようなデザインです。
スマホ表示は全て同じ
ヘッダー画像ありの実際の表示を紹介しましたが、スマホ表示は全て同じで上記の画像のようになります。
JINのロゴとヘッダー画像デザインパターン（ロゴのみ）
JINのヘッダーデザイン（ヘッダー画像あり）と書かれているデザイン以外は全てロゴのみのテンプレートになります。
ロゴだけにしたい場合は、（ヘッダー画像あり）と書かれていないテンプレートを選びましょう！
以下で「ロゴのみ」のテンプレート実際の画像を紹介していきます。
今から表示する見本画像は、ロゴ画像とヘッダー画像をカスタマイズ画面に読み込んだ状態でテンプレートだけを変更しています。
ロゴ画像が左寄せになり、その横にグローバルナビゲーションがきているデザインです。
ヘッダー画像がなく、ロゴ画像の下にグローバルナビゲーションがきているデザインです。
ヘッダー画像がなく、ロゴの上にグローバルナビゲーションがきているデザインです。
ヘッダー画像はなく、ロゴとグローバルナビゲーションが単体で独立したようなデザインです。
スマホ表示は全て同じ
ヘッダー画像なしのテンプレートのスマホ表示は全て同じで、上記の画像のようになります。
ヘッダー画像ありとロゴのみのスマホ表示は、ヘッダー画像があるかないかの違いしかありません。
JINのロゴとヘッダーの設定で気をつけたい2つのこと
JINのロゴとヘッダーの設定をする時に気をつけたいことが2つあります。
- ヘッダー設定の非表示ボタンは押さないこと
- （ヘッダー画像あり）テンプレートはロゴ画像を入れること
ヘッダー設定の非表示ボタンを押すとスマホで確認した時にグローバルナビゲーションが表示されなくなってしまうので注意しましょう。
ヘッダー画像ありテンプレートを選んだ時に、ロゴ画像を入れていないとサイト名が文字でそのまま表示されてしまいます。
1. ヘッダー設定の非表示ボタンを押さないこと
「ダッシュボード」→「カスタマイズ」→「ヘッダー設定」を開くとロゴを設定をするページになります。
ヘッダー全体設定の非表示ボタンは押さないようにしましょう。
下にロゴを設定する部分があるため、ロゴを非表示するボタンだと勘違いしている方がいます。
この非表示ボタンはヘッダー全体を非表示にしてしまうので、スマホ表示で見たときにグローバルナビが表示されなくなってしまいます。
グローバルナビゲーションが消えヘッダー画像のみとなってしまっています。
読者はほぼスマホから記事を見ているので、スマホのデザイン重視で考えるのがベストです！
グローバルナビゲーションは読者が読みたい記事に辿り着きやすくするために設置するものです。
読者のために必要な部分なので、ヘッダー全体設定の非表示ボタンは押さないように気をつけてましょう。
2. ヘッダー画像ありテンプレートはロゴ画像を入れること
ヘッダー画像ありテンプレートを選択した時、ロゴ画像が入っていないとサイト名が文字で表示されてしまいます。
サイトタイトルを設定から消すと、この箇所の文字も消えますがSEO的によくありませんし、何か味気ない…。
ヘッダー画像ありテンプレートを選ぶときはロゴ画像を入れるようにしましょう！
タイトル文字がそのまま表示されてしまう時のおすすめ対処法
タイトルの文字がそのまま表示されてしまう時のおすすめの対処法を紹介します。
あー！これこうなるんよね〜😭
このみっつのどれかやるしかないかも！！1枚目→ロゴ＆ヘッダーいれたバージョン
2枚目→ロゴに適当な画像いれたバージョン
3枚目→ロゴに画像いれたバージョン pic.twitter.com/LH5MopCs4A— まるこぼーろ🐨跡取り娘は副業で月収23万 (@shokoofficial1) October 1, 2019
その場合の対処法は2つあります。（上のツイートでは3つ紹介していますが、今回の記事では綺麗に見えるものだけ紹介します）
- ヘッダー画像とロゴ画像の両方を入れる
- ヘッダー画像をロゴ画像に移動し、ロゴのみテンプレートを選ぶ
この２つのどちらかで設定すると綺麗に見せることができます！
ヘッダー画像とロゴの両方を入れる
１つ上の章でも説明しましたが、ヘッダー画像ありのテンプレートを選ぶ時は、ヘッダー画像とロゴ画像を両方とも設定すると綺麗に表示させることができます。
ヘッダー画像をロゴに移動し、ロゴのみテンプレートを選ぶ
- ロゴ画像を600px × 200pxで作成
↓ - 「ヘッダー設定」からロゴ画像を設定
↓ - （ヘッダー画像あり）と書かれていないテンプレートから選ぶ
この順番で設定し、ロゴ画像をヘッダー画像のように作ると問題が解決します。
この方法は、ロゴ部分がいらないなと感じる方にはおすすめです。
ロゴ画像は記事を開いた時にも常に表示されるので、ロゴ部分にヘッダー代わりの画像を入れると誰のブログなのかもわかりやすくなりますよ。
JINのロゴとヘッダーを理想のデザインにしよう！まとめ
JINのロゴとヘッダーを理想のデザインにする方法を紹介しました。
JINのロゴとヘッダーをデザインする時に気をつけたことをまとめるとこうなります。
- ヘッダー設定の非表示ボタンは押さない
- 最初にロゴとヘッダーを設定してしまうと失敗しない
- ヘッダー画像ありテンプレートを選ぶ時はロゴ画像を入れる
- ロゴにヘッダー画像の代わりになるものを入れるのもあり
この4つさえ理解しておけば可愛く理想のデザインを作れますよ♪
わかりにくかった部分がありましたら、気軽にTwitterのDMからご連絡ください。
まるこぼーろが回答いたします！
