記事の横幅が広すぎて文章の見た目が悪い… と感じたときの対処法

2018年12月08日
カスタマイズ
6
Instruction Tips トラブル対処 初心者向け CSS

昔は狭いレイアウトが流行ったこともありましたね。3カラムでメインコンテンツも400〜500pxと狭い領域で、文字は極小11〜12px程度、みたいな。「スマートフォン」というデバイスが存在しなかった太古の昔の話です。

2018年現在だとパソコンも大型化していますし、画面(領域)を広く使う 、小ぢんまり使うのではなくダイナミックに使う、というデザインの方が寧ろ主流になってきました。

広い領域を上手く使えない日本語ユーザー

日本人独特というか日本語独特だと思います。広い領域を使いこなせない 方が多いんですね。何故かと言うと日本語は英語のように単語の区切りで折り返すという仕組みを持っていません。

英語は単語間の半角スペースが「折返しの合図」になっていますが、日本語というのは単語の途中であろうとどこであろうと折り返します。

The Adventures of Tom Sawyer is set in the 1840's in the fictitious town of St. Petersburg, Missouri, where Tom lives with his deceased mother's sister, Aunt Polly, and his half-brother, Sid. After Tom plays hooky from school, he is made to whitewash Aunt Polly's fence as punishment, but persuades his friends to do it for him.

テンプレートのCSS指定に左右されますが、英文は基本的にはこういう形です。そしてピリオドが打たれたからといって 改行を行うことはまずありません。ピリオドの後の新しい文章は頭が大文字になりますのですぐにわかります。

ところが日本語というのは本来が縦書きですよね。横書きする際のルールを私は正直よく知らないのですが、スペースによる「単語の区切り」という概念もありませんし、大文字・小文字の区分もありません。そのためか、一文終わる毎に改行を行う という形をよく目にします。

ところが現代日本語って英語のように前の文を修飾しまくる(whichやらwhomやら)という感じでもありませんので、一文が短い場合が多くなります。短い文を逐一改行していたら必然的にこうなります ↓

僕は今この温泉宿に滞在しています。
避暑する気もちもないではありません。
しかしまだそのほかにゆっくり読んだり書いたりしたい気もちもあることは確かです。

上記は芥川龍之介の「手紙」の抜粋ですが、実際には縦書きですし改行は行われていません。でも一般の人がブログで文章を書く際にはこうして句点を迎える度に改行を行っている人が多いようです。そしてご覧のとおり短い文で改行していますから領域を使い切れていません。強いて言えば3つ目の文だけちょっと長めかな、という印象です。

一番の良策は改行の多用を辞めること

この調子で全文を書きますと「なんだか左の方にえらく寄っているなぁ」という印象になってしまいます。そこで「記事の幅を狭くするカスタマイズをしなくちゃ」と考え出すんですが、そうではなくて、やたらな改行を辞める というのが根本的解決であり最適解です。

テキストは折り返しますので、パソコンで一行で収まっているとしてもスマホでは折り返しているかもしれませんよね。そして折り返した文章が短めな場合にはもしかしたらこんな感じになっているかもしれません。

これを見やすいと思う人はまず居ないはずです。それ故に「一切の改行を使わない(brタグを利用しない)」という人も居るくらいです。段落のみを意識して改行を行わないわけです。

そこまで極端になる必要はありませんが、やはり一文毎改行というのも同様に極端ですから「一文」で捉えるのではなく「段落(一定の文脈の集まり)」を意識して書くと改善されるかもしれません。そうすることでスマホでの見た目改善はもちろんのこと、パソコンでも「ひどく片寄っている」という状態にはならなくなるはずです。

テキストのセンタリング

そうはいっても改行が必要な場合だってありますよね。例えば歌詞の掲載など。FC2ブログはJASRACと提携していませんのであくまでも例として。私も何件か記事を凍結されたことがありますのでお気をつけください(笑)

What happened to you
You've played the victim for so long now in this game
What I thought was true
It's made of fiction and I'm following the same

お前に一体何が起こったんだ?
ずっと犠牲者きどりのゲームに興じてる
俺の考えは間違っちゃいなかった
全ては虚構だ そして俺も同じ道を辿ってるんだ

Over My Head - Sum 41

テキストを センタリング (中央揃え)にすることで「寄っている」という印象は薄れます。これも有効な方法の一つです。そしてこの方法はごく簡単なCSSで実現できます。

<div style="text-align: center;">
ここにテキスト<br>
ここにテキスト<br>
ここにテキスト
</div>

