ヘッダー画像の設定について

該当記事を見てないので詳細はわかりませんがphpはサーバーサイドの言語なので、設定する毎に値を読み直す必要があります。

例えばヘッダーの高さを変更したら保存して、カスタマイザーを終了して、再度カスタマイザーを開いた時にその変更内容が適用されます。

この状況と異なる場合は何かしらのjavascriptのエラーなどが考えられますが、これらは管理画面内の話なので外からは見えません。デベロッパーツールなどで何かしらエラーがでているかなどを確認して、でているようならそれら情報を出してもらわないと何とも言えない所があります。

またヘッダー画像等はwordpressの機能なので、テーマ側に問題があるかも含めて検証する必要があります。

Hidekichiさん
いつも回答ありがとうございます。

なるほど、ヘッダーに関しては取り敢えず現状なんとか使えているのでよしとするしか無いですね。
何か、アクセスに不都合やSEOとかで不具合がある訳では無いようですから…

寧ろ、今早急に対処が必要なのはSimplicity2の仕様上、スマホではヘッダー画像が非表示って点ですね。
私のブログではPC版でヘッダー画像に予めブログタイトルを入れているので、以前教えて頂いた下記のコードをCSSに記述して、タイトルとキャッチフレーズを非表示にしています。

#site-title, #site-description {
  display: none;
}

ですが、当然これをするとスマホの表示も非表示になってしまっていて、困った事態になっています。
PC版では「非表示」で、スマホ等モバイル端末では「表示」にする場合は、どのようにコードを記述すれば良いでしょうか？
ご指導よろしくお願いします。

> 寧ろ、今早急に対処が必要なのはSimplicity2の仕様上、
> スマホではヘッダー画像が非表示って点ですね。

ヘッダー画像が非表示ということはないですよ。やり方が問題なだけかと思います。
サイトタイトルを画像で作って、ロゴとして表示し、メディアクエリで画像だけ変えたらPCの時もスマホの時も好きなものにできますし、jQueryを使えば更に自在に設定できます。

例えばカスタマイザーでロゴ画像を使わなくても、cssだけで何とかできそうですけどね。
seo的に問題があるかもしれないので、それぞれの画像とタイトルをphpで別途入れておくほうがベターですが。

他の方法としてbackground-imageは複数指定することができるので、それらで対応しても良いですが、それをするとリンクがつけられません。

サンプル: 背景画像を複数設定する | codepen

やり方は色々ありそうです。

また夜にサンプルを作ってみます。

Hidekichiさん

お手数を掛けます。

一応、PCの方のヘッダー画像サイズは1070*300です。
一方、モバイル向けのヘッダーロゴ画像サイズは700*200～300程度のものを使用したいです。

サンプルCSSお待ちしています。

Hidekichiさん
ごめんなさい。
あれからいろいろとトライしたりググってみたら、その他の設定も込みで自分の用途に合致したテーマを見つけました。
以降はテーマを切り替えて頑張ってみます。
いろいろとご指導いただきありがとうございました。

サイズの確認ですけども、言われている画像サイズでやるとなると、こんな感じになるというサンプルを作りました。

サンプル: 確認用サンプル | codepen

こうすればできるというサンプルではなく、そのサイズならこう見えると言うサンプルです。見え方のサンプルなのでjQueryでロゴ画像部分を入れていますし、タイトルだけを非表示にできるようにもしてあります。これはひとまずの対処です。

ちなみに変化がわかるように、テキスト版のサイトタイトルは表示するようにしてあります。960px以下の画面サイズになったらロゴ画像(代用画像)に変わります。ロゴ画像は700×300の比率で拡大縮小しています。
デフォルトでサイトタイトルは、ロゴ画像を入れれば置き換わります。

ヘッダの高さを300pxに固定するとこんな感じになります。これで問題ないように思われる人もいるかも知れませんけれども。

もちろんロゴ画像はないので、代用のものを利用してますから、そこでおかしいと思うだけというのも否めませんが、サイズ感がおかしいように思います。700×300はおそらくPC画面での話であって、スマホの時はそうではないと思うんですよ。かなり小さくなると思います。

ロゴ画像は、例えばこちらのサイトのように通常のテキストフォントでは上手くデザインできないようなものを画像に変えた、あくまで「ロゴ」の画像ですから、多少の大きさの変化はあれど普通の背景画像のようなものとはまた違うものと考えるべきです。
こちらのサイトのほうがわかりやすいですかね？
このロゴはテキストフォントだけならムリな表現で、cssでも頑張ればできるかも知れませんが、画像でやる方が得策です。

一方背景画像は、ヘッダの背景画像ですから、これは何でも構いませんが1070×300ドンピシャで作ればスマホの時にどうなるかは計算で出せます。

1070:300 = 414:y
y = 177.428571429pxです。

