WordPressで記事を書く時に必ずやることがあります。
そう!改行(Shift+Enter)です!

適切に改行を挟むことで文章の見栄えや見やすさを整えます。

ですがこの改行は、パソコン画面でなくスマホ画面で見ると…。
変なところで改行されていて逆に見栄えが悪くなっていまいます。

なので!CSSをカスタマイズしてスマホ画面で見た時は、
いっその事改行を省略してしまいましょう!

スポンサーリンク

Diverの子テーマで<br>タグを編集

スマホ画面では<br>タグを省略するコードを、
Diverの子テーマに書き込みましょう。

 

<br>タグというのは改行を表すタグです。
Shift+Enterで改行をすると自動的に入ります。

この<br>タグをスマホ画面では表示しないようにしますよ!

 外観 → テーマの編集 → diver_child → スタイルシート (style.css)

記事スペースに余白を作る」でも紹介しましたが、
スマホでの処理を指定するには以下のコードを書き込みます!

/* !!スマホの設定!! */
@media screen and (max-width:599px){

   /* ココにスマホ画面の時のCSSを記入 */

} /*スマホの設定ーここまで*/

この中(ココにスマホ画面の部分)にコードを記入することで、
スマホ画面の時にCSSを指定できますよ!

それでは本番の改行を省略するコードです!

/* ココにスマホ画面の時のCSSを記入 */
/* 改行タグを省略 */
.single-post-main br { 
   display:none;
}

これでOKです!

簡単に説明するとこのコードは…。

  • single-post-main(記事部分)の…
  • br(改行)を…
  • display:none;(表示しない)

という意味です!簡単ですよね!

カスタマイズした結果

このように改行タグが省略されて、
スマホ画面でも見栄えがよくなりましたね!

スマホのCSSは反映に時間がかかる

パソコンではCSSを変更した後、Ctrl+F5で更新することで
すぐに反映したCSSが確認できますが…。

スマホの場合は反映までに少し時間がかかる場合があります。

「アレ?CSS変えたのに画面に反映されてないぞ…」
という時は少し時間をおいてから確認しましょう。

スポンサーリンク
おすすめの記事