ワードプレスの改行がスマホでズレる問題の解決方法

中村です。

本日はワードプレスでブログ記事を作成する際の
「段落」や「改行」の仕方について・・・

特にパソコンで記事を作成してスマホで見た際に
改行がガタガタになって悩んでいるという人に向けて書きます。

まず、僕自身がこれまでどうだったかという事ですが
正直　この改行問題は微妙に悩みの種でした(笑)

あんま気にしない・・・という
大雑把でゆとりのある性格の方も当然いるとは思うのですが、
自分は結構細かい所を気にする性格でして(笑)

殆どの人がそうだと思うのですが
ブログ記事を書く際の「自分ルール」というものがあると思います。

そのルールの従って書いた時、その書き方が一長一短あろうとも
一度それで始めたら少なくともそのブログ内では
あまりルール（法則）は変えない方が良いでしょう。

一人称が統一されていない
「僕、私、俺、etc・・・」などは言うに及ばず、

それ以外の項目、

「です、ます調 or だ、である調」などの言葉遣いや
改行の仕方に関しても

一貫性の無いブログって
「なんだかな・・・？」と読者に
違和感を抱かせてしまう事は間違いないです。

ただ、ブログを始めたばかりの時って
芸風の定まってないお笑い芸人の様に(笑) 結構迷走してしまう。

まさに僕もその通り、しばらく悩みました。
これって仕方ない部分もあるかと思うのですが・・・。

で、今の所採用している僕のブログの書き方は今まさにご覧の通り。

改行を多めにして、段落も広めに取っています。

これが絶対的な正解という訳では決してないですし
僕もこれから色々試して変更する可能性はありますが
今の所はこれが良いかなと思っています。

ただ、その中で悩みが。

改行したりすると、その改行の場所がスマホ表示でズレる。

これは殆どのブログ作成者が経験した事があるのではないでしょうか。

これ、そのサイトがレスポンシブ対応していなければ
パソコンと同じ表示をスマホのちっこい画面で見るだけなので
改行も特にパソコン表示と変わりませんが
レスポンシブ対応される事により文章の部分に関しては
当然その文字の折り返しが訪れる場所が変わる・・・。

そうなると変な所で折り返されて文字が一文字二文字でも
改行されたりしてカッコ悪い！

つまりこういう状態ですね。

パソコンだとこうなんだけど。

スマホだと・・・

文例が他に無かったのかとツッコミを入れたくなりますが・・・

スマホの場合、顔文字が切れちゃってる事は
お分かり頂けたと思います。

こういうのが凄く嫌なんですよね～～(*´Д｀)

で、これの解決策。

２つあるかなと思います。

解決策１

「ぬりかべ」で書く事。

解決策２

テンプレート（テーマ）に頼る。

解決策１「ぬりかべ」方式

まず方法のひとつは「ぬりかべ」で書く事。

最初からパソコン時で記事を書く際から、基本細かく改行をしない。

その変わり、段落をしっかり多めにとる。

つまり・・・

あああああああああああああああああああああああああああ。ああああああああああああああああああああああ。ああああああああ。

あああああああああああああああああ。あああああああああああああああああ。あああああああああああああああああああ。

ああああああああああああ。あああああああ。

あああああああああああああああ。あああああああああああ。ああああああああああああああああああああああ。

この場合、文ふたつ、つまり句読点が
大体２回～３回訪れるのを一つの区切りとして段落を作る方法。

これでも確かに問題は無いですね。

そもそも「段落」は用いるが「改行」はしない訳で
切れる場合は文章の終わりでバスっと切れるから、
これはこれで「ガタガタ」という印象は与えません。

ただ、僕はこの方式では書いていません。

一応理由としては、この方式の場合は確かに洗練された印象を与えるし、
本当にしっかりとした文章の内容で勝負する際には有効だと思いますが、
ブログとして自由に感情豊かに表現をするには若干不向きだと思うからです。

ブログを作成する目的にもよると思いますが
ブログの場合は個人の日記的な色が強いし、それには当然感情の表現を伴います。

そうすると、理路整然と書き言葉で物事を伝えるというより
話し言葉に近い「言葉の強弱」、「抑揚」、「間」が
あった方が良いという事になります。

