iPadでもPCと同じ表示にする方法

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

    【お使いの Snow Monkey のバージョン】25.0.2
    【お使いの Snow Monkey Blocks のバージョン】 20.1.2
    【お使いの Snow Monkey Editor のバージョン】9.3.0
    【お使いのブラウザ】Chrome
    【当該サイトのURL】テストサイト

    ### 実現したいこと

    いつも大変お世話になっております。

    お忙しいところ、技術的な問題で申し訳ございませんが、iPadでもPCと同じ表示にしたいため、Snow monkeyテーマ更新に影響がなくviewportを置き換える方法を教えていただければ幸いです。my Snow monkeyもセットしています。

    試したこと
    以下サイトを参考にjavascriptの設置を試みましたがうまくいきませんでした。

    0
    いいねをした人: 居ません
    #129856
    アバター画像キタジマ タカシ
    参加者
    2371

    viewport を書き換えるという発想がなく、この部分には特に専用のフックなどは用意されていないため、やるなら HTML を書き換えるフックで書き換える形になるかなと思います。

    とりあえず下記で既存の viewport 用メタタグは消えるかと思います。

    add_filter(
    	'snow_monkey_template_part_render_template-parts/common/head',
    	function( $html ) {
    		$html = preg_replace( '|<meta name="viewport"[^>]+?>|s', '', $html );
    		return $html;
    	}
    );

    あとは js でやっても良いし、ユーザーエージェントで判定させるなら PHP でもできると思うので、PHP で追加しても良いのかなと思います。

    1
    いいねをした人:
    #129941
    read
    参加者
    13

    ご返信が遅くなりまして申し訳ございません!

    ご教授いただきましてありがとうございます。
    早速 viewport 用のメタタグを消すことができました。

    取り急ぎfunction add_meta_in_head() 〜でviewportの書き換えをしようとしてみましたが、
    教えていただいたviewport 用メタタグを消すコードが干渉して、
    <meta name=”viewport”〜が消えてしまいます・・・

    初歩的な質問で申し訳ございませんが、
    ・タブレットの場合だけ:<meta name=”viewport” content=”width=1280″>
    ・それ以外の場合は置き換えない
    といったことは可能でしょうか?

    0
    いいねをした人: 居ません
    #130002
    アバター画像キタジマ タカシ
    参加者
    2371

    取り急ぎfunction add_meta_in_head() 〜でviewportの書き換えをしようとしてみましたが、
    教えていただいたviewport 用メタタグを消すコードが干渉して、
    <meta name=”viewport”〜が消えてしまいます・・・

    メタタグを消す関数とメタタグを追加する関数を別々にせずに、同じ関数内で処理すれば大丈夫なのではないかと思います。

    初歩的な質問で申し訳ございませんが、
    ・タブレットの場合だけ:<meta name=”viewport” content=”width=1280″>
    ・それ以外の場合は置き換えない
    といったことは可能でしょうか?

    「タブレットの場合だけ」をどうやって判定するのかちょっと僕もわからないのですが、コード的には下記のような感じになると思います。

    add_filter(
    	'snow_monkey_template_part_render_template-parts/common/head',
    	function( $html ) {
    		// 既存のメタタグを削除
    		$html = preg_replace( '|<meta name="viewport"[^>]+?>|s', '', $html );
    
    		if ( タブレットの場合 ) {
    			// メタタグを追加
    			$html .= '<meta name="viewport" ...省略...>';
    		} else {
    			// それ以外
    			$html .= '<meta name="viewport" ...省略...>';
    		}
    
    		return $html;
    	}
    );
    1
    いいねをした人:
    #130057
    read
    参加者
    13

    ご教授いただきましてありがとうございます。

    私の知識が足りず、どうしても上手くいきません・・・
    お忙しいところ質問を重ねまして申し訳ございません。
    タブレットの場合ではなく、「スマホの場合か、ウィンドウサイズ680以上の場合 」で設定する場合なら、どのようなコードになりますか?

    add_filter(
    ‘snow_monkey_template_part_render_template-parts/common/head’,
    function( $html ) {
    // 既存のメタタグを削除
    $html = preg_replace( ‘|<meta name=”viewport”[^>]+?>|s’, ”, $html );

    if ( スマホの場合か、ウィンドウサイズ680以下の場合に限り ) {
    // メタタグを追加
    $html .= ‘<meta name=”viewport” …省略…>’;
    } else {
    // それ以外
    $html .= ‘<meta name=”viewport” …省略…>’;
    }

    return $html;
    }
    );

    0
    いいねをした人: 居ません
    #130058
    read
    参加者
    13

    以下の箇所、誤記でした、失礼いたしました。

    >>タブレットの場合ではなく、「スマホの場合か、ウィンドウサイズ680以上の場合 」で

    訂正:
    「スマホの場合(ウィンドウサイズ680以下の場合 )」と、「それ以外」で、viewportを分けたいです。

    0
    いいねをした人: 居ません
    #130063
    アバター画像キタジマ タカシ
    参加者
    2371

    スマホ&タブレットかどうかの判定は WordPress に wp_is_mobile() という関数があるのでそれが使えそうです。

    「ウィンドウサイズ680以上の場合」というのは PHP では無理だと思うので、やるとすれば JavaScript でやることになるのかな?という気がします。

    ただ、それはそれで意図せぬ不具合を生みそうなので、個人的にはあまり複雑なことはやらないほうが良い気がします…。

    1
    いいねをした人:
    #130097
    read
    参加者
    13

    お世話になります、お忙しいところサポートいただきまして誠にありがとうございます。

    以下のjsを読み込むことで叶いました!

    以下をmy Snowmonkeyに記述して読み込んでいますが、もう一つアニメーション系のjsを読み込みたく、jsを複数読み込むためにはどう記述しますか?

    add_action('wp_enqueue_scripts', 'msm_enqueue_style_script');
    function msm_enqueue_style_script()
    {
    	/* js読み込み */
    	wp_enqueue_script(
    		'msm_scripts',
    		MY_SNOW_MONKEY_URL . '/js/viewport.js',
    		['jquery'],
    		filemtime(MY_SNOW_MONKEY_PATH . '/js/viewport.js'),
    		true
    	);
    }
    0
    いいねをした人: 居ません
    #130112
    アバター画像キタジマ タカシ
    参加者
    2371

    以下をmy Snowmonkeyに記述して読み込んでいますが、もう一つアニメーション系のjsを読み込みたく、jsを複数読み込むためにはどう記述しますか?

    WordPress で js ファイルを読み込むためには wp_enqueue_script() を使用します。

    今は msm_enqueue_style_script() の中で wp_enqueue_script() を使い msm_scripts という識別名で MY_SNOW_MONKEY_URL . '/js/viewport.js' を読み込んでいますよね? なのでそれをコピペして、識別名を適当なものに書き換え、読みたいファイルのパスを記述すれば良いです。詳しくは↑のリンクに詳細が書いてあるので確認してみてください!

    1
    いいねをした人:
    #130188
    read
    参加者
    13

    2つのjsファイルを読み込めましたー!ありがとうございます!
    丁寧に教えていただき本当に助かりました。ありがとうございます。
    今後ともよろしくお願い申し上げます。

    1
    いいねをした人:
10件の投稿を表示中 - 1 - 10件目 (全10件中)
  • トピック「iPadでもPCと同じ表示にする方法」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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