MENTAやTimeTicketでZoomオンライン指導・メンタリングを行っています。
WordPressやHTMLサイトのトラブル、SEO対策のご相談、HTML・CSS・WordPressなどのレクチャーなどが可能です。


1行の文字数の変更・固定について

初めまして、こんにちは。

WordPress初心者です。プログラムなどもほとんどわかりません。

現在、Word Pressで「Luxeritas Child Theme」のテーマを使用しています。

スマホにおける1行の文字数について質問があります。

私は文章が1行21文字で表示されたとき、読みやすくなるように記事を書いています。

最近気が付いたのですが自分のスマホに表示されている文字数と、テーマのコントロールに表示されている文字数が違います。

自分のスマホでは21文字でしたが、コントロールでは17文字でした。

やはり同じスマホでも端末の大きさによって、表示される文字数というものは違うのでしょうか?また、どんな端末であっても21文字で表示できるような設定は可能ですか?

文字の大きさやコンテンツ領域もいじってみましたが、そういう問題ではない気がします。

p width : 80% ; のコードで調整できないのかと思ったのですが、文字が画面外にはみ出してしまいました(現在は削除しています)

ちなみにですが、文字が崩れてしまうので子テーマの編集の所に

@media screen and (max-width: 480px) { 
br { display : none ; } 
}

を入れてあります。


>ユウキ様
ご相談ありがとうございます。

返答が遅れて申し訳ありません!
以下、回答となります。参考にして頂ければ幸いです。

レスポンシブデザインについて

PC画面でサイトを見ている際に、ウィンドウのサイズを変更してみましょう。
多くのサイト(WordPressのテーマ)は、表示される際のディスプレイの大きさに応じてレイアウトや幅が変化していくレスポンシブデザインで作られています。

サイドバーが下にずれたりするのも、〇〇pxより小さくなった時に(または〇〇pxより大きくなった時)にサイドバーのレイアウトを変化させるようにCSSなどで設定されています。

ユウキ様が追記されたCSS max-width 480pxというのも、480pxまでの表示サイズにのみ、br(改行)を非表示にする という指定です。

端末の大きさによって、表示される文字数は違うのか?

スマホ・タブレット・PC向けに文字サイズを変更している設定がされていることはあります。

さらにスマホやタブレットの画面サイズも多種多様です。そのため、画面サイズによって1行の文字数が流動するように作られているのです。

1行の文字数を固定してしまうと、端末によっては意図しない位置で改行(改段落)が行われかえって見づらく感じてしまうでしょう。

どんな端末でも21文字で表示する設定は可能か?

どんな端末でも21文字表示にできるかどうか。

回答は「不可能ではない」です。

@media screen and (max-width: XXXXpx) { 
 p {font-size: ○○px ;}
}

のような指定をかなり用意することになるでしょう。

他、画面サイズに関係なく、

p { max-width :21em; }

のような書き方をすれば意図した形にある程度近いものになるかもしれません。

21文字表示するより小さいサイズの場合は普通通りに折り返され、それより大きな画面の時は21文字で改行されるようになるでしょう。

この場合は br display:none;のような指定は必要なくなります。

もしブラウザの開発者ツールを使ったことがなければ利用してみてください。ある程度端末の画面サイズを確認しながらCSSのプレビューを見ることも可能です。

以下の画像はGoogle Chromeブラウザで本記事を開発者ツールで確認。
段落のタグpに対してマックスで17em(emは文字数の指定です)という指定をしたものです。プレビューはiphoneの6/7/8 で、この部分をクリックすると他の端末サイズのプレビューも見ることができます。
改行 Google Chrome

参考にして頂ければ幸いです。

おすすめコンテンツ

“1行の文字数の変更・固定について” への2件の返信

  1. ありがとうございます!
    とても分かりやすかったです!

    p { max-width :21em; }のコードを貼り付けたらいい感じになりました!

    Google Chromeの開発ツールは知らなかったし、使ったこともありませんでしたがとても役に立ちました。

    1. ユウキさま
      コメントありがとうございます^^
      参考にして頂けたようでなによりです!

      もしビジュアルエディタ(や5.1系標準Gutenberg)をお使いであれば、Enterキーで改段落(pタグの終了)、Shift+Enterで改行(brタグ)になります。

      またなにかあればご相談下さい!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA