WordPressの使い方

【コピペでOK】WordPressの改行がスマホで不自然になる場合の対処法

 

誠太
こんにちは、誠太です。

 

WordPressでブログを書いていると、PC表示ではちょうどよく表示されているのに、スマホでは改行がしっくりこないことってありませんか?

 

ぼくもブログを開設した当初とても悩みの種となっていたことなのですが、これは比較的簡単に問題解決ができます。

 

本記事では、WordPressで作成したブログの記事をスマホページで表示した時に、改行が自然な改行になる方法を解説します。

 

アドセンス収益などにも大きく影響するものになるので、早い段階で解決しおきましょう。

 

WordPressで作った記事をスマホで見やすくする改行術

WordPressで作った記事をスマホで見やすくする改行術

 

スマホページで改行を最適化するには、CSSコードを追加すればOKです。

 

念の為、不要なCSSをWordPressに追加しないためにも、あなたの状況と合致しているか確認しておいてもらいたいので、スマホページで改行が不自然になっている例文を用意しました。

 

例文を確認後、あなたの状況と一致していれば、CSSを追加してみてください。

 

スマホページが不自然な改行になっている具体的な表示例

スマホページで改行が不自然になっている状況は、このような状況です。

 

PC表示の場合

WordPress はブログを運営するに当たって
とても便利なツールと言えます。

 

今回はそのWordPress を運営するにあたって、
必ず当たるであろう壁、改行についてお話したいと
思います。

 

スマホページの場合

WordPress はブログを運営するに当
たって
とても便利なツールと言えます。

 

今回はそのWordPress を運営するに
あたって、
必ず当たるであろう壁、改行につい
てお話したいと
思います。

 

このようにPCでは見やすく表示されていても、スマホでページではとても不自然な改行になってしまう場合があります。

 

このスマホページで不自然な改行になってしまうことを知ると、PCで短いスパンの改行を行ってスマホページの改行が不自然にならないように工夫しなければなりません。

 

しかし、いくらスマホでの閲覧者が多いといえども、PC表示も見やすい状況を心がけたい

 

次にお伝えするCSSコードはそんな悩みを解決できるコードです。

 

PCで作成した記事の改行をスマホで無効化するCSS

こちらのCSSコードをWordPressに追加することで、スマホページでの改行を自然な形に変化させることができます。

 

PC表示の改行をスマホで無効化するCSSコード

@media screen and (max-width: 480px) {
br { display : none ; }
}

 

CSSをWordPresに追加する方法については、次から解説していきましょう。

 

CSSをWordPressに追加する方法

WordPressテーマによって、機能が異なる部分はあると思うのですが、基本的には同じ手順でCSSを追加できるようになります。

 

ADDINGER5ユーザーは『外観』→『カスタマイズ』→『追加CSS』に追記で大丈夫です。

 

標準的なCSS追加手順

  1. WordPress管理画面サイドバー
  2. 外観
  3. テーマエディター

 

テーマエディターを開くと、style.cssというファイルが右側に表示されているかと思うので、そのファイルをクリックしてください。

 

 

追加するCSSに関しては、現在入力されているCSSに1行空白を空けて入力すると良いでしょう。

画像を例にしてCSSを追加すると、このような状態になるはずです。

 

/*--ここまで--*/
}

@media screen and (max-width: 480px) {
br { display : none ; }
}

 

余計な全角スペースなどが追加されていないか確認し、問題なければファイルを更新にて、保存してください。

 

以上でWordPressにCSSを追加できました。

今一度、スマホであなたのページにアクセスし、スマホページの表示で改行が不自然になっていないか確認をしてみてください。

 

しっかりPCでの改行が無効化されていたら、本記事の目的は完了です。

 

万が一うまくいかないという場合は、こちらの記事を参考にして、PCでの記事作成についても見直してみてください。

 

参考
ブログの改行方法を実例を元に解説【読みたいブログを目指す!】

  誠太こんにちは、誠太です。   先日、こんな質問をいただきました。   ブログの文章の改行について。 何文字で改行するべきなのか、ベストな文字数がわかんなくて調べたけ ...

続きを見る

 

スマホページの表示には充分気を遣うべき

スマホページの表示には充分気を遣うべき

 

スマホページの現象は改善したでしょうか?

PC画面でスマホページを気にしながら記事を作成するのって結構大変だと思うので、本記事の内容で改善できたなら嬉しいです。

 

最初はPCでの記事作成に注意が向きがちですが、スマホでの閲覧ユーザーの方が多い傾向になってきたので、どちらかというとスマホページをメインにしてコンテンツ(記事)を作成することが求められています。

 

そのため、PCとスマホ、両方のクオリティをあげつつ、ユーザビリティの向上も目指していくことが必要です。

 

\ あわせて読みたい! /

  • この記事を書いた人
  • 最新記事
誠太

誠太

理系の文系ブロガー。理系脳ではプログラミングを、文系脳ではブログの運営についてのHow toを話題にブログで紹介しています。年間で1,600万を売り上げた実績を元にマーケティングにも触れ、プログラミングの学習方法やブログでの稼ぎ方について情報発信中!

よく読まれている記事

1

  AFFINGER5を購入しようか迷っているけど、損をしない特典が付いているところから購入したい。実用特典ってどんな特典なの?   ご覧いただいてありがとうございます。 &nbs ...

2

スポンサーリンク   アフィリエイトに向いているASPってあるのかな?もし稼ぎやすいASPがあるなら登録したいんだけど、おすすめのASPってある?   こんな悩みに解決しようと思い ...

3

  誠太こんにちは、誠太です!   ブログを運営していると、自分の文章をもっと良くしたいと思ってしまうものではないでしょうか。   しかし、ただブログを書いているだけでは ...

4

  誠太こんにちは、誠太です。   WordPressのテーマは多数存在していますが、今回はその中でも人気なWordPressテーマ『The THOR(ザ・トール)』についてレビュ ...

5

  誠太こんにちは、誠太です。   WordPressのテーマはいまや沢山の種類がリリースされ、個人制作のものや企業がリリースしているものまで溢れかえるようになりました。 &nbs ...

-WordPressの使い方
-

Copyright© SEITALITY , 2020 All Rights Reserved.