キャンペーン もっとみる エルピオでんき 切替は簡単! エルピオでんきへのお申し込みは、WEB(パソコン、スマートフォン)または、電話でおこなえます。 現在契約して...
ニュースリリース もっとみる OCN モバイル ONE もっとみる 楽天モバイル もっとみる Y!mobile もっとみる UQmobile もっとみる mineo NTT ドコモ と比較 au と比

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: 480px)では、480px以下のスマートフォンは2列で表示されますが画像が150pxあるので、おそらく5インチ以下のスマートフォンでは関連記事が150pxの画像で1列になり下に長く表示されてしまいます。

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

本日の注目記事はこちら



コメントを残す

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