ブログについての情報を中心に、ギター関連の上達法や転職情報など幅広く発信中。悩み解決に特化したHow toメディア。

Limitless.net

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とスマホ、両方のクオリティをあげつつ、ユーザビリティの向上も目指していくことが必要です。

 

\ あわせて読みたい! /

2019/6/11

AFFINGER5の評判は?ぼくも含めAFFINGER5ユーザーの評価を紹介

  誠太こんにちは、誠太です!   アフィリエイト初心者からAFFINGER5を使用し始めて3ヶ月が経過したので、ぼくのAFFINGER5への評価と他のユーザーがAFFINGER5をどのように評価しているのかを紹介したいと思います。   結論、ぼくのAFFINGER5への評価は高いです。   アフィリエイト収益を増やす仕組み 初心者でも使いやすい SEO対策のしやすさ 記事装飾の豊富さ 機能面の秀逸さ   ぼくも3ヶ月間AFFINGER5 WINGを使用し ...

ReadMore

2019/6/3

【保存版】WordPressのヘッダーメニューの作り方!AFFINGER5のカスタマイズも有り

  誠太こんにちは、誠太です!   ヘッダーメニューの設定は、ユーザーがあなたのサイトの訪れて早い段階で目につく場所です。   そのため、適当に設定してしまうと離脱率が上昇してしまう可能性は否定できません。   本記事では、AFFINGER5のメニューの設定について解説を行い、あなたのサイトのファーストビューが今よりも向上するようにお手伝いしたいと思います。   本記事の内容 AFFINGER5のメニューの設定方法について メニューをリッチにするカスタマイ ...

ReadMore

2019/5/30

AFFINGER5やWordPressで上部に変な空白ができたときの対処方法

  誠太こんにちは、誠太です!   先日、AFFINGER5のカスタマイズを行っているときに、サイトの上部にこのような変な空白が空いていることに気が付きました。     こんな現象が起きたのは初めてで、すこしググって調べてみたところ3つほど対策方法があるようなので、同じ現象になっている人へ向けて解決方法をシェアしたいと思います。   本記事の内容 WordPressのサイト上部に空白が生まれてしまったときの対処方法 WordPress上部に変な空白ができた ...

ReadMore

2019/5/26

AFFINGER5の吹き出し機能解説!使用方法からアイコンの調達方法など

  誠太こんにちは、誠太です! 今回は吹き出し機能について解説するよっ!アーサー   AFFINGER5では、『会話ふきだし機能』という機能がありますが、効果的に使えていますか?   吹き出し機能を使用することによって、あなたを覚えてもらいやすくなることはもちろん、読者に伝えたいことをイラストと一緒に伝えることが出来るので、内容をより伝わりやすくすることが可能です。   本記事では吹き出しのアイコンの設定方法から使い方までを解説し、伝わりやすい記事を作れるようにお手 ...

ReadMore

2019/5/25

AFFINGER5(アフィンガー)に破線ボックスを導入する方法!

  誠太こんにちは、誠太です。   今回は、タグの中にあるボックスデザインでマイボックスという項目があります。   その中にある、『しかく(枠のみ)』というボックスデザインがあるのですが、そのデザインを破線ボックスになんとかカスタマイズできないかと試行錯誤していたところ、カスタマイズに成功しました。   ぼくと同じように思っている人へ向けて、本記事を執筆します。   本記事の内容 『しかく(枠のみ)』を破線ボックスに変更するカスタマイズ CSSコードの入力 ...

ReadMore

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

誠太

接客業で年間1600万円の売上を達成した経験を活かして、リアル接客とWebマーケティングを融合。『事実と根拠を明確に、誠実な情報発信』をモットーにブログを毎日更新しています。

-WordPress
-

Copyright© Limitless.net , 2019 All Rights Reserved.