【ブログ】PC-スマホの画面表示〜今度こそ挫折しない会社員のすきま時間BLOG〜

ブログ運営

本記事のテーマ：
PCとスマホのレイアウト表示を適切に設定したい！

まいど！今年こそブログ作りをやり遂げたいおこめちゃんです！

ブログは作れたものの、レイアウトをもう少し凝りたい・・ここにボタン作りたい・・

と欲が出てきて苦戦している最近です(>_<｡)

もう少し頻度上げていい記事を更新できるよう頑張るぞ！

ということで今日は

「ブログにおけるPC-スマホ間でのレイアウトの差を調整する」について書いていきます！

PCで書いたブログをスマホで確認すると、あれ、、？　気になったことはありませんか？

・アフェリエイト画像が画面からはみ出している

・文字が大きすぎて読みづらい

・画像が大きすぎで全体写ってない

私は実際にこれで困ったのですが、

簡単に調整できたのでここに残しておきたいと思います。

まず基本的に、記事ごとに文字の大きさ・画像サイズを設定する必要はないです。

全体設定でできるので、記事自体は自由に書いてください。

設定方法

１．文字サイズを調整したいなら、テーマ設定を変える OR 追加CSS

２．画像サイズを調整したいなら、追加CSSで設定する

１．文字サイズの調整

テーマ設定＞全体＞文字サイズ　でスマホで閲覧時の文字サイズをすぐ変更できます。

スマホで見るサイズだと、14-16pxが一般的のようです。

ただし記事本文以外の見出しやメニューのフォントサイズは影響を受けないので、

もう少し細かくPC,スマホでの文字サイズを設定したいときは追加CSSを使いましょう！

【CSS参考例】
@media screen and (max-width: 768px) { body{ font-size:14px;  /*好きなサイズに調整*/}}

・・余談・・

記事ごとに変えることもできるんですが、

その場合は記事ごとに「追加CSSクラス」という項目があるので、そこで設定してください！

２．画像サイズの調整

画像サイズがはみ出るのは、画像の最大幅がスマホ画面の幅よりも大きいからなので、

画像のCSSに最大幅を指定することで解決できます！

【CSS参考例】
img{max-width:100%;
height:auto;}

またアフェリエイトのiframeタグを使用している場合はimgの部分をiframeにしたバージョンも追加してみてください♪

最後に設定できているか確認！

・スマホでサイトを開く（管理画面でもOK）

・キャッシュを削除して変更を反映、表示を確認

私はこれで解決しましたので、ぜひやってみてくださいね。

ブログってPCで書く人も多いと思うんですが、投稿後にはスマホでも確認することも大事だということを今回身を以て学びました。

誰でも読めるわかりやすい記事作成を目指して、引き続き精進してまいります！

それでは本日も最後まで読んでくださりありがとうございました ( ´͈ ᵕ `͈ )

コメント