WordPressで不自然に改行される問題を解説
WordPressを使用して記事を執筆する時、多くの人はPC画面を開いて作業する人が
大半を占めると思います。
作業の際に、1行を何文字にするかユーザの視認性を良くするために、
「Shift＋Enterキー」を活用して作業します。
しかし、「Shift＋Enterキー」を使った改行だとWordpress側で何らかの
対策を取っていないとスマホ端末で文字が崩れてしまいます。
▼PC画面では、問題なく改行されている
▼スマホ端末での画面表示だと、改行が不自然にされてしまう
今回は、Wordpress改行問題について解決方法を解説していきます。
改行問題の解決方法
解決方法は至って簡単で、使用している
「Wordpress子テーマのCSSスタイルシートを書き換える事」です。
「Shift＋Enterキー」での改行は、HTML「brタグ」を使いますが、
それがスマホ表示では邪魔してしまい、文字が不自然になるのです。
これから追記するコードは、このbrタグをスマホ画面表示だと反映させなくする
ものになります。
WordPress左側メニューにある「外観」→「テーマファイルエディター」を選択。
▼の画面になりましたら、「編集するテーマを選択」には大半の人が
「～_custom」というのが最初から選択されています。
この「～_custom」というのが使用している現在の子テーマになります。
「～_custom」ではないものは親テーマになりますので、そのCSSを変更してしまうと
一時的には反映されますが、Wordpressテーマの更新が行われると、
上書きされ消えてしまいます。
▼の真ん中の空白にコードを追加で入れればokです。
/*480px以下*/
@media screen and (max-width: 480px){
br{
display: none;
}
}コードを入れ終わりましたら、忘れずに「ファイル更新」を選択してくださいね。
疑似的にスマホ端末で確認する方法
スマホ端末で実際に確認せずとも、▼のような使い方をすれば、
「PC。スマホ、タブレット」の画面で記事を疑似的に見る事が出来ますよ。
WordPress左側メニューにある「外観」→「カスタマイズ」を選択します。
画面左下にある赤い囲み枠にあるボタンが、それぞれの端末で疑似的に
表示させるボタンになります。
左から順番に「PC、タブレット、スマホ」となっています。
それぞれのボタンを押して、画面内の記事などを選択すると、その端末での
表示が疑似的に表示されるようになります。
まとめ
- WordPressサイトにおけるスマホ端末で改行される問題は、brタグが要因
- 解決法は、brタグをスマホ画面サイズで無効化させるCSS記述が必要
- 「子テーマ」に必ずCSS記述する事
- スマホやタブレット端末を疑似的に使えるやり方を覚えとくと便利
コメントを残す