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

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

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

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

    ===

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

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

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

    0
    #57756
    キタジマ タカシ
    キーマスター
    339

    スマホと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
    キタジマ タカシ
    キーマスター
    339

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

    ◎PC
    min-height: 500px;

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

    ◎スマホ
    min-height: 300px;

    となっています。

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

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

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

    0
    #57813
    kazu
    参加者
    11

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

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

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

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

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

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

    0
    #57818
    キタジマ タカシ
    キーマスター
    339

    恐れ入りますが、この部分の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件中)
  • トピック「スマホ用デフォルトヘッダー画像」には新しい返信をつけることはできません。