wordpress テーマ「border」のブレイクポイントを変更する。

テーマ「border」のカラムのブレイクポイントを変更する。

borderは記事一覧ページ（カテゴリやアーカイブ）で３種類のカラムに変化する。

元の設定は

1カラム
@media screen and (max-width: 1149px)
2カラム
@media screen and (min-width: 1150px) and (max-width: 1680px)
3カラム
@media screen and (min-width: 1681px)

これをiPadなどで見たときに横位置で2列になるようにして、pcでは大体3列になるように変更する。

1カラム
@media screen and (max-width: 1023px)
2カラム
@media screen and (min-width: 1024px) and (max-width: 1400px)
3カラム
@media screen and (min-width: 1401px)

記事一覧のボックスのサイズの調整を試みる。

記事一覧の時にborderではサムネイル画像の大きさが固定なのでそれを多少小さくしてレイアウトの崩れを調整する。

/* ---------------------------------------------
ボックスの整形
------------------------------------------------ */
.article__container {
height: 302px;
}
/* サムネイル整形 */
.article__thumb {
width: 240px;
height: 297px;
}
/* テキスト要素の整形 */
.article__info {
padding-left: 250px;
}
.article--blog-split .article__title {
padding-bottom: 0px;
}
/* 日付・カテゴリー整形 */
.article--blog .article__meta-footer {
left: 250px;
}
.article__info .article__meta-footer {
padding-top: 0px;
}
.article__meta-footer .grid {
margin-left: -18px;
margin-bottom: -36px;
}

スマホのタテ表示時のレイアウトが崩れるので修正。

メディアクリエで600px以上で読み込むようにする。

/* ---------------------------------------------
ボックスの整形
------------------------------------------------ */
@media screen and (min-width: 600px) {
.article__container {
height: 302px;
}
/* サムネイル整形 */
.article__thumb {
width: 240px;
height: 297px;
}
/* テキスト要素の整形 */
.article__info {
padding-left: 250px;
}
.article--blog-split .article__title {
padding-bottom: 0px;
}
/* 日付・カテゴリー整形 */
.article--blog .article__meta-footer {
left: 250px;
}
.article__info .article__meta-footer {
padding-top: 0px;
}
.article__meta-footer .grid {
margin-left: -18px;
margin-bottom: -36px;
}
}

/* ヘッダーフッター固定 */
.fixed-bar {
position: fixed; }
@media only screen and (max-width: 899px) {
.fixed-bar {
position: fixed; }
.fixed-bar.horizontal-bar.top-bar {
position: fixed; }
.page__wrapper {
padding: 12px;
margin-top: 30px; }
.top-page-50 {
width: 100%; }
}

@media only screen and (min-width: 900px){
.article-navigation .navigation-item--previous .arrow {
float: none; } }