つまり、1070×300の画像はそのまま全部を表示させようとすると、iPhone6plusの縦向きの時の横幅414pxでは、高さが180pxに満たないということです。iPhone5なら画面幅がないので更に小さくなります。その状態で背景画像の縦を300pxにするのであれば、もちろん横が切り取られます。
背景画像は、いくつか用意してもらえれば、その画面サイズの時にそれぞれを切り替えられます。

それにあわせてロゴ画像の高さもありますから、1070×300と言う設定はレスポンシブを考えなければジャストサイズだけれどもレスポンシブを考えた場合は破綻してしまうということになります。

そこで、元の質問に戻ります。

> 私のブログではPC版でヘッダー画像に予めブログタイトルを
> 入れているので、以前教えて頂いた下記のコードをCSSに記述して、
> タイトルとキャッチフレーズを非表示にしています。

僕ならブログタイトルを背景に入れるということはしません。背景はいつどんな時にどこが切り取られるかはわからないため、縦横にある程度の余裕をもたせる必要があるためです。どんな場合でも確実に入るようにするにはかなりの工夫が必要です。

ロゴ画像は、サイトタイトルに入るテキストフォント部分を、指定した画像で置き換えられます。これはつまり上記で説明したように、サイトタイトルを何かしらデザインしたいという場合に別途作成した画像を利用できるということを指しています。

問題点は、背景画像にタイトルが入れてあるという点であり、テキストでかかれたタイトルとディスクリプションを非表示にするというのが、そもそもの問題点です(ディスクリプションは非表示でも良いんですけどね)。そこを変更すれば、#51691のサンプルのように背景を複数設定して別々に位置を調整するということもできますし、背景画像とロゴ画像とでうまく調整できるとも思います。

卯月廿六さんのサイトの現在のヘッダーで言えば、キャラクターが表示されている部分を右端として、キャラクターの背景を上下と左に余裕をもたせるべきです。で、背景画像に入れてあるタイトルは透過pngなどにしてロゴ画像にします。

レスポンシブで画面が狭くなった時、ヘッダーの右端センター(あるいはトップ、もしくは指定値)を起点にして、左側をはみ出していけばいつまでもキャラクターは画面に残ります。そこにロゴが重なると考えればキャラクターが座っていることを考えると、ロゴは左下付近になって重なるでしょうし、ロゴのサイズを調整すれば重ならないようにできるかも知れません。ここらは調整可能。

1枚ものの画像で仕上げるのではなく、レイヤーを重ねて組み合わせると言う考え方と同じですね。
スマホと現在のヘッダを例に考えると、ロゴ画像はもう少し横を短く縦に幅が取れるようにしたほうが良いかと思います。逆に背景画像の方を余裕をもたせたりその他アイデアで考慮してもよいです。

とまぁ、色々とやっているうちにもしかして、ロゴ画像周りの仕組みが十分に理解されていないのではなかろうかと思ったので、ひとまず解説してみました。
これらを踏まえて、デザインを再考してみて下さい。色々と計算が必要になるかも知れませんが、予めどの端末をターゲットにするかを考えて、その画面サイズを調べ、そこにどうすれば希望しているものが入るかをデザインして、どんな時にどうするかをの仕様を考えます。

画面幅が一定のサイズ以下の時には違うロゴ画像に変更することもできますが、デフォルトではimgタグで入っているためにcssだけで変更するのはできません。imgタグはおそらくbeforeなどの疑似要素が使えないため、imgタグ(ここではロゴ)を非表示にして違う要素の疑似要素で表示することは可能ですが…まぁそこらは後々に。
基本的には、ロゴは大きくサイズを変えない方向でやるほうがデザインはしやすいと思うんですけども、ここらはお好きに。320pxにうまく入るようにデザインすれば、それを少し拡大するぐらいで使いまわすと考えたらたいていのヘッダにはうまく収まると思います。

その上で、Simplicityのhtmlの構造がマズければ変更してしまえばよいだけですし、どうすればデザイン案をhtmlに落とし込めるかがわからないというのであればそれは相談にのれます。ただ、元のデザインがわからないと正しく実現できるかは何ともわかりません。
なんならヘッダに背景画像を入れるのではなく、その親になる#containerに入れても良いですし、bodyに入れてもいけますし。#mainに背景画像がかかればもちろんその部分は見えなくなりますが、より大きく使うことだってできます。

デザイン案を再考してスマホの時と、PCの時の状態がどうなれば正解かをおおまかにわかるように何かしら画像にしてもらって、ロゴと背景画像を用意してもらえれば、テーマ上でどうすればよいかは提案できます。

Hidekichiさん
今後の参考に凄く勉強になりました。
いつも丁寧で感謝です。

一応、ご報告ですが「保存して公開」が出来ない件の、解決策が解りました。
どうやらサーバー設定の「WAF設定」がONだとだめなようで、カスタマイズ中はOFFにして、終ったらONにすることで解決しました。

少し古い3～4年前のWordPressの同様の事例を、ググっていて見つけたのでダメ元で試したら当たりでした^^;

ちなみに私の使用しているサーバーは、お名前.comレンタルサーバーSD-11ってやつです。