div要素にしていますがもちろんp要素でも構いません。ただしp要素は制約の多い要素ですから初心者の方へはdivをおすすめします。

ただやはりセンタリングされた文章を「読みづらい」と感じる方も少なくありません。ペルシア語など一部の言語を除きテキストの基本は「左寄せ」であり、それ以外の位置揃えは「装飾」にあたります。

max-widthを利用した領域制限

テンプレートの横幅をどうにかしようと思うと労力が大きいですし、テンプレートを変更したらどうするの?という問題も出てきます。もちろん変更時にはCSSの移植が必要になります。変更に左右されない方法はテンプレートの内容を変えてしまうのではなく、記事単位で調整することです。

What happened to you
You've played the victim for so long now in this game
What I thought was true
It's made of fiction and I'm following the same

お前に一体何が起こったんだ?
ずっと犠牲者きどりのゲームに興じてる
俺の考えは間違っちゃいなかった
全ては虚構だ そして俺も同じ道を辿ってるんだ

Over My Head - Sum 41

サンプルは横幅を500pxに制限しています。領域をわかりやすくするために背景色をつけていますが、色を無くせばさほど違和感はなくなるはずです。

<div style="max-width: 横幅px; margin: auto;">
ここにテキスト<br>
ここにテキスト<br>
ここにテキスト
</div>

widthではなくmax-width です。そしてmarginで全体を中央に持ってくるのも大事です。marginを忘れると結局左に寄ってしまいます。そして記事内のhtmlに直接CSSを充てますので(インラインCSS)、テンプレート変更時にも有効です。

よくある間違いとして、max-width ではなく width絶対単位 でサイズ指定してしまう方が多いのですが、widthに絶対値を指定してはいけません。テンプレートがレスポンシブデザインであろうとも無かろうともです。

divやpなどの要素はデフォルトが width: 100% です。この初期値を例えば width: 500px などに変更してしまうと、pxというのは絶対単位ですから画面幅が1000pxだろうと500pxだろうと300pxだろうと500pxで表示を行うことになります。従って画面横幅が500px以下になったらはみ出してしまいます。スマートフォンの現存最小機種の横幅は320pxです。

max-widthというのは単語が示すとおり「最大値」の指定です。widthがデフォルトの100%であり、さらにmax-widthに500pxの指定があったならば、親要素の横幅が500以下の場合は親要素の横幅の100%、つまり親が200pxならば200pxに、親が450pxならば450pxです。それがパーセントという 相対単位 です。

親が500pxを超えて例えば600pxになった場合にはmax-width: 500pxが効力を発揮して500pxで留まります。それがwidthとmax-widthの相乗効果で、レスポンシブデザインのみならずスマホ全盛のこの時代には無くてはならない考え方です。

width: 500px と max-width: 100% でも同じ効果ですが、widthの初期値は100%ですからわざわざ変更する必要がありませんし(ただしtable要素などは違います)、初期値を触らずにおけば書くべきCSS内容を最小限にできます。CSSには優先度がありますので一応説明しますと、max-widthの方が優先度は高いです。ですが「最大で」という性質上、max-width: 500px ならば500pxでも max-width: 500px の範囲内ですし、極端な話1pxでも max-width: 500px の範囲内ですよね。ですから優先度を気にする場面はほとんど巡ってこないと思います。

まとめ

おすすめの方法としては

  1. 無闇な改行を辞め、文章を段落として捉える
  2. テキストをセンタリングする
  3. max-widthで領域に制限をかける

という感じでしょうか。繰り返しになりますが、根本的な原因は文章の構成がよろしくない という点にあるのですから、1の「段落を意識して書く」というのが最良です。

vanillaice (Akira)

Posted by vanillaice (Akira)

関連する記事

コメント 6

There are no comments yet.

立花家蛇足  

2019/08/10 (Sat) 21:17

良い記事をありがとうございます

本格的にFC2ブログを利用し始めたばかりで、いろいろとやりたいことが多い割に知識が無いので四苦八苦(で十二苦)しております。
あたくしにとりまして宝の山のような記事が満載されているので勉強させていただきます。

あたくしは創作文章がメインになりますので、行間を空けたりルビ(ふりがな)を振ったりがやっとできるようになりました。
FC2ブログはyahooブログと違い禁則処理が楽で助かってます。

当面の目標はルビの色を違えた方が見やすいか?
ですとか、
一括でルビが振れるようなスクリプトを勉強したいと思っております。

今後ともよろしくお願いいたします。

