【超簡単】PCとスマホでそれぞれの改行表示を最適化する方法!【条件付き】

パソコン・スマホ

「PCで読みやすく改行したら、スマホでめっちゃ見づらい〜!」

あなたはそんな症状に襲われたことはありませんでしょうか?
かくいう僕も、その症状にここ1年ほど悩まされてきました。

レスポンシブデザインが重視されてる昨今、
「スマホユーザーの方が多いんだからスマホ重視にすりゃいいじゃない」
という声も聞こえてきそうですが、諦めきれなかった僕は二兎を追うことを決意。

その結果、1つの解決策を見つけたのでシェアしたいと思います。
※この記事はPCから見ている読者さんを想定して書いています。

 

追記:重大な注意点があります

この方法を見つけた時は、超便利じゃん!って思ったのですが、
かなり重要な注意点がありましたので、最初に言及しておきます。

このやり方は、

普段箇条書きなどで改行を使っている人は使わなでください!

どういうことかというと、

・生麦
・生米
・生卵

みたいな感じで、リストタグをや改段落を使わずに
Shiftキー+Enterキーの改行で箇条書きしている場合です。

その場合、今回紹介するやり方を適応すると、スマホで見た時に

・生麦 ・生米 ・生卵

こんな感じに横に続けて表示されてしまうのです。

今回紹介するやり方は、
スマホで見た時に改行タグを無視して表示するというものなので、
改行を無視して表示した時に、おかしな感じになってしまう場合には
無理して使わない方が良いです。

※リストタグについては別な記事で解説します。

⇒執筆中

 

改行と改段落の違いって?

ちょっとややこしいのでここも説明しておきたいと思います。

 

改行(Shiftキー+Enterキー)

改行というのは、一文の中で区切りのよいところで
見やすさを重視するために1段下の行に移動することを指します。

 

改段落(Enterキー)

改段落というのは、一文が終わり、次の段落に進むことです。
一文というのはひとつの意味のある文のかたまりだと考えてください。

つまり、改段落というのは、次の意味のかたまりに進むということです。
言葉で説明するのは非常に難しいですね。笑

以下に例を挙げて違いを説明します。

 

改行のみの文章

最近、駅前に新しいアイスクリーム屋さんが出来たからさ、
今日放課後一緒に食べに行かない?
え、いくいく〜♪
でも、ものすごい混んでるんじゃない?
大丈夫大丈夫。
うちの兄貴の知り合いが働いてるからコッソリ裏口から入れるんよ。

この文章は全て改行です。
どうでしょうか?かなり読みづらいんじゃないかと思います。

 

改段落を入れた文章

最近、駅前に新しいアイスクリーム屋さんが出来たからさ、
今日放課後一緒に食べに行かない?改段落

え、いくいく〜♪
でも、ものすごい混んでるんじゃない?改段落

大丈夫大丈夫。改行
うちの兄貴の知り合いが働いてるからコッソリ裏口から入れるんよ。

このように、ひとつの意味のかたまりごとに改段落してあげることで、
非常に読みやすい文章になるということですね。

 

PCとスマホ、どっちを優先にして改行すればいいのか?

ちょっと余談が長くなりましたが、
まずは、僕が言っているPCとスマホでの改行の違いというのが
うまく伝わっていないかもしれませんので、簡単に説明しますね。

※なんとなく伝わっている場合は読み飛ばしてください。

上でも書いたように、改行というのは、
文章を読みやすくするために次の行に移動する操作です。

しかし、この読みやすい改行のタイミングというのが
PCとスマホで全然違うから困ってしまうというワケです。

例があった方が伝わりやすいと思うので、
それぞれの表示のされ方を見てみましょう。

 

PC重視の改行

【PC重視にした時のPCからの見え方】

朝起きたら、僕はまず顔を洗って歯を磨き、
それから熱くて濃いコーヒーを飲みながら、Yahoo!ニュースに目を通します。

この文章、PCで見れば非常に見やすいハズです。

これをスマホで見るとどうなってしまうのか?
こうなります。

 

【PC重視にした時のスマホからの見え方】

朝起きたら、僕はまず顔を洗って
歯を磨き、
それから熱くて濃いコーヒーを
飲みながら、Yahoo!ニュースに
目を通します。

なんとなく変な感じがするの分かりますかね?

じゃあ、今度はスマホ重視にするとどんな感じになるのか見てください。

 

スマホ重視の改行

【スマホ重視にした時のPCからの見え方】

朝起きたら、僕はまず顔を洗って歯を磨き、 それから熱くて濃いコーヒーを飲みながら、Yahoo!ニュースに目を通します。

 

【スマホ重視にした時のスマホからの見え方】

朝起きたら、僕はまず顔を洗って
歯を磨き、 それから熱くて濃い
コーヒーを飲みながら、Yahoo!
ニュースに目を通します。

こんな感じです。

で、どっちを重視するのがいいのってなった時に、
やっぱりスマホ重視が圧倒的に優勢です。

スマホユーザーが爆発的に増えていることを考えれば
当然の流れではありますよね。

しかし、実はどっちも最適化出来る方法がありました

以下にその方法を紹介していきますね!

 

PCとスマホで同時に改行を最適化させる方法

やり方はとっても簡単です。

まず、ワードプレスのダッシュボードに入っていき、
外観→テーマ編集→スタイルCSS(デザインCSS)と移動します。

デザインCSS

そして、一番下に以下のコードを追記してください。

デザインCSS貼付け改行

これだけです。
とっても簡単ですね。

※design.cssは賢威特有のものでした。
他のテンプレートの方はstyle.cssで同じように貼り付けてもらえればOKです。

ちなみに、このコードはどういう意味なのかというと、
『横幅が480px以下のデバイス(つまりスマホ)で表示する際には、
改行タグを無視します』
という指示をサイトに出してくれるのです。

なので、箇条書きやプロフィールなんかで改行を使っている場合には、
そこも崩れてしまうのでこのやり方は適さないです。(残念)

そういった改行を使っていない方の場合は、
非常に有効な手法という感じですね。

 

タブレットの場合はどうなるの?

感覚としてはスマホと同じと思ってOKです。

タブレットの場合も、480px以下のデバイスであれば、
スマホと同じように表示されます。

480px以上の場合はPC重視の改行と同じになりますが、
ほとんど違和感なく閲覧できるかなと思います。

 

改行を崩したくない場合はどっちに合わせるべき?

さて、改行を崩したくない場合は、
スマホとPC、どちらに合わせるべきかということなのですが、
これは正直サイトによるかなと思います。

例えば、僕のこのサイトなんかの場合は、
PCユーザーからのアクセスも多いので、
PC向けに改行しています。

ただ、明らかにPCユーザー向けのサイトでない場合には、
迷うこと無くスマホ重視でOKかと思います。

Googleもモバイルフレンドリー(スマホユーザー向けの満足度)を
重視しているので、迷った時はスマホ重視でいいかなと思いますね。

 

改行の選択肢まとめ

  • PCユーザー向けのサービスを提供している場合はPC重視の改行
  • それ以外のサイトはスマホ重視の改行
  • スマホで改行が崩れても問題なければコードを使う

大体この3つの選択肢に分かれるかと思います。

コードを使うやり方は最強だと思ったのですが、
思わぬ弱点があったので残念です。笑

そんなわけで、あなたのサイトにあった最適の方法を選んでみてください。

 

1 個のコメント

  • コメントを残す

    メールアドレスが公開されることはありません。