🕌

Luxeritasで狭いウェブサイトの幅でも2カラム表示

2024/04/18に公開

wordPressのテーマのLuxeritasを使ってウェブサイトを制作していますが、ウェブサイトの幅を930pxでサイドバーと記事を並べて表示できるように工夫する必要に迫られてコードを作りました。
最近はリテーナディスプレイの関係で、ディスプレイの解像度が上がり横幅が広がりました。
それに伴いwordPressの横幅も2カラムの場合は、1280pxがディフォルトとなっていることが多いと思います。
Luxeritasも、1280pxがディフォルトの横幅となっています。
今回は、930pxで2カラムを実現しました。
このコードは、各自の環境に合わせて、カスタマイズが必要です。

@media screen and (min-width: 930px) {
    body .home .page-template-default .page page-id-24 .logged-in admin-bar .wp-embed-responsive .customize-support {
        max-width: 930px;
    }
	

	#primary, body #field {
		display: flex;
		max-width: 930px;
		justify-content: flex-end;
	}

    main #main, body #core {
        display: flex;
        flex-direction: row;
        /* メインエリアの最大幅を730pxに設定し、サイドバーとの合計が930pxになるようにします */
        max-width: 730px; 
		    }

    #sidebar {
        /* サイドバーの幅を200pxに固定 */
        flex: 0 0 200px;
        width: 200px;
    }

    article {
        flex: 1;
    }

	#pnavi .grid {
		max-width: 730px !important;
	}
}

@media screen and (min-width: 1200px) {
	main #main {
		max-width: 730px !important;
	}
	
	#pnavi .grid {
		max-width: 730px !important;
	}
}

メディアクエリのmin-width: 1200pxは、不要かもしれないです。
またページネーションの#pnavi .grid は、このままでは、効果が出なかったです。
この部分は、クラス名などの特定の資料になるように残して掲載しました。

Discussion