文字の設定(7)ちょっと動くリンク

ホームページでもブログでも、リンクスタイルの初期設定は下線付きです。 これを消す方法は以前にこちら↓でご紹介しました。   文字の設定(6)リンク下の下線を消す 今回は、マウスを乗せるとちょっと動く設定をご紹介します。 では、CSSを設定するページを開きます。   マイ・ブログ > デザイン > デザイン一覧 ページの真ん中より下の表に現在登録しているCSSの一覧が表示されています。 例えば、「light pole(右サイドバー)」というデザインでは、 a{ color:#36C; text-decoration:none; } となっています。 これを、マウスを乗せたときに   ・1px下に動く   ・色が変わる   ・下線が付く という設定に変えてみます。 a{ color:#36C; text-decoration:none; } という箇所を下記に書き換えます。 a { text-decoration: none } a:link { color: #36c } a:hover { color: #cc0000; text-decoration: underline; position: relative; top: 1px;} hoverというのが、リンクにマウスを乗せたときの設定を書いている部分です。 一つひとつ解説しますね。 color: #cc0000   …> 濃い目の…

続きを読む

文字の設定(5) プロフィール欄の文字サイズ変更

[修正あり(2007/2/22)]プロフィール欄の文字サイズが小さいと前々から思っていました。 いつか直そうと思っていて、やっと手を入れました。 今日は、プロフィール欄の文字サイズを変えます。 Seesaaブログのユーザー向けのお話です。 まずは、どんなタグで指定されているを見なくてはいけませんね。 ブログをブラウザで開いて、メニューバーから   表示 > ソース でそのページのソースを見てみましょう。 プロフィールの欄を探します。 Ctrl+Fですぐ探せます。 このブログでは、<div class="sidetitle">プロフィール</div> <div class="side"> (以下略)となっていました。 確認したら、メモ帳を閉じます。 スタイルシートのsideの設定を変えることにしましょう。 スタイルシートを開きます。   マイ・ブログ > デザイン と進むと、「おすすめデザイン」の下に、自分が使用または登録しているデザインのリストがあります。 現在使用しているデザインのタイトルをクリックして、スタイルシートを開きます。 ※2007年2月6日のリニューアルでスタイルシートの場所が変更になりました。 先ほどのsideの指定をされている箇所を探します。 このブログでは、.side { margin: 0 10px 10px 10px; padding: 5px 0 …

続きを読む

画像の配置(1)

文章中に画像を配置すると、思うように配置されないことがあります。 例えば。<img src="http://*****" >の後に、改行しないで文字を続けた場合。 (*****には、画像のアドレスが入ります。)  iPod nanoケース ホワイト (OZIO) このように、文字の下のラインと画像の下のラインが揃います。 画像がメインで、文字がおまけなら、これでも構わないかもしれませんね。 文章中に画像を入れたい場合は、文字列の中央ラインと画像の中央ラインが揃っているほうがきれいに見えます。 例えばこんな感じ。  Merry Christmas  という具合に、下揃えの場合と、  Merry Christmas  という具合に、中央揃えの場合と、どちらが収まりよく感じますか? 画像と文字列を中央のラインで揃えるには、imgタグの中に赤字を追加します。 <img src="http://***" style="vertical-align:middle;"> これを使うと、行頭記号がうまく収まります。    小見出し1    小見出し2 という具合です。 最初の画像でやると、中央揃えはこんな感じになります。  iPod nanoケース ホワイト (OZIO) ここまでは、画像と文字列を中央で揃える話でしたが、画像の上のラインに文字列を揃えることもできます。  iP…

続きを読む

文字の設定(4) 文字の種類

[修正あり(2007/2/22)] 今回は、フォトの種類のお話です。 まず、スタイルシートの設定を見てみましょう。     マイ・ブログ > デザイン と進むと、「おすすめデザイン」の下に、自分が使用または登録しているデザインのリストがあります。 現在使用しているデザインのタイトルをクリックして、スタイルシートを開きます。 ※2007年2月6日のリニューアルでスタイルシートの場所が変更になりました。 スタイルシートの「#container」のなかの「font:」という部分を探します。 以下は、このブログの設定なので、みなさん設定が違うはずです。 ※「#container」はページ全体の設定です。 #container { margin: 0 auto; padding: 1px 0 0 0; width: 800px; color: #5D5D5D; font: 12px Verdana, sans-serif; border-left: 1px solid #999; border-right: 1px solid #999; background: #fff; }つまり、このブログのフォントは「Verdanaまたはsans-serif」に設定されているわけです。 他のフォントでは、表示がどのように変わるか見てみましょう。 ■monospaceの場合 The quick brown fox jumps ov…

続きを読む

文字の設定(3) 行間

[修正あり(2007/2/22)] 文字の読みやすさに関わる設定の一つに、行間も忘れちゃいけません。 モニタ上でも、印刷物でも、行間が狭すぎると読みにくいものです。 行を一つの塊として認識しにくいからじゃないかなと思っていますが、もっと確かな根拠を知っている方がいらっしゃったら、教えてください。 さて、それではスタイルシートの設定をしましょう。   マイ・ブログ > デザイン と進むと、「おすすめデザイン」の下に、自分が使用または登録しているデザインのリストがあります。 現在使用しているデザインのタイトルをクリックして、スタイルシートを開きます。 ※2007年2月6日のリニューアルでスタイルシートの場所が変更になりました。 文字の設定(1) 本文のサイズ で見たときと同じように、「.text」という項目を探します。 ここが本文の文字についての設定です。 .text { margin: 0; padding: 0 5px; line-height: 1.8em; }このブログでは、上のような設定になっています。 line-heighというのが、文字通り、行の高さ。単位はem。 私の経験上、(文字の大きさにもよりますが)1.6em以上あったほうが読みやすいように感じます。 1.6emから2.0emくらいまでが適切なんじゃないでしょうか。 ここの数値を変えてみると、読みやすさが変わってくるのがわかると思います。 ↓参考になった…

続きを読む

文字の設定(2) 色

[修正あり(2007/2/22)]今日は、文字の色について考えてみます。 ブログのデザインは実に豊富で、一概には言えないんですよね。 背景色もまちまち。背景に色を敷かないで画像にしてある場合もあるんだし。 だから、ここでは、このテンプレートのように背景の色が白の場合ってことで捉えてください。 色のコントラスト(強弱)は、読みやすさを大きく左右すると思うんですよ。 もっともコントラストが強いのが白×黒。 紙の媒体、つまり本とか雑誌とかは、白×黒が基本だと思うんですね。 誰にでも読みやすいから。 ところが、パソコンのモニタを見ているときは、白×黒だと目がみょ~に疲れてくるんですよ。意外なことに。 コントラストをちょっと弱くすると、目が疲れにくくなります。多少はね。 コントラストが弱すぎると、凝視することになって目が疲れます。 文字が小さくてコントラストが弱いと、読む気になれない人が続出するでしょうね、おそらく。でも、そういうブログも見かけるんですけどね~。 以下に黒からグレーの色見本を並べてみます。

続きを読む

もっと見る