サポート » テーマ » PC上では投稿が2列、スマホでは1列で表示させたい。

  • if ( have_posts() ) {
    
    	// Load posts loop.
    	while ( have_posts() ) {
    		the_post();
    
    		get_template_part( 'template-parts/content/content', get_theme_mod( 'display_excerpt_or_full_post', 'excerpt' ) );
    	}
    
    	// Previous/next page navigation.
    	twenty_twenty_one_the_posts_navigation();
    
    } else {
    
    	// If no content, include the "No posts found" template.
    	get_template_part( 'template-parts/content/content-none' );
    
    }

    テーマは、Twenty Twenty-Oneテーマをベースにしております。

    投稿にて追加したものを、上記コードでサイト上に表示させている?現在縦に1列で表示されています。

    これを、PC上では投稿が2列で表示される。スマホでは1列に表示されるように変更したいのですが、何をどのように変更すべきかご教授いただけますと幸いです。

    • このトピックはtojhoが9ヶ月、 4週前に変更しました。
1件の返信を表示中 - 1 - 1件目 (全1件中)
  • 
    if (wp_is_mobile()) {
        /* モバイルは1列 */
        while(have_posts()) {
            中央に表示する処理
        }
    }
    else {
        /* PCは2列 */
        while(have_posts()) {
            if (have_posts()) 左に表示する処理
            if (have_posts()) 右に表示する処理
        }
    }
    

    文書のまま受け取るとこうなると思います。

    クライアントがモバイルかどうか判断しているのは、テーマによるので、テーマごとに判定方法が違うこともあるかと思いますが、共通では、wp_is_mobileという関数があります。

    けれども、CSSのみを利用して、横幅のピクセル数をチェックして、1列にするか2列にするか、表示を変える方法でもいけると思います。

    横幅のピクセル数は、テーマごとに異なります。

    レスポンシブ的には、PCでブラウザを幅を変化させた場合にも追従する必要があるので、CSSで対応されるほうがよいのではないでしょうか。

    検索するとしたら、「表 1列 2列 css 画面幅 display block width 100 %」などでしょうか。

    簡単にいうと、「thとtdにdisplay:block;とwidth:100%;を」というページが複数ヒットします。

    • この返信は9ヶ月、 3週前にsyntaroが編集しました。
    • この返信は9ヶ月、 3週前にsyntaroが編集しました。
1件の返信を表示中 - 1 - 1件目 (全1件中)
  • トピック「PC上では投稿が2列、スマホでは1列で表示させたい。」には新たに返信することはできません。