1. 10%OFFクーポン配信!お得なクーポン番号はこちら2. 期間限定セール800点以上がラインナップ!注目の目玉アイテムはこちら!20%OFF > ふっくら綿混あったか裏起毛長袖パジャマ20%OFF > ふわふわトイレマット・フタカバー(単品・セット) 【選べる7色×11タイプ】20%OFF > 使いはじめからしゃりふわの今治タオル[日本製]30%OFF > ダウンとボアのあったかルームブーツ対象商品をすべて見る3. ホットコット((あったかインナー))のまとめ買いで最大20%OFF 3~4点 5%OFF 5~9点 10%OFF 10点以上 20%OFFホットコットま...
東京ガス株式会社が展開する新電力「東京ガスの電気」では、 基本プラン(従量電灯B・Cから切り替えの方) ずっとも電気3(低圧電力から切り替えの方) を新規で契約をおこなうと、電気代の基本料金が3か月無
エヌ・ティ・ティ・コミュニケーションズ株式会社(本社:〒100-8019 東京都千代田区大手町2-3-1 大手町プレイスウエストタワー)が展開する、格安SIM・格安スマホの 「 OCN モバイル ON

WordPress Related Posts スマートフォンでの表示を2列にする方法

入会金・年会費無料!ミッキーマウス / トイ・ストーリ デザイン イオンカード

WordPress Related Postsで関連記事を表示させる時にLayout(レイアウト)を Vertical (Large)にした場合、PCでは4列で表示されますが、スマートフォンでは機種によて2列になったり1列になったりしてしまいます。スマートフォンでの表示を2列にする方法です。

プラグインが更新されてしまった場合に困らないようにのするための素人のメモですので、CSSを変更・追加する場合は、自己責任でお願いいたします。

WordPress Related PostsのCSSにコードを追加する

 

レイアウトのCSSは管理画面では編集できません。サーバーのファイルマネージャからWordpress Related PostsのCSSを変種します。

  1. public_html
  2. wp-content
  3. plugins
  4. wordpress-23-related-posts-plugin
  5. static
  6. themes
  7. vertical.css

から編集します。

最後に以下のコードを追加します。

@media screen and (max-width: 380px) {
ul.related_post li img {
 display: block !important;
 width: 130px !important;
 height: 130px !important;
 max-width: 100% !important;
}
 ul.related_post li {
 display: inline-block !important;
 width: 130px !important;
 clear: both !important;
 }
 ul.related_post li a:nth-child(1) {
 float: left !important;
 }
 ul.related_post li a:nth-child(2) {
 font-size: 14px !important;
 }
}
ul.related_post li .wp_rp_category a {
 display: inline !important;
}

@media screen and (max-width: 480px)では、480px以下のスマートフォンは2列で表示されますが画像が150pxあるので、おそらく5インチ以下のスマートフォンでは関連記事が150pxの画像で1列になり下に長く表示されてしまいます。

これを回避するためにもう一段階、380pxの場合のコードを付け足しました。おそらくこれでスマートフォンのサイズが違っても関連記事は2列で表示されると思います。

本日の注目記事はこちら



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です