スマホで箇条書きの改行がズレる問題を解消しよう！cocoonに対応

お疲れ様です。T@課長（＠Nya540720）です。

 

 

やっと改行がズレる問題の解消できたため、その方法を紹介したいと思います。

 

ブログを書いていると、読みやすい文章に気を付けますよね？

 

基本的にパソコンを使って執筆する方がほとんどだと思います。

 

そのため、パソコンから見た改行は完璧だと思いますが、スマホで確認すると改行がズレていることがあります！

 

私もいろいろ試してみましたが、スマホで改行がズレる問題がなかなか、解決しませんでした。

 

だがしかし、試行錯誤の末、やっと問題が解決しました！

 

同じような症状で悩んでいる方の解決のヒントになれば幸いです♪

 

ちなみに、使っているテーマは、cocoonです♪

 

 

スマホで箇条書きがズレる問題とは

パソコンで書いたブログが、スマホで箇条書きがズレる問題を説明します。

 

（例分）cocoonで枠を作り、箇条書きを書いた場合

 

という風に表示されてしまいます。

 

当たり前ですが、改行に使っているのは機能は、shift+enter　です。

 

この枠は、

原因は箇条書きの使い方

原因は箇条書きの使い方でした！

箇条書きとは、短文を複数並べて羅列することにより、読みやすくする表現方法ですが、
その使い方でスマホの改行がズレることが分かりました。

 

↓これが箇条書き

• スマホで箇条書きがズレる問題
• スマホで箇条書きがズレる問題
• スマホで箇条書きがズレる問題

箇条書きの機能使う場合の問題点

私がなぜ、箇条書きの機能を使わず、横着して「・」を使って表現していたかというと、

箇条書きの機能を使うと、枠からはみでるから！です。

 

例えば、普通に箇条書きを枠で囲んだ場合、

• スマホで箇条書きがズレる問題
• スマホで箇条書きがズレる問題
• スマホで箇条書きがズレる問題

こうなっちゃうんです！

これを簡単に解消しようとすると、「・」を使って疑似的に箇条書きするときれいに表現できます。

箇条書き機能の問題点の改善策

この問題を改善する方法を紹介します（多分、他にも改善する方法はあると思います(;^ω^)）

 

その方法は、”前後の１行まで枠で囲って、はみ出てる場所を消す”です。

意味が分からないと思いますので、例を出します。

 

1.箇条書きで入力する

まずは、普通に箇条書きで入力します。

 

• スマホで箇条書きがズレる問題
• スマホで箇条書きがズレる問題
• スマホで箇条書きがズレる問題

2.箇条書きを枠で囲む（一時的にズレる）

枠で囲みたい文章の、上下1行を含めて、枠を作ります。

 

3.無駄な枠を消す

余分に枠が作られてていた部分を削除します。

 

 

これで、きれいな箇条書きの枠が出来上がります。

絶対、もっとスマートなやり方があると思いますが、一応、これで問題点は解消できます！

まとめ　スマホで箇条書きの改行がズレる問題を解消しよう！cocoonに対応

私は95記事書いた後に解決方法に気づきました。

 

そのため、リライトも95記事分おこなう必要があるため、気が滅入りますね(;^ω^)

 

しかし、最近はスマホの画面に最適化したサイトがSEOでも評価されるため、時間が掛かったとしてもリライトは必要です。

 

私と同じような悩みを抱えている方の助けになれれば幸いです。

 

「どうしても、スキマ画面で箇条書きの改行がズレるなぁ~」と悩んでいる方は、ぜひ一度試してみて下さい♪

 

【転職を検討している方はこちら↓】

＞＞＞【2021年】転職を考えている人は必見！前向きな選択肢としての転職

 

【社会保険と健康保険の違いを知りたい方はこちら↓】

＞＞＞社会人の常識を勉強！社会保険と健康保険の違いを分かりやすく説明

それでは、今日も１日、お疲れ様でした！