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

 

\ あわせて読みたい! /

AFFINGER5

2019/10/18

【最短】AFFINGER5の購入方法|導入までの手順を一挙解説!

スポンサーリンク   誠太こんにちは、誠太です。   本記事は、AFFINGER5をこれから購入されようとしている方向けの記事となっています。   購入方法の手順としては、AFFINGER5 WING/AFFINGER5 Pack3(AFFINGER5 EX)共通になるので、下記をご確認ください。   AFFINGER5の購入方法 AFFINGER5の公式サイトに移動 インフォトップの会員登録 クレジットカード or 銀行振込/郵便振替 を選択 入力内容を確認後、購 ...

ReadMore

WordPressの使い方

2019/10/5

【初心者必見】WordPressをSSL化の注意点【必読】

スポンサーリンク   誠太こんにちは、誠太です。   今さらブログでSSLについて触れるの?と思った方もいるかと思いますが、SSL化って普通に考えて結構難しい作業だと思うんですよね。   サーバーに慣れていない人にとっては『サーバー』って言葉すらなに?って感じだろうし。   プラグインに頼らず、しっかりとSSL化させることが重要だと思っており、なぜプラグインでSSL化させることがオススメできないのかといったところまで、本記事では触れていきたいと思います。 &nbsp ...

ReadMore

AFFINGER5

2019/8/10

AFFINGER5のトップページで抜粋を非表示にする方法【コピペOK】

スポンサーリンク   誠太こんにちは、誠太です。   AFFINGER5を使用していて、トップページに表示されている記事一覧の抜粋が消えないということで困っていませんか?   解決方法として、コピペで実装可能なCSSのテンプレを用意したので、追加CSSに追記して使用してもらえたら解決可能です。   AFFINGER5管理のデザイン内の抜粋設定でも消えない現象が発生しまして、検索エンジンで検索しても良い結果を得られなかったため、同じ現象で困っている人向けに記事を書きた ...

ReadMore

AFFINGER5

2019/7/27

AFFINGER5(アフィンガー5)レビュー【1分で分かるAFFINGER5の魅力】

    AFFINGER5(アフィンガー5)のレビューって長いものが多くて、実際どんなところが良いのかわからない。完結でわかりやすいレビュー記事を参考にしたい   このような悩みを解決します。   こんにちは、誠太です。誠太   本記事では、『1分で分る』と称しましてAFFINGER5のレビューをしていきたいと思います。   内容としては、見出しでメリット・デメリット・AFFINGER5のラインナップを確認することができるようになっていて、気にな ...

ReadMore

AFFINGER5

2019/7/20

【初心者OK】AFFINGER5が初心者にこそ向いている理由と根拠

  AFFINGER5ってよく聞くけど、初心者でも使えるのかな?なんか機能が多くて難しそうなんだけど大丈夫??   本記事はこのような不安を解消できる内容となっています。   誠太こんにちは、誠太です。   いま無料のテーマを使用していて、『うまく記事が作れないのは無料テーマを使っているからなのかな』と考えてしまいますよね。   他のブログを見てみると鮮やかで整っているブログばかり。 自分も本当はそうしたいけど、なかなか有料テーマに手が出ない。 &nbsp ...

ReadMore

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

誠太

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

-WordPressの使い方
-

Copyright© SEITALITY , 2019 All Rights Reserved.