読者です 読者をやめる 読者になる 読者になる

Take it easy!~札幌在住アフィリエイターのメモ~

札幌在住の専業アフィリエイターのただの日記です。気になったこと、疑問に思ったことをつらつらとメモしています。

AFFINGER3のレスポンシブデザインをほんの少し見直した

無料Wordpressテンプレート、AFFINGER3を使用している方は多いと思いますが、スマホでの表示もチェックしていますか?

私のスマホはiphone6だったのですが、先日車のドアに思い切りはさんでしまい、顔にジャストフィットするくらい曲がってしまったので、iphone6sの大きいヤツに買い替えました。

余談ですが、それ、ipadの128Gよりも高いんですよね。

おかげさまで本来ノートPCを見に行ったのに、買えませんでした。

と言うワケで、スマホを変えたわけですが、こんな現象が起きています。

 

私のサイトでは、記事を横に2分割できるようなショートコードが使えるように設定しています。

レスポンシブではそれが縦1列になるように細工をしているのですが、新しいスマホでは画面が大きいせいか、2分割されたまま表示されています。

これを1列に表示されるようにしようと思い、こんな部分を変更してみました。

 

/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (min-width: 640px) {

 

赤文字の部分はノーマルでは414pxとなっています。

これを640pxへ変更。

ただこれだけです。

 

この現象は、私がこだわって作っているサイトだから起こったことなので、他の方は特に使うことが無い情報ではないかと思いますが、一応メモとして残しておこうと思います。