アミアンインターナショナル

貴社の売り上げアップをとことん支援します。オンラインショップ専門コンサルタント

CMS css javascript 新着情報

jetpack関連記事の数を増やす  ⇒ STINGER8設定その10

投稿日:2019年5月4日 更新日:

jetpack関連記事は3個

デフォルトでは、jetpackが出力する関連記事は3個だ。

これを6個に増やす。

まずfunctions.phpに、次のコードを追加。

//関連記事数変更
function jetpackme_more_related_posts( $options ) {
$options['size'] = 6;
return $options;
}
add_filter( 'jetpack_relatedposts_filter_options', 'jetpackme_more_related_posts' );

モバイル対応

これで関連記事数は6個に増えたが、モバイル環境で見ると2個-1個-2個-1個という表示になってしまう。

これはjetpackでfloatがclearされているためだ。

調べてみると、下記の指定がされている。

.jp-relatedposts-post:child(3n+4) {
clear: both;
}
.jp-relatedposts-post:nth-child(3n) {
clear: left;
}

これを打ち消すために、cssを上書きする。

こちらを参照させてもらった。

モバイル対応なので、IEに対応する必要はないのでこれで問題ない。

[WordPress]Jetpackの関連投稿(関連記事)の表示数を増やしたりCSSで調整するCSSでなるべくカラム落ちしないよう調整します。以下のコードをテーマのCSSに貼り付けます。flexboxを使用しているので、古いIEには対応していません。

(確認したブラウザはWindows, Mac各々のIE11, Edge, Chrome, Firefox, safariです。iPhoneやAndroidでも確認しました)

[WordPress]Jetpackの関連投稿(関連記事)の表示数を増やしたりCSSで調整するから引用

body #jp-relatedposts .jp-relatedposts-items {
display: flex;
flex-wrap: wrap;
margin-right: -3.4005%;
}

body #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post {
float: none;
width: 46.5994%;
margin-right: 3.4005%;
margin-bottom: 24px;
padding-right: 0;
}

body #jp-relatedposts .jp-relatedposts-post-thumbs > .jp-relatedposts-post-a {
display: block;
margin-bottom: 8px;
}
@media only screen and (min-width: 48em) {
body #jp-relatedposts .jp-relatedposts-items {
margin-right: -2.1072%;
}

body #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post {
width: 31.226%;
margin-right: 2.1072%;
}
}

これでよし。

-CMS, css, javascript, 新着情報
-, , ,

執筆者:

関連記事

HDMIケーブル

HDMIケーブルにて価格破壊を考える

11月の話で恐縮だが、テレビを買った。 ご多分に漏れず、エコポイントを意識して駆け込みで購入したのだ。 ところが、その時点でテレビの納期が1ヶ月先とのこと。 そりゃあないでしょ! という気持ちになった …

レスポンシブ対応

メニューとフッターのレスポンシブ対応css装飾 ⇒ STINGER8設定その12

見出しと同じイメージを使う H2タグの装飾とイメージを同じにするため、メインメニューとフッターの背景画像を設定する。 H2タグを修飾 ⇒ STINGER8設定その9 最初は単純に背景画像を設定するだけ …

before

カテゴリーのデザイン-サイドバーメニューの成形(3) ⇒ STINGER8設定その5

カテゴリーが長すぎる サイドバーのカテゴリーだが、項目数が多すぎて縦にやたら長くなってしまう。 そこで、第一階層をリストにして第二階層はボタンにして並べることにした。 まず、第二階層をボタン化 .ca …

H2タグ

H2タグを修飾 ⇒ STINGER8設定その9

H2タグの設定 サイドバーのデザイン設定はひとまず終えたので、コンテンツエリアの設定を始める。 まず気になっていたのが、H2のバランスが悪いことだ。 STINGER8のデフォルトでは、上下にsolid …

Dropboxから乗り換えるべき? トレンドマイクロの容量無制限オンラインストレージ「SafeSync」の実力は?

Amplify’d from trendy.nikkeibp.co.jp SafeSyncの最大の魅力は、年間4980円を支払えば保存容量が無制限という点だ。普段、Dropboxを使いながら「保存容量 …