連休中ネットビジネスしない中村が悶絶してた話。

↑↑↑
僕はこういった調子の記事を書いたりするので
そういった目的では改行を多めに取ったり出来た方が良いんですね。

そしてもうひとつの選択肢・・・

解決策２　テンプレート（テーマ）に頼る。

これは僕の別のブログでも使用している
カエテンWPというテンプレート
（ワードプレステーマ）を用いた場合に簡単に実現出来ています。

このテンプレート（テーマ）では、簡単に言えばスマホからのアクセスの場合、
不要な改行の部分を改行せず表示してくれる仕様になっています。

技術的に言えば画面横幅799px以下の場合に
（br/）タグを反映しない様にしてくれているという事です。

これは本当にスマホで見た時にも
パソコンから見た時の雰囲気を損なわずに
改行、段落を反映してくれる事が分かります。

今、この記事を書いているテンプレートは違いますが、
僕が運営しているコチラのブログ

カエテンWPのワードプレステンプレートを使用して作ったサイトはこちら

こちらはカエテンWPを採用しているので
スマホからもアクセスしてみて
パソコン画面と良く見比べてみて頂けると良いと思います(^^)

改行位置がズレる問題。どちらの解決策が良い？

という訳で、どちらの解決策が良いか・・・
という部分ですが、慣れもあると思いますし、
あとはどういったカラーのサイト作りをするかにもよると思います。

ただ、解決策１のぬりかべ方式は、
実際作成してスマホで確認すると分かるのですが
パソコン表示の状態でも敢えて「改行」をせず、
段落のみに徹している為、文章の折り返しが行われるのは
横幅を使い切って自動で折り返される時のみです。

そうすると、パソコンよりスマホの方が当然
横幅に並べられる文字数は減ってしまいますから
自ずと横幅一杯使い切っての折り返しが多くなる・・・。

そうするとスマホで見た際は縦の長さについても
文字がズラーーーーっと並ぶ「ぬりかべ感」がより強くなります。

この辺りをどう捉えるかですね・・・。

文字だらけのサイトは読む気が起きづらいというのは
普通に考えれば分かる事ですし・・・。

よほど、その文章の内容そのものに価値があり、
集中して読ませる程、人を惹き付けられる文章だったら良いと思うのですが。

それに対して解決策２ですが、
これであればパソコンでは改行を自由に行い、
スマホ時のレイアウトも軽く確認すれば問題なく、
読者の目の動きも横の動きが減り、読みやすいと考えられます。

それと個人的にはやはりこちらの方が
落語じゃないですけど感情を表現したり
おかしみを表現する「間」などが作り易いなー、という感じです。

という訳で、カエテンWPのテンプレートについては
こちらで更に詳しく解説してありますので
良かったら参考に見てみて下さい。

カエテンＷＰを豪華特典付きレビュー。マジ感動レベルです。

追伸：キャラが感じられる方が人気が出る？

余談にはなりますが、芸能人でもなんでもない僕らの様な人間が
価値のある記事を提供するのって非常に難しく、
ただのWikipedia的な記事（調べれば分かる様な内容のもの）
というのはほぼ無価値です。

そんな無名の人間の書く記事で、
せめて何が「面白味」や「価値」を提供出来るのかというと
そのブログ管理人の意見であったり個人の感情、キャラクターです。

何か記事を書くのにも、その人自身の意見が無ければ
ただのニュース記事のリライトと変わりませんし。

ただ、そこにその人独自の考え方や意見を交えて載せれば
その人のオリジナルの文章になります。

そういった意味では、芸能人ではないけど・・・
アメブロなどは依然として
改行多めの文章を作成している人が多いのが分かります。

そして、人気ブログはほぼ例外なく「感情」が入っています。

絵文字なども多用されているのを見れば
人気ブログが何故人気なのかが少し分かる気がしますね(^^)

では、中村でした。

無料ブログとワードプレスのテンプレート導入に迷ったら・・・。

アダルトＯＫなワードプレス用テンプレートは？

kaetenを無料特典で手に入れる？最もお得な入手方法とは？

キーワードスカウターSでアクセスアップは可能か？ 評判と豪華特典付きレビュー

「忘れられる権利」とは何！？　興味深ぁ～い！