🕌
Luxeritasで狭いウェブサイトの幅でも2カラム表示
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