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用のレスポンシブに対応できる方法に辿り着けましたので、その忘備録としてこの記事を残しておきます。
カスタマイズ失敗談 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のカスタマイズについて
大変役に立つことをブログに掲載してくださっているのでシェアします。
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;
}
}
できたー！
まとめ
いかがでしたか。
これで今のiPadのような少々大きめのタブレットで閲覧しても
スマホで閲覧する時のように横幅いっぱいに記事部分を広げることが出来ました。
THE THORのテーマはデザインセンス的にはちょっとダサメといいますか、
iPadのレスポンシブデザインに対応してない時点でダメでは…？
と思ったんですけど、何とかフォロワーさんの助けもあり解決出来ました。
そしてTHE THORの開発者さん、まじでこの辺改良してください。(真顔)
けどTHE THORのテーマはSEOに強いし、SEO的な細かい設定が出来るので
この先も頑張ってほしいです、運営側には。
以上、私のようにかなり初歩的なことで悩んでる方の一助になれば幸いです。
