らっきーネットチャンネル

とりあえず気になったことをなんでも書くブログ

ネット初心者卒業第一歩~スマホ画面のプレビュー~

皆さん、おはこんばんにちは!もう早くも五個目の記事になりましたこのブログですが、まーだまだ頑張っていきますよ~。

 

さて前回は、『プライバシーポリシー』について詳しく説明していきました!↓の方に前回の記事を乗せておくので、もし良かったら見てください!

 

www.netbeginner.net

 

そして今回は、私がブログを投稿していく中で最も苦戦をした『スマートフォンのプレビュー』について説明していきます...。

 

 

 

スマホとパソコンで見え方が違う!?

 

皆さんはこういう経験はありませんでしたか?

 

『ブログのデザインを決めたのに、スマートフォンで見ると全くデザインされてない!?』

 

『デザインはされたけど、なんだか画面ががたがたになってる?!』

 

ちなみに私はほぼこれのせいで、ブログ作りを一回挫折しています。なので今までの思いも込めつつ説明します。

 

まずなんでこんなことが起こるのか?理由は簡単で、スマホとパソコンのデザイン入力するところが別々にあるからです。

 

f:id:summii99146:20181030163726p:plain

 

しかもご丁寧にデフォルトでは、『スマートフォン別に設定する』にチェックされているために、ここに気付かなかった当時はひたすら見当違いのカスタマイズを、ずっとしていました。

 

初心者にお勧めのレスポンシブデザイン

 

では「一からまたデザインのHTMLを打ち込まないといけないのか?」と思った人もいるかもしれませんが、実はそんなことをしなくても簡単にできる裏技があるのですよ!

 

その名も...『レスポンシブデザイン』!!

 

...既に見出しで見たと思いますが、これはとてつもなく便利な機能ですよ!!!

 

なんとこれをするだけで、スマートフォンの画面デザインがパソコンと同じに出来ますし、しかも手順もボタン一つで出来ます。

 

やり方は「デザイン設定」→「スマートフォン」(スマホマークのやつ)→「詳細設定」→「レスポンシブデザイン」にチェックするだけ。

 

多分これはかなり簡単に出来るはずです。しかしこの簡単な「レスポンシブデザイン」にもデメリットが一つだけあります...。

 

それは『一部』のデザインに対応してないことです。

 

万能ではないレスポンシブデザイン

 実は『レスポンシブデザイン』をチェックするところにこう書いてあります。

 

スマートフォンでもPCと同じデザイン設定でブログを表示します。レスポンシブデザインのテーマを設定しているときのみ使用してください。

 

 ん?『レスポンシブデザイン』のテーマ?どういうこと?と思った人もいるでしょう。

 

簡単に言いますと、『一部デザインしか対応しません!』というわけです。

 

そして対応しているデザインは...↓のサイトに詳しく書いてありますので参考にしてみてください。

 

happylife-tsubuyaki.hatenablog.com

 

まとめ

 

今回は知ってて便利な機能である『レスポンシブデザイン』について色々書いて見ました。

 

テーマデザインごとにレスポンシブデザインが対応しているかどうかは、分からないのでその都度確認するのがいいでしょう。