現役パソコン講師によるネットビジネス講座

ブログでもサイトでもそうだけど、
見た感じでどうしても気になるのが、 行間と文字間隔。

 

もちろん、デザインも気になるけど、
ブログのデザインまで自作しちゃうと、大変なので、 そこはテンプレートで。

 

それをゴチャゴチャいじくるだけでも、どんどんオリジナルになっていきますよ！

 

で、本題。 行間っていうのは↓

文字間隔は、↓

こういうことね。

テンプレートを使うと、日本語はいいんですが

アルファベットが混ざった時に 妙に文字間隔が狭くなって見にくくなることがあるので、
気になったら調整してみましょう。

——————————

行間について

段落（空白の行）を空けたい時は、
CSSじゃなくて、自分で改行して間を空けてね。

※改行（＜ｂｒ＞タグ）を連続でたくさん書くとブラウザに無視されることがあるようなので、
数行の間を空けたい時は＜ｐ＞タグを使うほうがオススメ。

 

ここでは、全角でタグを記述してますが、
タグは必ず半角でね！

閉じる＜／ｐ＞も忘れないように。

 

CSSで調整するのは、一つの段落の中での行間です。
すぐ次の行との間ね。（分かりにくい？）

 

行間 line-height: **px;

 

これで、行間を設定します。

**に好きな数字を入れるんですね。

大きい数字を入れれば広く、小さい数字を入れれば狭くなります。

単位が px になってますが、% とか cm とか mm とか色々使えます。
（ですが、センチやミリを使うことは、オススメしません）

で、この line-height: **px; を、
ブログ（サイト）のスタイルシートに書くんですが、

これはやり方がブログサービスによって違うんですよね。

最近のブログはCSSを触れるんじゃないかと思うので、
CSSとかスタイルシートっていうのを探してください。

 

サイトなら、拡張子.cssのファイルです。

 

シーサーブログなら、
上のメニューの 「デザイン」→「デザイン一覧」→下の方に現在使っているデザイン名が出てるはずなので、
使ってるヤツをクリックすると出てきます。
（分かんない時は、メールくださいね）

 

ここで注意。 スタイルシートをいじくると、デザインが崩れることがあります。

元の状態に戻す機能が付いていればいいですが、
そうでなければ 必ず、コピーを取っておくとか、おかしくなったときにすぐに戻せるようにしておいてください。

元に戻せなくなった、などの責任は取れませんよ？

表示されたスタイルシートの全部をコピーして、Win付属のメモ帳とかに貼り付けておくといいです。

 

準備はOKですか？

 

では、ここに行間を指定する「line-height:」を書くんですが、
「どこに？」って話ですよね。

 

英語ばっかりで難しそうです‥‥。
でも、関係ないとこは無視しとけばいいです。 今必要なのは行間だけ。

 

さて、お使いのCSSに、「line-height:」と書かれた場所がありますか？
‥‥英語ばっかりで分からないですね。

 

そういう時のスキルアップ！

検索機能を利用してください。
Windows使用の方は、「Ctrl+F」
Macintosh使用の方は、「Cmd+F」（のハズ；）です。

どこに出るかは、ブラウザによるのでハッキリ言うことができませんが、

検索って書かれたものが出たはずなので、（Firefoxをお使いの方は、画面下部です）
そこに「line-height:」をコピペして検索してください。

 

・　見つかりました？

見つかった人は、そこで行間を設定してあるみたいです。
数字をいじくってみましょう。

もしかしたら、一か所だけじゃないかもしれないので、注意。

 

・　ありませんでした？

私も最初はありませんでした。

では、書いてしまいましょう。

 

どこにか、って話ですが、 bodyって書いてるところを見つけてください。

 

body｛ ・ ・ （なんか色々書いてる） ・ ・ ｝

ってなってるハズですので、
この｛から｝の間に、『line-height: **px;』を書き加えてください。
最後の『；』を忘れないように！

 

—————————————————–
**に数字を入れるっていっても、
具体的にどのくらいの数値でどうなるのか、分かんないですよね。

 

私も分かんないですよ。
文字サイズにもよりますし。

 

ので、考えるよりも動け！です。

適当に入力してみて、プレビューなどで確認しながら調整してください。
実験です。

——————————

文字間隔 letter-spacing: **em;

使い方は、行間と同じです。
これも**に数字を入れて使ってね。
 

単位が em になってますが、これもいろいろ使えます。 行間と一緒です。

 

ちなみに、この「em」という単位は、 1em＝1文字分　だと解釈してください。

文字間隔を1文字分（＝1em）にしちゃうと、
見にくいので、注意してね。 間隔を開けすぎです。

 

ちなみに、このブログは0.1emです。今のところ。

 

——————————

私の生徒さんに教えるなら、 この説明では難しいだろうなあ‥‥。

もし、これを見ても分かんなかったら、 この部分が分からないとか、
ここまでやってみたけど分かんないとか、メールしてね。

 

どこのブログサービスを使ってるのかも忘れちゃダメですよ。

 

状況を伝えてくれれば、分かる限りでお答えします。

-----------------------------------------------------

お問い合わせは、コチラからどうぞ！

▼おきてがみ


■関連記事--------------------------------
簡単な言葉を使ってください。
お客様に自分を知ってもらおう
話題が変わったら‥‥
無料だからって手を抜かない。
第一印象で差別化する