ブログやホームページの記事を作成してチェックしていると、パソコン表示とスマホ表示でうまく改行がされなくて、ご自身で改行を変えたい時ありますよね。
しかし、いまいちやり方がわからない方も多いのではないでしょうか。
改行タグをCssで設定する方法をマスターすれば、パソコンとスマホで改行位置を変えて読みやすい記事にすることができます。
ここでは、WordPress記事でパソコンやスマホなどのデバイスごとに文章の改行を変えるやり方をご紹介します。
この記事を読めば、改行をしたい場所でできるようになり、綺麗にまとめることができるようになります。
WordPressでパソコンとスマホサイズの改行位置を変える方法
WordPressで記事を書いている時に、パソコンとスマホで改行の位置が丁度よくされない時ってありますよね。ここでは、文章の途中で改行するための方法を基本からご紹介します。
改行する方法は？
改行を設定するためには、＜br＞タグを文章中に設定をすることで改行することができます。
また、他のタグ同様で”class”も設定することができるので一部の改行タグだけにカスタマイズの設定を反映したい時にとても便利です。
①入力画面で改行したい位置に＜br＞を記載します。
②保存して表示画面を確認するとbrを入れた場所で改行されます。
レスポンシブの設定方法とは
パソコンとスマホで設定を変更するためにはレスポンシブの設定が必要になります。レスポンシブとは、パソコン、タブレット、スマホなど、異なる画面サイズの幅を基準にWebサイト表示を柔軟に調整して、見やすく最適な表示にすることを指します。
メディアクエリを使う
WordPressでは、レスポンシブを簡単に変更できるブラグインなどもありますが、細かく文章の改行を変えたい場合などはコードをご自身でカスタマイズした方が良いでしょう。
レスポンシブの設定をするためにはメディアクエリを設定する必要があります。これはWordPressに限らずHTMLなど記述して作成する制作方法とも同様です。
記述の仕方は以下のように記述します。
＠media screen and(max-width:〇〇px){ }
WordPressで改行コードbrを使って改行位置を変えてみよう
それでは、パソコンとスマホで改行位置を変更する方法を実際にご紹介していきたいと思います。
ここでは実際に画面の操作などもご紹介したいと思います。改行のやり方で悩んでいる人の参考になれば幸いです。
STEP1:改行したい場所にbrを入れる
brを使って実際に改行位置を設定します。そこでスマホ画面で改行されないようにしたい場合にclassを設定します。class=”smp”のようにタグの中に設定するのですが、””の中の名前は特に決まりはありません。お好みの名前で大丈夫です。今回はスマホのせっていなのでsmpで設定しています。
「健康」「美」はすぐに手に＜br class=”smp”＞入るものではありません。＜br＞身体により良い成分を＜br class=”smp”＞長い年月をかけて＜br＞身体に取り入れ続ける事で＜br class=”smp”＞「健康」「美」は手に入ります。
まずは、先ほど紹介したように改行を入れたい場所にタグを挿入しましょう。また、スマホだけ改行位置をなくしたい場合にはclassを設定しておきましょう。
STEP2:カスタマイズの追加CSSを開く
WordPress管理画面の「外観」を選択。次に「カスタマイズ」を選択しましょう。
STEP3ブレイクポイントの設定
レスポンシブを設定するためには、ブレイクポイントを決める必要があります。ブレイクポイントとは、CSSno切り替えポイントの事を指します。
〜750ｐｘ. スマホ
750~1023px. タブレット
1024PX~. PC
上記のように、設定する事で、画面幅によって表示をカスタマイズできます。しかし、近年は画面サイズがさまざまなものも多く、区切りは絶対的な正解ありません。
メディアクエリにコードを記入
CSSのところに、以下のように記述します.
以下のように 「display; none;」と記述するとスマホ画面の時には改行がなくなります。
＠media screen and(min-width:751px){
.smp{
display; none;
}
メディアクエリのmin-width:751px部分のminは751ｐｘ以下（最小）を表しているので、もしその数字以上で設定したいときにはmaxーwidthを入れます。
スマホ画面表示に切り替えるて確認する
今回の記事は、Elementerというプラグインを使用して編集しています。左下にレスポンシブモードがあるのでそこから確認しましょう。もし、違う方法で確認する場合は検証ツールを使っても良いかもしれません。
※パソコン表示
※スマホ表示
上記のように、改行位置にclassをつけることで、パソコン画面とスマホ画面で改行位置を変更することができました。
WordPress記事でパソコンとスマホの改行位置を使い分けよう
いかがでしたでしょうか。文章の改行位置をスマホやパソコンで変更するやり方についてご紹介しました。
WordPress記事を書いたけど、スマホで見た時に改行が変な位置でなって読みにくい‥など気になっている方の参考になれば幸いです。細かく設定することができれば、スマホで見た時にもきちんと読みやすく設定されていてより完成度が上がると思います。
是非、少し気になるところがあればトライしてみてください。