スマホ用ヘッダー画像最適サイズにつきまして

https://www.yuinou.fun/wp-content/uploads/2017/11/mobile-baner.jpg

高さが高いから上部の画像を表示してると思います。

#header {
	background-position: 50% 50%;
}

例えば、他をフル無視して確認したサイズに合わせて上記CSSをあてても、メディアクエリで細かく変えないと表示がおかしくなる気がします。

http://www.htmq.com/style/background-position.shtml

なぜ100pxで指定しているのに、あえて200pxで作成したのか分かりませんが、、実際やってみないと何とも言えないです。

横にした時の背景画像は、左上の基準の指定になっているようです。要素の検証などで確認すれば、スタイルもわかりますよ。

スマホ320pxに合わせて画像を作ると、600pxに合わせると同じようになると思います。

例えば左下基準に表示させるように画像を作った場合CSSは以下のとおり。

#header {
	background-position: left bottom;
}

ただどの幅から見ても左下に合うサイズで、電話番号の大きさを考えた画像を準備しないといけないかと…。。

手っ取り早いのはもしかすると、ヘッダーロゴPHPに直接pタグなどで囲った電話番号を入れてしまうのが簡単な気がしてきました。

がうたっくさん

>なぜ100pxで指定しているのに、あえて200pxで作成したのか分かりませんが、、

とりあえず200pxで作ってはみたものの、やっぱり100px位の高さが良いな・・と
なったような気が・・汗　元画像は200pxで作っていたことすら忘れている・・頭悪すぎて自己嫌悪

>手っ取り早いのはもしかすると、ヘッダーロゴPHPに直接
>pタグなどで囲った電話番号を入れてしまうのが簡単な気がしてきました。

これに一度挑戦してみようかと思いますが
すいません”ヘッダーロゴPHP”とはどこから編集するのでしょうか?

わいひらさん

>テクニカルな方法に頼るのではなく、確実に表示する部分に表示する、
>というのが一番かと思います。

確かに。

がうたっくさんの「ヘッダーロゴPHPに直接書く」という意見もありましたので
ここら辺で一度試行錯誤かなとは思います。

私もヘッダー全てを表示したいので画像を使ってますが、ヘッダー画像はロゴに変更して、スマホの背景は入れずにヘッダー画像にサイトタイトルも入れ込んだようにスタイルで指定しました。スマホ・PCビュー全て同じ見た目にするのは可能です。

※ただ、それを試した環境は完全レスポンシブなので、挙動もかわるかもしれません。
https://bibabosi-rizumu.com/simplicity-customizer/

kobakenさんの現状は、PCビューのサイドバーが下に来る幅でも画像の電話番号表示が見切れます。ヘッダーロゴPHPか、試しで上述のCSSで対応できるか試してみるあたりかも知れません。

親テーマ内にあるheader-logo.phpを以下引用内

ローカルで成功したら、子テーマフォルダ内にアップロードしておくと、アップデートで上書きされません。とだけ＾＾
（public_html/）wp-content/themes/simplicity2-childフォルダ内にheader-logo.phpをアップロード

<p></p>pタグ内に装飾したい文字列があれば<p class="tel-contact">hogeほげ<span class="tel-no">ここだけfontsizeやfontの太さを変更可能領域</span>適当に</p>

この場合、例えば以下のような感じで装飾すれば行けそうです。

.tel-contact { ここはpタグ内装飾padding・margin・フォントサイズ・色などなど }
.tel-no { ここはspanタグ内電話番号など装飾…とか }

がうたっくさん

おはようございます。

>ヘッダー画像はロゴに変更して

サイトタイトル・キャッチコピー・電話番号すべてをロゴ画像とも考えたのですが、SEO的にどうなのかな・・・
と思い、そうしなかったのですが、その辺りどうなんでしょうか?

SEO的にどれがベストで、どれが劣るか厳密なところは不明ですが。

サイトタイトル・キャッチコピー・電話番号すべてをロゴ画像

サイトタイトルをロゴにした場合、画像のalt="サイト名"代替テキストに入れてるのが一般的だと思ってます。電話番号を入れるのであればaltに入れても・・とも思います。画像が表示しない・されない・表示が著しく遅いときに表示されるのが代替テキストなので。

サイトのキャッチコピー：ディスクリプションは、画像に入れずテキストとして表示しても良いと個人的に思います。

運営者側で何をどうしたいか考えた上で決めるのがベストじゃないですかね。

あっ、もうちょっと言えば。SEO的に色々考えられた上で作られたテーマでもあるので、自分で変更しよう！と思わなければ（迷うのであれば）テーマの構造に身をまかすのもありかなぁと。

ディスクリプションはページによって、pタグになったりh2タグになります。ザックリ言えば、そんな感じです。超ザックリですけど＾＾；

がうたっくさん

>SEO的に色々考えられた上で作られたテーマでもあるので

確かに・・・
素人がひねくりすぎて、本来よく考えて作られているテーマのSEO部分がおかしくなっては、元も子もないですものね。

スマホ表示の場合は、電話番号はフッター部分にテキストで入れるとかに、してみようかな。

ありがとうございました。