ブログ運営

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


JINカスタイマイズ 2カラムボックス

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

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

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

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

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

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

スマホ、タブレットで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に記述を追加したときには、何の記述なのか後から分かるように、
コメントアウトでタイトルやメモを書いておきましょう。

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

まとめ

のんくら本を読んで、トップページが、サイト風になるように、
固定トップページを設定し、レイアウトには2カラムボックスを使っていたのですが、

スマホだと1カラムになるのが、かえって見づらいかな?と思い、
カラム分けのcssを変更しました。

別サイトでも同じカスタイマイズをしていますが、
トップページから他ページへのアクセスも増えたようなので良かったのではないかと思います。

<スポンサーリンク>


この記事のURLをコピーする
footer.php