PC上では投稿が2列、スマホでは1列で表示させたい。

  • tojho

    (@tojho)


    1年、 7ヶ月前

    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が1年、 7ヶ月前に変更しました。
1件の返信を表示中 - 1 - 1件目 (全1件中)
  • syntaro

    (@syntarou)

    1年、 7ヶ月前

    
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%;を」というページが複数ヒットします。

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