サイト名、キャッチフレーズをヘッダー部分に表示させないようにはどうすれば・・・

キャッチフレーズはあってもなくても良いですが、サイトタイトルはSEO的にもあった方が良いというのはわからなくもありません。

そんな時のために、考え方を変えて下さい。ヘッダーにサイトタイトルを表示させるのではなく、サイトタイトルをロゴ画像で表示して、ヘッダー画像はその背景として利用するということです。

そうすれば#site-titleの中にロゴ画像が入りますから、一挙両得です。

前にも同じようなことを別のトピックで答えましたが、参考までにこんな風にできるというのをあげておきます。

サンプル: 背景画像を複数設定する | codepen
サンプル: PC以外の時にロゴ画像を配置しつつ背景の位置も色々と変更してみる | codepen

これらのサンプルはカスタマイザーからではなく、直接子テーマstyle.cssで設定します。
最初のサンプルのように、背景を複数同時に表示しつつ、なおかつサイトタイトルを表示したり、2つ目のサンプルのように、ロゴ画像の位置や背景の位置を画面の幅によって変更させたりなどができるというサンプルです。

なぜこれらを紹介するかというと、ヘッダー画像にそのままロゴを書いてある画像の場合、PCのような横長の場合ならまぁよいですが、スマホのような横にも縦にもなるような場合の端末で、通常縦で利用する場合は、横長のヘッダー画像なら高さが足りなくなってヘッダー画像が小さくなったり、あるいはサイト名が切れたりすることがあるために、うまく表示させたい部分を表示する事が難しい場合があるからです。

その時々のサイズにあわせたヘッダー画像をいくつも作る必要はありません。背景になる画像、ロゴ画像、この2つあればたいていの端末に対応できます。背景画像はリピートさせて表示することもできますし、ロゴ画像はsvgを利用すれば拡大縮小しても綺麗なままです。

それら調整をcssやjQueryでどうすればよいかと言うとまた別の話ですが、こういうことができるということをまず知っておいて下さい。そうすれば、さらなるアイデアも出るかも知れませんし、ヘッダーの作り方が変わるかも知れません。

質問内で、ロゴ画像を利用すると隙間ができるという内容が書かれていますが、それらはcssの問題です。隙間ができないようにスタイルすれば解決できます。

サイトタイトルとキャッチフレーズを消したいだけならcssで消せば済むだけですが、1枚もののヘッダー画像を利用するデメリットは結構大きいと思いますよ。