マテリアルぽっぷ

はてなブログテーマ「マテリアルぽっぷ」のデモサイト。最新カスタマイズ情報やバグの修正情報など掲載していきます。

PC版TOPページを記事のみ3カラムから、メニュー有りの3カラムに変更する方法

f:id:mamegoro:20180613162302j:plain

この記事ではPC版TOPページを記事のみ3カラムメニューから、メニュー有りの3カラムに変更する方法をご紹介します。

なんだか文章だと伝わりにくいので、図解すると以下のような感じです。

f:id:mamegoro:20180713133454j:plain


以下のコードをデザイン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;
}
}

あまり検証していないので、もし崩れたらごめんなさい。