ブログアフィリエイトで稼ぐ

Limitless.net

  • サイト管理人
誠太

誠太

接客業で年間1,600万円の売上を達成した経験を活かして、リアル接客とWebマーケティングを融合。アフィリエイト初心者やブロガーに向けて一助できるような情報を発信。

WordPress

WordPressで作成した記事をスマホで見やすくする改行術を図で紹介!

更新日:

 

PCで作成した記事はスマホで不自然な改行になる?!

 

こんにちは、誠太です。

 

突然ですがブログの改行ってうまく出来ていますか。

 

ブログの記事を作成していると、PC表示では綺麗に表示されているのに
スマホでは改行が不自然になってしまう場合が多くあります。

 

今回は、その改行を自然に表示できるようになる方法を
お伝えしたいと思います。

 

具体的な表示例

 

改行が不自然になる場合にこのようなパターンがあります。

 

■PC表示の場合

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

 

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

 

■スマホ表示の場合

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

 

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

 

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

 

このスマホでの見栄えを気にしてしまうと、短い改行をPCで心がけて
なるべくスマホで変な改行にならないように工夫しなければなりません。

 

しかし、いくらスマホでの閲覧者が多いといえども、PC表示でも見やすく
心がけたいと思ってしまいますよね。

 

その悩みを解決できるCSSコードというものがあるので、
次の項でそのコードと設定方法をお伝えします。

 

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

 

■PC表示の改行をスマホで無効化出来るコード

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

 

このコードを使用することによって、PCで作成した記事の改行を
適用させない事ができます。

 

よって変なところで改行されることもなく、スマホで見やすい文章に
することが可能となります。

 

コードを WordPress で追加する方法

 

僕は WordPress で Affinger5 WING というテーマを使用しているのですが、
左のサイドバーに「外観」→「テーマ編集」という項目があります。

 

恐らく他の賢威などのテーマやスワローなどのテーマを使用している
場合にも表示されているかと思います。

 

最初ここに入力したのですが、表示が適用されませんでした。

 

Afinger 5 でこのコードを使用した記事が見当たらなかったので、
次の手順を是非参考にしてみてください。

 

方法は至ってシンプルでした。

 

step
1
「テーマ編集」ではなくて「カスタマイズ」

 

 

step
2
「追加CSS」をクリック

 

 

①が「追加CSS」コードを入力する画面へと移動します。

②を利用するとスマホでの表示をPC画面で確認出るので、
実際にコードが適用されているか確認するのに便利です。

 

step
3
コードを入力

 

 

これにて作業完了です。

 

僕は他にもコードを入力しているので、17番からのスタートになっていますが、
あなたが入力するときは1番の行から入力していただければ大丈夫です。

 

ちなみに他のコードを入力する場合は、Enter を押して1行空白を開けて
その後にコードを入力して頂ければ、見やすくコードを入力することが出来ます。

 

まとめ

 

今回はスマホでの改行を見やすくする方法をお伝えしました。

 

PC画面でスマホの画面を気にしながら記事を作成するのって
結構大変だと思うんですよね。

 

このコードを使用して頂ければ、あなたのブログをスマホで見た場合の
みやすさは、今までと比べて格段にアップすること間違いなしなので、
是非活用して見やすいブログを読者に提供してあげてください。

 

誠太

それでは!今回も最後まで読んで頂き、ありがとうございました。

 

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

誠太

接客業で年間1,600万円の売上を達成した経験を活かして、リアル接客とWebマーケティングを融合。アフィリエイト初心者やブロガーに向けて一助できるような情報を発信。

-WordPress

Copyright© Limitless.net , 2019 All Rights Reserved.