SANGOカスタマイズ – iPad miniで見た時のレイアウトを、2カラムから1カラムに変える方法

iPad miniで見た時のレイアウトを、2カラムから1カラムに変える方法

WordPressテーマ「SANGO」のカスタマイズ、第4弾は「レイアウトをiPad mini用に最適化する方法」について。

2019年12月22日 追記

2019年12月18日にリリースされた「SANGO 2.0」より、iPadで見た際のレイアウトが1カラムに変更となりました。

「SANGO 2.0 以上」のバージョンを利用している方は、この記事に書かれた方法を実行する必要はありません。iPadでも見やすいよう、既に最適化されているので。

—- 追記ここまで —-

これより下は、SANGO 2.0未満のバージョンを利用している方向けの内容です。

SANGOをお使いの方、「iPad mini」でサイトを確認したことがありますか?

↓「iPad mini」でサイトを見るとこんな感じです。

iPad miniで見た時のレイアウト

パソコンと同じ2カラム表示なんですよねー。なんで、めっちゃギュウギュウ。詰まってます。(単純に読みづらい…)

 

なんなら、レイアウト崩れを起こしている箇所もあったりして、視認性だけではなく、見た目的にもアウト。

レイアウトが崩れている

 

なので、2カラムから1カラム表示に変更しました。

2カラムから1カラムに変更

 

方法はとても簡単。

まず、子テーマ「sango-theme-child」フォルダの中にある「style.css」にコードを記述します

style.cssにコードを記述

↓記述する内容は以下の通り

これで、「iPad mini」でサイトを見た時、1カラムで表示される様になります。

ぼく
iPad Pro(10.5インチ)なら2カラムでも問題ないかと思いますが、さすがにiPad mini(7.9インチ)で2カラムはキツイです。特に記事ページの読みづらさたるや…

まぁ、iPad miniでブログを見てる人がどれ位いるのかって話ですが(笑)  改善するにこしたことはないかと。

そんな感じで。終わりッ!

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください