JINカスタマイズ 2カラムボックスの表示をスマホ・タブレットでも2カラムにする

@hituji_1234 さんのWordpressテーマJINの、

JINの2カラムボックスは、
PCでは2カラム、スマホ、タブレットでは1カラムで表示されますが、
スマホとタブレットでも2カラムのまま表示されるように変えました。

はるまき

固定ページをトップページにして、カテゴリー別のおすすめ記事を2カラムボックスを使って配置すると、スマホで見た時に1カラム表示だと、縦に長くなりすぎるからです。

カスタマイズの結果、このようになりました。

上の動画の、最初の部分＝新着記事　はプラグインを使っているので1カラム表示です。
2カラムボックスの周りの色はcssを使った別のボックスです。

カスタイマイズは自己責任で行ってください。
また、実行前にバックアップを取り、トラブルがあったら元に戻せるようにしておくことをお勧めします。

(adsbygoogle = window.adsbygoogle || []).push({});

スマホ、タブレットで2カラム表示にするためにやること
2カラムボックスをスマホ、タブレットでも2カラム表示する手順
まとめ

スマホ、タブレットで2カラム表示にするためにやること

子テーマjin-childのstyle.cssか、外観＞カスタマイズの追加cssに、変更に必要なCSSコードを追加します。

JINのstyle.cssを直接編集しても、やりたいことは実現できますが、JINをアップデートする際に、元に戻ってしまい、管理が大変です。
子テーマjin-childのstyle.css　または　追加CSSを使いましょう。

jinchildのstyle.cssか、追加cssで、

@media (max-width: 767px)と@media (min-width: 768px) の、

display: block;　→　display: flex;

width: 100%;　→　width: 49.2%;

となるような記述を追加します。

また、もともとの2カラムボックスは、ボックス同士の余白が大きいので、margin-bottom、margin-top　の数値を変更して調整します。

JINの2カラムボックスを、複数の場所で使っている場合にこの変更をすると、すべての場所の表示が変わります。

2カラムボックスをスマホ、タブレットでも2カラム表示する手順

jinchildのcssに、次のコードを入れました。
jin-3columnには影響しないようにしています。


/*-----------------------
カラム分けカスタイマイズ
------------------------*/
@media (max-width: 767px) {
  .jin-2column{
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px; } }
    
@media (min-width: 768px) {
  .jin-2column{
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px; } }

@media (min-width: 1200px) {
  .jin-2column {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px; } 
    }

.jin-2column .color-button01,
.jin-2column .color-button02 {
  margin-top: 5px; }
  @media (min-width: 768px) {
    .jin-2column .color-button01 a,
    .jin-2column .color-button02 a {
      padding-left: 40px !important;
      padding-right: 40px !important; } }

@media (max-width: 767px) {
  .jin-2column-left,
  .jin-2column-right {
    width: 49.2%;
    padding: 5px;
    margin-bottom: 5px; } }
    
@media (min-width: 768px) {
  .jin-2column-left,
  .jin-2column-right {
    width: 49.2%;
    padding: 5px;
    margin-bottom: 5px; } }
    
@media (min-width: 1200px) {
  .jin-2column-left,
  .jin-2column-right {
    width: 49.2%;
    padding: 10px; 
    margin-bottom: 10px;
    } }

カスタイマイズのために子テーマのstyle.cssや追加cssに記述を追加したときには、何の記述なのか後から分かるように、
コメントアウトでタイトルやメモを書いておきましょう。

はるまき

カスタイマイズしたけれど、サイトを見ても変わっていない、というときは、ブラウザのキャッシュをクリアしてください。