このブログはワードプレスのテーマ 「WING（AFFINGER5）」というテンプレートを使っています。初心者でも使いやすく、デザインセンスはともかく、ひとりでここまで作りこむことができました☆一から作り上げると愛着がわいてくるもので、サイトの管理や更新が楽しくなりますね～！そんなことを考えながら、いつもはパソコンメインでチェックしていたサイトをスマホで見たところ、今頃になって驚愕しました！
右側が見切れてるーーー！！！
いやあ～、これはもう大事件ですよ！文章を読むには都度左右にスクロールしないといけないんですから、途中で読む気が失せて離脱コースです。サイトを立ち上げてだいぶ経っているのにこれは無いよね～、と自分にダメ出し。とにかく早くこれを修正しないと、と思って情報収集をしてもなぜか見つかりません。こういうミスしてる人ってあまりいないんですかね……。試行錯誤しつつ、なんとか解決法がわかったので同じように困っている方のために対処法をメモしておきます。
WEBデザインをレスポンシブにする
レスポンシブとは
パソコンやタブレット、スマートフォンなど、それぞれの画面サイズ幅を基準にサイト表示を調整して、最適に表示すること。
CSSを追加する
ワードプレス「ダッシュボード」→「外観」→「カスタマイズ」→「追加CSS」で、下記の情報をコピペして追加CSSに貼り付けましょう。
@media only screen and (max-width: 959px) {
#contentInner main {
max-width:90%;
margin: auto;
}
これは、メインで表示する部分の幅を90％表示で、中央寄せにするといった設定です。設定をしたら保存して再度スマホを確認してみると……
中央に表示されたーーー！！！
これでストレス無くスマホでサイトを見ていただけます。今まで「なんだこのサイト！文章がはみ出てるじゃないか！」と思っていた方、ごめんなさい！
自分のサイトを作ってみたいという方は「WING(AFFINGER5）」がおすすめです↓
■「WING・ウィング（AFFINGER5・アフィンガー5）」
「カワイイ」から「信頼感」溢れるサイトまで変幻自在の万能テーマ。デザイン簡単、SEO対策と広告収入UPの機能が標準装備。 さらに美しくパワフルに「稼ぐ」に特化したWING - AFFINGER5＠ワードプレス