Akira  

2019/08/12 (Mon) 14:03
vanillaice (Akira)

To 立花家蛇足さん

こんにちは。お返事遅くなりました (*_ _)

FC2は禁則がほとんど無いのでそれが却って移転されたYahoo!ブロガーさんには戸惑いの原因にもなっているようですね。
いろいろやりたい、という方へは旧投稿画面が威力を発揮してくれるはずです。なにせhtmlタグが目視状態であれば、やろうと思ったことをその場ですぐ処理できます。

ルビは本文の文字色よりも数段回薄めにしておくと読みやすいのではないでしょうか。
立花家蛇足さんの場合は
rgb(80,80,80)

rgb(100,100,100)
あたりお試しください。

rt要素のstyle属性にカラー指定してしまうと、テンプレートの背景色などを変更した際に見えなくなってしまうことがあります。htmlのstyle属性というのは優先度の高い指定ですから、スタイルシートの指定が負けてしまいます。なので

rt {
color: カラーコード;
}

をスタイルシート側に記載する方法をおすすめ。こうしておけば全記事内のルビを一括管理できますし、記事を書くたびにstyle属性を書く必要もなくなります。
既にstyle属性で指定している場合は

rt {
color: カラーコード !important;
}

にすればスタイルシートの優先度が高くなります。
style属性は使い所を考えないと後々困ることになるんですね。特に色指定など足を引っ張ることが多いです。
style属性の利用推奨は「背景色」と「文字色」を同時に指定できる場合や、色と関連の無いボックスの形状指定などを行う場合です。参考までに。

FC2は「いろいろやってみたい」という方にはとても向いているサービスだと思いますので楽しんでくださいね :)

----- 別件
SSL化されていますが、「Google Ring(α)」のプラグインが非SSLでhttpスキームです(中に含まれるJSファイルのスキーム)
ブラウザによってブロックされていますので機能していません。残念ですが使用を取り止めるか、httpsスキームに変更可能かどうかの確認をおすすめします。

* 使用を継続した場合 = 非SSLサイトとみなされます(混在コンテンツ)

また、追加したトラックバックURLがスマホのビューポート(画面幅)を超過しており、これはモバイルフレンドリーテストに合格しませんのでモバイルユーザビリティエラーとしてインデックスを保留される原因になります。
レスポンシブデザインでは input要素のsize属性 (size="65") は書かないようにされると良いですね。

* 修正しなかった場合 = モバイルユーザビリティエラーとして警告されSEO面の不利が生じます

これらの件の対処についてはおまかせします。よろしくお願いします。

立花家蛇足  

2019/08/12 (Mon) 18:35

To Akiraさん

あたくしの与太郎なコメントに対して丁寧なレスポンスで恐れ入ります。
いただきました内容もあたくしにとりましては宝の山です。

お教えいただきましたことのすべてを理解できておりませんので、一歩ずつ歩んでいきたいと思います。(爺ィの蝸牛の歩みですが⋯⋯)

取り急ぎお礼まで

Akira  

2019/08/13 (Tue) 02:42
vanillaice (Akira)

To 立花家蛇足さん

こんにちは。

はい。面倒ではありますが頑張ってください ╭( ・ㅂ・)و
頑張りついでにまたいくつか要修正の部位があります。

-----
『全角スペースの利用』

何かの要素を追加する際、ソースコードのインデント(文頭揃え)を行うと思いますが、全角スペースは絶対に利用しないよう注意してください。文章は別ですよ。html要素の中及び前後に注意。

<head>から</head>までの間に入れた
・ファビコンのlink要素
・Google analyticsのJSコード
に合計9つの全角スペースが含まれています。
これはクリティカルエラー(致命的エラー)ですから修正必須です。

参考記事: htmlの絶対的NGそれは「全角の利用」
https://vanillaice000.blog.fc2.com/blog-entry-775.html

参考記事: head情報に何かを追加する際は細心の注意を
https://vanillaice000.blog.fc2.com/blog-entry-791.html

立花家蛇足  

2019/08/13 (Tue) 09:55

To Akiraさん

お~~、またもや貴重なアドバイスありがとうございます。
自分一人だったら一生涯気づかないことなので大変助かります。
「進歩のない爺ィだ!」などと見捨てないで下さいまし
深謝

Akira  

2019/08/15 (Thu) 15:35
vanillaice (Akira)

To 立花家蛇足さん

お返事遅くなりました (*_ _)

修正できたようで安心しました。お疲れ様でした :)

コメント投稿

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)