|
|
|
2005年01月31日
カテゴリ：バカネコＰＣ講座
 楽天に限らず、ブログの既定の文字は小さすぎる。 読みにくいから、読む気にならないことも多い。 これではアクセスが上がるわけはない。 小さい文字を使って、小さく感じさせないテクニックは、あるにはある。 ＨＰではよく使われるが、デザインと文章の作り方に相当気を使う。 だが、ブログでそんなことを、いちいち気にしていたら、書けたものではない。 というわけで、今日のバカネコ講座は、行間と文字を大きさの調整を 再び、とりあげてみる。 方法はいろいろある。 ずっと以前にも、字を大きく、行間を広くする方法を紹介した。 <span style="line-height: 180%"><font size="3"> と、 </font></span> で、本文を挟む方法である。 なぜ、字を大きく行間を拡げた方が良いか、その理由や効果については 「ページを読みやすくする方法」を参照していただきたい。 実際の比較表示もある。 本文中で、文字の色や大きさを、指定する人も多い。 フォントタグがあると、混乱するかもしれないから、 いっそ、フォントタグをやめてしまおう。 今回は、もう少し、細かく調整できて、タグひとつで済むようにしてみる。 以下のように書いても、同じ効果が得られる。 <span style="line-height: 180%; font-size: 120%;"> 本文がどうのこうの．．． オシッコ攻撃がどうのこうの．．． バカネコがどうのこうの．．． </span> さて、これを良くにらんでいただきたい。 180％ だの、120％ だの書かれていることに注目。 この数字をいじると、自由に調整がきくのである。 line-height とは、行の高さの指定である。 この数字を大きくすれば、好きな行間隔が選べるわけだ。 100％ 以下も指定できるが、上下の行の文字が重なってしまう。 文字の大きさにもよるが、150～180％ くらいが読みやすい。 font-size は、説明するまでもなく、文字サイズである。 既定の文字を100％として、どのくらいの大きさにしたいか、指定すればよい。 いくらでも好きな大きさが選べるが、120％ が良さそうだ。 ただ、100％を指定すると、何も変わらないので、指定する意味はない。
通常のHTML標準は、活字の大きさで言えば12ポイント、 フォントタグのサイズで言えば ３、である。 それに対して、楽天を始めとするブログの文字サイズは10ポイント。 わずか、２ポイントの差なのだが、すごく小さく感じる。 通常のサイズに戻すだけで、ぐっとラクになる。 インターネットエクスプローラや、バカネコビューアで実験してみれば すぐ、その効果が実感できる。 今回、このタグの中に仕込んだ、仕掛けをスタイルシートというのだが、 名前だけ知っていれば良かろう。 重要なのは、文字サイズも行間も、自分の望み通りにすることだ。 この方法の利点は、タグで挟んだ部分だけを、いじれることである。 タグの外側には、影響しないので、また別の設定が、好きなように出来る。 文字サイズは、「120%」などの相対指定だけではなく、「12pt」というように ポイント数などの絶対値で指定することもできる。 【今日のポイント】 １．文字や行間は、ある程度大きい方が、読みやすい。 ２．line-height と font-size は、％単位で好きなように調節できる。 ３．スペースや、コロン、セミコロン、% に注意のこと。 すべて半角である。 【追記 ※注】 WindowsXPにSP2を導入している場合は、インターネットエクスプローラで テキストファイルを見ることは出来ない。 メモ帳が立ち上がってしまう。 また、文字サイズを％で指定すると、既定の文字サイズに対して相対的に 働くので、バカネコ・ビューアでは、楽天広場よりも大きく表示される。 これは、楽天日記の既定サイズが10ポイントであるのに対し、 バカネコ・ビューアの標準が、12ポイントであるため。 【次回の予定】 それでも、タグを使うのは面倒だ、コワイ、という初心者には、 管理画面から設定する方法があるので紹介する。 文字サイズしか調節できないし、すべてのメイン画面に適用されてしまうが、 楽天を始めたばかりで不安な方は、こちらでもよろしかろう。  【コロン短信】 今度はまた玄関に放尿。 スニーカーの上にやらなかっただけマシか。 夜中、珍しく、ネコトイレに入ったので、出てきたところを、 思いっきりほめてしまった。 なんか、ちょっと違うんじゃないか．．． この記事が役に立ったと思う人は１票！ クリック →  ※バカネコ講座では、安全な方法を選んで紹介していますが、 途中でわけがわからなくなっても、責任は負えませんので、あらかじめご了承下さい。 ネコでもわかるＰＣ講座はこちら。 →バカネコ講座 ラクしてユーザビリティ改善 → ずぼらなアクセスアップ 楽天日記のダウンロードツール → バーニャン１号の秘密 うっとおしい下線を表示させない→テキストリンク下線の消し方 画面右上「日記リンク追加」をクリック、「◎追加する」ボタンを押すとこの日記がリンクできます。 子猫の里親募集にお力添えをいただける方、または、このサイトの新着記事の通知をご希望の方はご利用ください。 お気に入りの記事を「いいね！」で応援しよう
[バカネコＰＣ講座] カテゴリの最新記事
|
|
|||||||
