【WordPress】モバイルファースト!モバイル表示をiPhone SEの「4インチ」に合わせてみた!

https://farm6.static.flickr.com/5762/20919637280_707214c8c3.jpg

こんにちは。WordPress初心者の部長ナビ(@nabi_1080)です。日々カスタマイズ頑張っております!

スポンサーリンク

20万PVを達成し、ますますモバイル表示の重要性を感じたけど、何をすれば良いのかわからなかった

【ブログ運営】WordPressで20万PV達成したけど、やっぱりモバイル率と検索流入率がメッチャ高い件
【ブログ運営】WordPressで20万PV達成したけど、やっぱりモバイル率と検索流入率がメッチャ高い件
こんにちは。部長ナビ(@nabi_1080)です お陰様で2016年4月の月間PVが20万PVを達成しました 今回は、そのデータを自分なり...

↑この記事で書いた通り、モバイルアクセスメチャクチャ多いです

まあ、他の方のブログ運営なんかの記事も見たりしますけどだいたいモバイル6〜7割がほとんどですよね。モバイル時代ですな

ただ、「何をすれば良いのか?」というのがわかりませんでした

モバイル表示の見た目を大幅に変える?文字の大きさを調整する?

でも、今、自分のiPhone SEで普通に見れるからなぁと思って、よくわかってなくて、対処もしてませんでした

毎日見ているgori.meに、やはりヒントがあった

やっぱりg.O.R.iさんはスゴいよねえ。

わかりました。何が違うのか、わかりました

それはね、「改行」なんですよ。わかりました。gori.meはですね、iPhone SEでも、PCでも、キッチリ改行が計算されていました

変なところで改行することが無いんです。ちゃんと文節で改行されてる

これは、記事では無く、シェアエリアとか、どのページでも同じ部分ですね。ここの表示がキレイでスッキリしていました

それに対し、ウチは、変なタイミングで改行が多く、見やすいとは言えない仕上がりになっていました

よし、これだ。と思って、頑張って直しました

まず、PC表示を確認

スクリーンショット 2016-05-16 4.12.01

PC表示は、このように、ちゃんと良い感じで改行されています。まあ、表示領域が多いのでそりゃそうだわな

で、コレを見ながら、モバイルを調整しました。多分、今現役で使われているiPhoneで小さいと言われている4インチのiPhone SEでちゃんと表示できれば問題無いはずですので、4インチのiPhone SEを基準に改行を調整しました

モバイルの完成版

IMG_4048

ほら、こんな感じ。

変な改行じゃ無くなったんですよ。気付かないかも知れないけど、全部調整して、少しずつ改行変えて、pタグ入れたり外したりチョコチョコやりました

記事書くよりよっぽど時間かかりますよ、これ。でも頑張りました。そして、4インチでこの表示なので、4.7、5.5インチのiPhoneでもキレイに表示されると思います

イヤー、スッキリした!

まとめ

モバイルでもガンガンアクセスカモン!

あ、そうだ。かなりいじったので、過去記事で紹介しているちゃぼPのコードのそのままだと、この表示にはなりません。ご了承ください

SimplicityでFacebookページの「いいね!」ボックスを設置する方法
SimplicityでFacebookページの「いいね!」ボックスを設置する方法
こんにちは。部長ナビ(@nabi_1080)です 【関連】部長のFacebook本アカウント(友達限定投稿) Facebookページ...

↑いいね!ボックスはこちらからどうぞ。feedlyのボックスは、探したけど無かったので、風の羅針盤で検索してみてくださいね!

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

この記事の関連カテゴリ

サイト内検索