結城永人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でのブロガーへの道は開かれたと喜んでいる。
コメント