[kazu]

トピックを新しく立てる方は次の項目も記述してください（要望トピックの場合は不要です）。

【お使いの Snow Monkey のバージョン】11.4.0
【お使いのブラウザ】Chrome
【当該サイトのURL】（公開できる場合は書いていただいたほうがスムーズです）

===

いつも、お世話になります。

スマホとＰＣでデフォルトのヘッダー画像を変えることはできるでしょうか？

また、スマホではヘッダー画像用に、どの画像サイズを使っているのでしょうか？

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

スマホとＰＣでデフォルトのヘッダー画像を変えることはできるでしょうか？

レスポンシブで、となるとちょっとハードルが上がってしまうのですが、ユーザーエージェント（端末）で識別であれば下記のコードでできそうです。My Snow Monkey プラグインに追加してみてください。

add_filter(
	'theme_mod_default-page-header-image',
	function( $image ) {
		// モバイルのとき
		if ( wp_is_mobile() ) {
			return 'ここに画像の URL を記入';
		}

		// それ以外のとき
		return $image;
	}
);

また、スマホではヘッダー画像用に、どの画像サイズを使っているのでしょうか？

Snow Monkey 側では PC・スマホ問わず xlarge という Snow Monkey 独自の画像サイズを指定しています（1920 x 1920）。

コードを書けば xlarge 以外に変更することもできます。

add_filter(
	'snow_monkey_page_header_thumbnail_size',
	function( $size ) {
		return 'large'; // large に変更
	}
);

で、デフォルトページヘッダー画像が表示される場合は普通にこの指定サイズで表示されるのですが、記事ページでアイキャッチ画像を指定した場合はそのアイキャッチ画像がページヘッダー画像として表示され、その画像は WordPress のレスポンシブイメージの仕組みに則って表示されるので、常に xlarge のサイズで表示されるとは限りません。

♥ 0

いいねをした人: 居ません

[kazu]

ありがとうございます。

ヘッダー画像に文字入れをして使おうと思っていますが、

スマホ、ＰＣで表示されている範囲・縦横比が違うように見えます。

どのように表示されるのでしょうか？

♥ 0

いいねをした人: 居ません

[kazu]

お世話になります。

手持ちの環境で市チェックしてみました。

以下の理解でよろしいでしょうか？
ヘッダー画像は、横方向はカットすることなくすべて表示。
タテは、
PCでは、横の３３％程度の大きさを確保し中央部分を抜き出し。
スマホでは、横の５５％程度の大きさを確保し中央部分を抜き出し。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

バージョンによって若干違いますが、最新版だと

◎PC
min-height: 500px;

◎タブレット
min-height: 400px;

◎スマホ
min-height: 300px;

となっています。

横いっぱい、中央抜き出しです。

ヘッダー画像に文字入れをして使おうと思っていますが、

Snow Monkey のページヘッダー画像は「どんな画像を設定してもある程度おかしくないように表示する」というコンセプトになっているため、文字入りの画像のようにぴっちり表示させる必要があるものには向いていません。CSS を追加して、縦幅の指定や中央抜き出しがされないようにしたほうが文字入り画像は表示しやすいと思います。

♥ 0

いいねをした人: 居ません

[kazu]

返信ありがとうございます。

「どんな画像を設定してもある程度おかしくないように表示する」

そうですね、きれいに表示されていて使い勝手が良いと思います。

アイキャッチを入れたものは、この機能を使いたいと思いますが、トップページのヘッダー画像やデフォルトのヘッダー画像（アイキャッチが入っていない記事用）のみ、字入れのヘッダー画像を使いたいと思います。

CSS を追加して、縦幅の指定や中央抜き出しがされないようにしたほうが文字入り画像は表示しやすいと思います。

恐れ入りますが、この部分のＣＳＳを教えていただけませんでしょうか？

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

恐れ入りますが、この部分のＣＳＳを教えていただけませんでしょうか？

CSS 的にはこんな感じなのですが、

.c-page-header[data-has-image=true] {
    min-height: auto !important;
    height: auto;
}

.c-page-header__bgimage {
    position: relative;
}

.c-page-header__bgimage>img{
    position: relative;
    object-fit: none;
    height: auto;
}

トップページのヘッダー画像やデフォルトのヘッダー画像（アイキャッチが入っていない記事用）のみ、字入れのヘッダー画像を使いたいと思います。

この判定をやるうまい方法が思いつかず…。ページヘッダーで表示する画像を計算している処理をまるまるもう一回やれば判定できるかもですが、処理的にも無駄が多いし、今後アップデートしたときの互換性も考えると微妙な気もします…。

♥ 0

いいねをした人: 居ません

[kazu]

了解いたしました。

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

♥ 1

いいねをした人: 居ません

[投稿者]

投稿