【THE THOR】 ipad proで縦閲覧だとPC表示の2カラム→スマホ表示の全体表示に変更させるには

ブログ

WordPressの有料テーマであるTHE THORは、レスポンシブデザインを導入しており、
「どんな端末で閲覧しても最適な表示になる」というのが売りです。

おおむね、このセールストークはあっているのですが、
実はTHE THORのテーマをipadで表示した場合、
縦にするとPC表示の2カラムになってしまう事が不満でした。

私が保有しているのはipad pro(9.7インチ)です。
このipadで自分のブログを閲覧した時、PC表示の2カラムになっていますのでコンテンツ部分が狭くなり、
Amazonなどの広告boxが記事部分からはみ出て見えたり、色々と不具合がある事が判明しました。

他のブロガーさんのブログを見に行って、
AFFINGERとSANGOのテーマを使用しているブロガーさんのブログは、
私のipadで見てもスマホ表示の、いわゆる画面いっぱいにコンテンツ記事が表示される仕様であり、
ipadのタブレットで見てもストレス無く読むことが出来ます。

ところが、THE THORで構築されているブロガーさんのブログは、
私と同じように2カラム表示になってしまい、やはりコンテンツ部分を読むとなるとかなり見にくく、
「これじゃせっかくipadで訪れてくれた人は離脱するだろうな」と感じました。

みつぼし

せっかくブログに訪れてくれても、コンテンツが見にくければ直帰されちゃうわよね…

THE THORのテーマを購入した人だけが参加できるフォーラムでは、
同じようにipadでの表示を変更したい人の質問が書き込まれていたのですが、
回答は「表示に関することなのでプロに頼んだ方が無難」という回答しかなく、解決策の提示がありませんでした。

Google先生にもかなりのキーワードで検索してみたのですが、
決定的な情報には行きつかず、自分でCSSの勉強をしていじってみたのですがうまくいかず、
かなり試行錯誤を行った結果、

自分のブログもちゃんとipad用のレスポンシブに対応できる方法に辿り着けましたので、その忘備録としてこの記事を残しておきます。

1 カスタマイズ失敗談　THE THORのブレークポイント
2 THE THOR　iPadを縦にした時スマートフォンのようにコンテンツを画面いっぱいに広げるカスタマイズ
3 まとめ

カスタマイズ失敗談　THE THORのブレークポイント

レスポンシブデザインにするためには、CSSでブレークポイントの記述をしてあげることで可能です。
そこで考えたのは、
「THE THORのCSSに記述されているブレークポイントの数値を変更してあげれば変わるだろう」
と単純に考えました。

THE THORの親テーマのCSSをそのままのぞいてみると、

@media only screen and (max-width: 768px) {.CSSクラス名 {
}
}

@media only screen and (max-width: 992px) {.CSSクラス名 {
}
}

@media only screen and (max-width: 1136px) {.CSSクラス名 {
}
}

との記述が。

そのうちのこの部分、↓注目。

@media only screen and (max-width: 768px)

この記述の意味は、768ピクセル以下の場合は以下の記述に従う、
という意味ですから、この「768」の数字を、広げてあげればいい
と考えました。

で、実際、親テーマのCSSをそのまま編集して変更ボタンを押したんですが、
画面はまったく変わりませんでした。

これ、画面が全く変わらなかった理由は、
どうやらTHE THORの親テーマのそれぞれのファイルは、

wordpress編集画面での変更ボタンを押しても
勝手にファイルがデフォルトのファイルに書き換えられてしまうらしく、
この方法では変わらないらしいのです。

THE THORの親ファイルを変えたい場合は、子テーマに親ファイルのコピーを移してあげて、
子テーマに移したファイルを編集する必要があるようです。

または、THE THORにはカスタマイズ用の「追加CSS」の編集画面がありますよね。
ここに記述してあげなきゃ意味がないってことなんですね。

早く言ってよ…

これ、めちゃくちゃ基本のところでつまずいてたってことです。

ちなみに、このことに気づけたきっかけは、
Twitterで泣きついたところ、めちゃめちゃ親切に教えてくださった旅ブロガーさんがいらっしゃいまして。
この方のブログではTHE THORのカスタマイズについて
大変役に立つことをブログに掲載してくださっているのでシェアします。

10to1 Blog

旅するブログ運営

「旅して暮らすブログ運営」を分かりやすく解説していきます。…

THE THOR　iPadを縦にした時スマートフォンのようにコンテンツを画面いっぱいに広げるカスタマイズ

では、気を取り直して追加CSSに下記の記述を加えます。

/*サイトカラム*/
@media only screen and (min-width: 992px){
.l-wrapper {
max-width:1450px;
margin-top: 0px;
}
.container{
max-width:1450px;
margin-top: 0px;
}
.l-main {
width:68%;
padding-right:50px;
padding-left:50px;
}
.l-sidebar {
width:30%;
}
/*１カラムの時の幅*/
.l-main-wide{
width:80%;
margin-right:auto;
margin-left:auto;
}
}

/*サイトカラム タブレット*/
@media only screen and (min-width: 768px) and (max-width: 992px){
.l-sidebar {
display:none;
}
.l-main {
width:100% ;
}
/*１カラムの時の幅*/
.l-main-wide{
width:80%;
margin-right:auto;
margin-left:auto;
}
}