WordPressのヘッダー画像、ロゴの違いは?画像ヘッダーを作る方法

更新日:

最近のWordPressテーマのヘッダーって作り方が複雑で難しいなぁ

と感じませんか?

 

以前は、ヘッダー全体に対して

ヘッダー画像の作り方

↑こういうヘッダー画像をドンと1枚貼るスタイルだったのが、

Cocoonのように、そもそもヘッダー画像設定がなくて、ロゴ画像設定だけだったり、

Stinger、AFFINGERなどのテーマのように
ブログタイトルと説明文を入れるヘッダーエリアとヘッダー画像エリアが
別々に別れてしまっているテーマも結構あります。

ヘッダーとヘッダー画像エリアに別れてしまっている

これだと、ファーストビューのスペースの無駄遣いですし(最初に目に入る画面には、もっと有益な情報を入れた方がスクロールしてもらいやすくなるので)、本来なら、

ヘッダー画像の作り方

こういう感じにブログタイトル、説明文、ヘッダー画像が全部一緒の画像をトップ画面に貼りたいですよね。

 

なのに最近は、ヘッダーのデザインの仕方が複雑化してきていて、
作る側もイメージ通りに作るのが難しく感じていると思います。

というのも、ただ画像ヘッダーを全体にドンと貼るスタイルは
近年では

モバイルで表示した時に、ブログタイトルが極小になってしまう

SEO的に不利と言われる面もある

という問題もはらんでるからなんです。

 

というわけで

ロゴとヘッダーって何が違うのか?

どうすれば、ヘッダー全体を画像にするタイプのヘッダーが作れるのか?

 

といった部分を解説しながら、SEO的に不利になる事を防ぎつつ、
ロゴとヘッダーをうまく組み合わせて、
思い通りのかっこいいヘッダーデザインの作り方を解説します。

 

WordPressのヘッダー画像(ロゴ画像)の作り方:手順

まず、ヘッダーを作る手順なんですか

  1. ロゴとヘッダー、ヘッダー背景の違いとSEOとの関係を理解する
  2. 画像編集ソフトでそれぞれを作る
  3. それぞれをアップロードする
  4. モバイルでも綺麗に表示されるか確認

こういう流れになります。

それぞれを解説していきます。

 

ロゴとヘッダー、ヘッダー背景の違いを理解する

例えば、一昔前のWordPressブログのテーマだったら、

ヘッダー画像の作り方

↑こういう感じの画像を「外観→カスタマイズ」ページのヘッダー項目にドンと貼れば、
それで終了だったと思うんですね。

まぁ、もちろんタイトルと説明文の文字が被るんで、
その2つをCSSで display:none; などで消したり、
画像で文字を被せるようにCSS設定して、貼ってたと思うんですけど、

最近のテーマってそうシンプルに行かないものが多いんです。

 

これには、理由があって、

まず、ブログタイトルか説明文のどっちかは、
画像にせず文字のままの方がSEO的に良いという解釈があって、

つまり、ブログタイトルや説明文を、CSSのdisplay:none;などを使って隠したりせず、
ちゃんと文字のまま画面上で見えるようにした方がGoogleの評価が良いので、
こういうベタッとヘッダー画像を一番上に貼るスタイルが減ってきてます。

 

その代わりとして増えてきたのが

ブログタイトルをロゴ画像にし

説明文は文字のままにしてh1タグを入れ

ヘッダー画像は背景画像、もしくは1段下に設定

っていうスタイルです。

 

例えば、当ブログネビ活のヘッダーは

ヘッダー画像の作り方2

タイトルは画像で作られており、それをロゴ画像として設定し、
説明文は画像にせず、文字のまま配置しています。

そして、説明文の方にはh1を設定しています。

 

その理由は、Googleはh1文字に書かれている事でどんなブログなのかを判断して、
検索エンジンにインデックスする傾向があるからです。

ロゴ画像にh1を貼っても、何のブログだか分からないので、代わりに説明文にh1を設定しているというわけです(最近のテーマではこうやってh1を説明文に設定できるテーマも結構あります。)

一応、ロゴ画像をh1で囲って、画像のalt(代替テキスト)部分に文字でタイトルを書けば、
それをGoogleが読んではくれますから、ロゴ画像にh1設定する事も可能ではあります。

ただ、それよりも、説明文にブログの方向性が書かれているのであれば、
説明文にh1を設定してしまってもいいよねとテーマ製作者は最近考えて、
説明文にh1を設定できるようにしてるテーマも多いので、

私の場合は、タイトルロゴではなく、説明文にh1を設定しています。

→h1,h2,h3,titleなどのタグの意味とSEO的に良い使い方

 

WordPressでの画像ヘッダーの作り方

では、仮に、↓こんな感じの画像のヘッダーを作りたいとしましょう。

ヘッダー画像の作り方

その場合、Photoshopなどの画像編集ソフトを使って、

ロゴ画像(透過PNG)

ロゴ画像の設定

ヘッダー背景画像(PNG、JPEGどちらでもOK)

ヘッダー背景画像

といった感じで、文字と全体の画像を分けて作ります。

 

そして、WordPressの外観→カスタマイズのロゴ画像設定画面や、
テーマ独自のヘッダー設定、ロゴ設定画面で、

ロゴ画像と、ヘッダー背景画像をそれぞれ設定し、

ブログタイトルの文字は、「ロゴ画像を使用する」やCSSで display:none; にして、
文字を画面から消し、

ブログ説明文は、画像ではなく、文字でそのまま表示させます。

ヘッダー画像の作り方3

そうする事で、SEO的にも良好な、こういった画像ヘッダーを作る事ができます。

 

ただ、もちろんテーマによって↓

ヘッダー画像の作り方4

こんな感じで、文字や画像の位置がイメージとは違う位置に来てしまう場合もあるでしょう。

その時は、それぞれの画像の大きさや、画像の余白部分の大きさを変えたり、
CSSで画像や文字の位置や大きさを微調整したりという感じです。

 

例えば、

ロゴ画像設定2

↑上のロゴ画像を使ったら、どうもイメージよりずいぶんと左端に来てしまった。
もう少し中央に寄せたいなと思ったら、

ロゴ画像設定3

こんな感じで、余白入りの画像を作って、アップし直せば、余白調整ができるわけです。

 

説明文も画像にしたい場合は、
タイトルと一緒に説明文も添えたロゴ画像を作り、
両方とも display:none;などで見えなくする方法になります。

SEO的に失敗しないように、この場合、必ずロゴ画像に代替文(alt)を記入してください。

ちなみに、最近は、ウェブフォントなども充実し、書体も選べる候補が多いので、
説明文を画像化しなくても、綺麗なフォントを選べば、かっこよく作れます。

 

スマホでちゃんと表示出来てるかも必ずチェック!

さて、PCでヘッダー画像がうまく表示できたとしても、
スマホで見たら、すごく小さかったり、画面からはみ出していたりなんて事も多々あります。

最近はスマホで見てる人が50%を上回っているので、
スマホからの見栄えの方がむしろ重要だったりします。

大抵のテーマには、モバイル専用ロゴ画像の設置もできるので、
おかしな表示になってしまう場合は、
違うサイズや違う配置の画像を用意して、スマホでも綺麗に表示されるようにしましょう。

 

おすすめの画像編集ソフト(おしゃれフォント沢山あり!)

多くの人がおすすめしている画像編集ソフトとしては、PhotoshopやGINPなどがありますが、
当方が愛用している無料で多彩なフォントも付いてて、すごく使いやすい画像編集ソフトがあります。

それは、メディバンペイントという漫画イラスト作成ソフトです!

おすすめ画像編集ソフト

使い方は、Photoshopやイラストレーターとほとんど変わらず、レイヤーごとに描き分けができ、ほとんどの操作は直感的に分かるようになっています。使い方も公式ページを見れば解説があります。

メディバンペイント

漫画作成ソフトだけに、漫画のような面白フォント文字が沢山あるので、
まさにロゴ画像を作る時などに重宝します。

おすすめ無料画像編集ソフト

実際、私は、プロフィール画像などの漫画絵も
このソフトを使って描いてます↓

これで完全無料で使えるのがすごいです。

 

というわけで、ヘッダー作りの参考にして、
是非、分かりやすくてカッコいいヘッダー作りにチャレンジしてみてくださいね。

 

 

 

写真で血圧記録

  • この記事を書いた人

Neby

本を毎日多読しつつ、資産運用、プログラミング、心理学、ネットビジネススキルを猛向上中。貧富の差が広がる5年後、10年後に安心生活を送るためのお金のリテラシー、スキル、資産を一緒に作っていきましょう。

-ブログのSEO対策
-