スキップしてメイン コンテンツに移動

些細な日常

Bloggerのモバイルで行間と文字間と日付位置を調節してブログの記事を読み易くする

Bloggerにブログを移転して使い方もまだ良く分からないけれども最も苦しいのは記事本文のスマホでのデザインなんだ。

ホームページの更新情報でBloggerは前から使っていて違和感を何となく受けてはいた。

デフォルのテンプレートでシンプルが厳しくて他のエスィリアルやオーサムなどはさほどでもないようだ。

改めてブログに取り入れながら注意深く考えてみると行間が日本語では狭くて読み辛いし、文字もびっしり並んでいる印象だからデザインを変えなくては好みには合わなかった。

Bloggerで記事本文の行間を調節する

ウェブのテンプレートのカスタマイズから「上級者向け」でCSSを変更すると大丈夫だ。

.mobile .post-body {line-height:1.5;}

Bloggerでモバイルのデザインを使う場合はブログ全体が「.mobile」のクラスになっているからCSSで指定すると反映する。パソコン/タブレットならば何も付けてなくて良い。

デバイスの画面幅からリダイレクトでサイトを振り分けてそれぞれにURLも違うので、CSSで何も付けないとモバイルのデザインは全く変わらない。

記事本文の全体は「.post-body」のクラスのdivタグで囲まれているので、指定すると他のところには反映しないし、その中の要素にデザインを付けられる。

Bloggerの「.post-body」はスマホのトップページ/インデックスページの記事の抜粋にも影響していてモバイルに限定しなければパソコン/タブレットでも同じだ。

CSSで行間を変更するのは「line-height」なので、好みの属性値を入れて調節する。

個人的には「1.5」を選んだ。文字サイズとのバランスで行間が狭いと目が回ったりするし、文章を主体としてブログをやって行くには厳しいだろう。広げると雰囲気が変わるから気持ちが散漫にならないところが目安ではないか。

Bloggerで記事タイトルの行間を調節する

記事本文、それと同時にトップページの記事の抜粋の行間が広がるとそれぞれにタイトルとのバランスが崩れるので、タイトルの行間も調節しておきたいと思う。

記事本文のタイトルは「.mobile .post-titie」、トップページの記事の抜粋のタイトルは「.mobile .mobile-index-title」に「line-height」を指定すれば変更することができる。

属性値は「1.25」にしてみた。文字サイズが大きいから数値で広がる度合いももっと大きい。

Bloggerでブログ全体の文字間を調節する

ブログを読み易くするには文字同士がなるべくくっ付かないと良いと思う。

Bloggerのモバイルは左右の余白が普通で、文字サイズが僅かに大きい。手持ちのXperia Z3が5.2インチの画面で、一列二十一文字になっている。大きめの文字がびっしり並ぶと、結構、辛いので、文字サイズと左右の余白は気に入っていて変えないとすると文字間を調節して何とかしたくなった。

.mobile div {letter-spacing:0.04vw;}

記事本文だけだと他のところとバランスが崩れるので、ブログ全体から文字間を調節することにした。

デフォルトで個別に指定されてないようなので、コンテンツを幾重にも囲っているけれども領域のdiv自体に「letter-spacing」で文字間を指定できる。

属性値は「0.04vw」を選んだ。文字サイズが僅かに大きめなので、文字間も僅かに大きめで、良いのではないか。行間とのバランスもある。ブログの記事に文字がびっしり並んでいるのではなくて諸々の隙間から空気が、多少、流れている感じが出て来ると読み易くて有り難い。

文字サイズは変えずに行間と文字間で文章は納得できるようになって来た。

Bloggerで記事本文の日付位置を調節する

記事本文のページでタイトルと日付がちょっと近過ぎて不味いので、引き離しておきたいと思う。人々に記事そのものが注目されなくなり兼ねない。タイトルに日付が紛らわしい。

.mobile .post {padding-top:0.5em;}

クラスの「.post」はタイトルと記事本文が入っているdivなので、その上の内側の余白を「padding-top」で増やして日付位置を遠ざけている。

どのくらいが良いかで、スマホの画面ではヘッダーからの流れも加味しながら半文字分の「0.5em」にしてみた。ブログ名と説明文の間隔よりも少し狭い。元々は物凄く狭かったので、デザインとして違和感を減らして纏まりも得られた。

ブログを文章主体でやって行くには第一条件が整えられた。落ち着いて取り組めるようになったし、初めてで分からないことも多いにせよ、Bloggerでのブロガーへの道は開かれたと喜んでいる。

関連ページ
参考サイト
  • ブログの投稿者: 結城永人
  • タイトル: Bloggerのモバイルで行間と文字間と日付位置を調節してブログの記事を読み易くする
  • 最終更新: 

コメント

最近の投稿

日付: 

Googleドライブの空にしたゴミ箱を復元する方法

イメージ

人気の投稿

宜保愛子は本物の霊能力者だと考えられる三つの真実

イメージ

昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...

平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない

イメージ

日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...

伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える

イメージ

プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...