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

お疲れ様です。T@課長(@Nya540720)です。

 

ブログを書いていて、
スマホの改行がズレて解消できなかったことありませんか?

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

 

目次

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

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

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

 

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

・スマホで箇条書きがズレる問題
・スマホで箇条書きがズレる問題
・スマホで箇条書きがズレる問題
これを、スマホ画面で表示すると、
・スマホで箇条書きがズレる問題・スマホで箇条書きがズレる問題・スマホで箇条書きがズレる問題

 

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

 

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

 

この枠は、

この枠でも
この枠でも
この背景色でも
全て、同じ症状がでます・・・。

原因は箇条書きの使い方

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

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

 

↓これが箇条書き

  • スマホで箇条書きがズレる問題
  • スマホで箇条書きがズレる問題
  • スマホで箇条書きがズレる問題
私が使ってスマホで改行がズレる書き方はこちら↓
・スマホで箇条書きがズレる問題
・スマホで箇条書きがズレる問題
・スマホで箇条書きがズレる問題
 違いが分かりますか?よーく見ると、「・」の大きさが違うことに気づいたと思います。
私は、箇条書きするときに、箇条書きの機能を使わす、「・」を使って、
箇条書きのような見た目の短文を作っていました。
という事で、
きちんと箇条書きの機能を使えば、スマホでも改行はズレません!

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

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

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

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

 

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

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

こうなっちゃうんです!

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

・スマホで箇条書きがズレる問題
・スマホで箇条書きがズレる問題
・スマホで箇条書きがズレる問題
↑こんな感じに書けます。
しかし!
これだと、スマホで確認すると、改行がされていないことになってしまいます。
こんな感じ↓
・スマホで箇条書きがズレる問題・スマホで箇条書きがズレる問題・スマホで箇条書きがズレる問題

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

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

 

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

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

 

1.箇条書きで入力する

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

 

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

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

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

 

※ここは無駄な枠
  • スマホで箇条書きがズレる問題
  • スマホで箇条書きがズレる問題
  • スマホで箇条書きがズレる問題
※ここは無駄な枠

3.無駄な枠を消す

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

 

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

 

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

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

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

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

 

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

 

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

 

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

 

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

 

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

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

 

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

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

それでは、今日も1日、お疲れ様でした!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる