スマホ用デフォルトヘッダー画像

0
いいねをした人: 居ません
  • このトピックには7件の返信、2人の参加者があり、最後にkazuにより3年、 6ヶ月前に更新されました。
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • 投稿者
    投稿
  • #57755
    kazu
    閲覧者
    11

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

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

    ===

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

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

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

    0
    いいねをした人: 居ません
    #57756
    キタジマ タカシ
    参加者
    2233

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

    レスポンシブで、となるとちょっとハードルが上がってしまうのですが、ユーザーエージェント(端末)で識別であれば下記のコードでできそうです。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
    いいねをした人: 居ません
    #57758
    kazu
    閲覧者
    11

    ありがとうございます。

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

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

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

    0
    いいねをした人: 居ません
    #57786
    kazu
    閲覧者
    11

    お世話になります。

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

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

    0
    いいねをした人: 居ません
    #57806
    キタジマ タカシ
    参加者
    2233

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

    ◎PC
    min-height: 500px;

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

    ◎スマホ
    min-height: 300px;

    となっています。

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

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

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

    0
    いいねをした人: 居ません
    #57813
    kazu
    閲覧者
    11

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

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

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

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

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

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

    0
    いいねをした人: 居ません
    #57818
    キタジマ タカシ
    参加者
    2233

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

    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
    いいねをした人: 居ません
    #57822
    kazu
    閲覧者
    11

    了解いたしました。

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

    1
    いいねをした人: 居ません
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • トピック「スマホ用デフォルトヘッダー画像」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。