PC版TOPページを記事のみ3カラムから、メニュー有りの3カラムに変更する方法
この記事ではPC版TOPページを記事のみ3カラムメニューから、メニュー有りの3カラムに変更する方法をご紹介します。
なんだか文章だと伝わりにくいので、図解すると以下のような感じです。
以下のコードをデザインCSSにコピペするだけ。
.page-index .enable-top-editarea .page-archive #wrapper, .page-archive #wrapper {
width: 70%;
}
.page-index .enable-top-editarea .page-archive #box2, .page-archive #box2 {
width: 30%;
}
.page-index .enable-top-editarea .page-archive #box2-inner,.page-archive #box2-inner {
grid-template-columns: 1fr;
margin-left: 25px;
}
.archive-entries {
grid-template-columns: repeat(2, 1fr);
}
@media screen and (max-width: 1200px){
.page-index .enable-top-editarea .page-archive #wrapper, .page-archive #wrapper {
width: 100%;
}
#box2 {
width: 100% !important;
margin: 0 !important;
}
#box2-inner, .page-index .enable-top-editarea .page-archive #box2-inner, .page-archive #box2-inner {
grid-template-columns: repeat(2, 1fr) !important;
display: grid !important;
grid-gap: 25px !important;
margin: 0 !important;
}
}
@media screen and (max-width: 768px){
#box2-inner, .page-index .enable-top-editarea .page-archive #box2-inner, .page-archive #box2-inner {
grid-template-columns: 1fr !important;
}
.archive-entries {
grid-template-columns: 1fr !important;
}
}
あまり検証していないので、もし崩れたらごめんなさい。