見出しをタイトルらしく見せる字間調整

文字と文字の間にスペース入れちゃったりしてませんか?

それはNGのテクニックです。

通常の文字は、大抵そのままでもそれほど読み辛いと感じることはないと思います。
タイトルは、ほんの少し時間が広がっているとタイトルらしく見えたりするものです。
そのため、見出しの文字を広げるために「会社概要」『商品案内』などの文字の間にスペースを入れちゃって『会 社 概 要』とか『商 品 案 内』などと全角や半角の文字を入れてしまっている人がいます。でもこれはNGなんですよ。

スペースって目には見えない文字がそこに入っているってことなんです。
そんなクセがある人は、スタイルシートで予め、字間を調整してみてはいかがでしょうか。

字間調整の例(ノーマルな状態)

会社案内

▲これが大見出しです。
 ここではテストに使うため同じ色で飾り気のない大、中、小の見出しを用意しました。

 文字が詰まっていますよね。これはこれで問題はありません。

会社概要

▲見出しの中です。フォントサイズは弊社で利用しているものと同じです。
 ですが、もう少し字間を広げてみたら、どんな風に見えるのか実験してみます。


連絡先

▲これは見出しの小
 さあ、どんな風に見えるか、見出しの全てに、字間をほんの少しだけひろげてみます。

下は見出しの大中小だけの字間を広げてみたものです。

会社案内

▲これが大見出しです。
 ここではテストに使うため同じ色で飾り気のない大、中、小の見出しを用意しました。

 文字が詰まっていますよね。これはこれで問題はありません。

会社概要

▲見出しの中です。フォントサイズは弊社で利用しているものと同じです。
 ですが、もう少し字間を広げてみたら、どんな風に見えるのか実験してみます。


連絡先

▲これは見出しの小
 さあ、どんな風に見えるか、見出しの全てに、字間をほんの少しだけひろげてみます。

随分見出しらしくなったのではないでしょうか?

スタイルシートを使うと、こんな調整が簡単に出来てしまいます。

上は随分広げたように見えるかもしれませんがじつは、それぞれの文字の大きさの0.2文字分だけ広げてみました。

以下がソースになります。使ってみたいという方がいれば自由にお使いください。

<style type="text/css">

#content_area h1{            /* 見出し大に共通につけるスタイルシート */

    letter-spacing:0.2em;   /* 字間を0.2文字分だけ広げる */
}


#content_area h2{           
/* 見出し中に共通につけるスタイルシート */

    letter-spacing:0.2em;  /* 字間を0.2文字分だけ広げる */
}


#content_area h3{           
/* 見出し小に共通につけるスタイルシート */

    letter-spacing:0.2em;  /* 字間を0.2文字分だけ広げる */
}

</style>

letter-spacing:の後に続く数字は、em「ひと文字分」という単位で、小数点以下でも指定することが出来ます。上記では、h1、h2、h3を全て分けましたが、これは、大見出しだけ字間を広げたいとか、見出し小は少し大きめに広げたいなど、それぞれ見出しにあわせて、調整したい時のために分けて書きました。※全て共通で書いてしまいたい場合には、次のように書くことも出来ます。


#content_area h1,#content_area h2,#content_area h3{

    letter-spacing:0.2em;

}

  1. 上記の<style>から</style>までのスタイルシートタグ(コード)をコピーする
  2. 管理メニュー(右側の)『設定』ボタン(歯車のマーク)を押す
  3. 開いたメニューから『ヘッダー部分を編集』(グレーのアイコン)を選択する
  4. コピーしたコードを貼り付ける
  5. 『保存』ボタンを押す
  6. ページの再読み込み(F5ボタン)をする

 

▼ タグの貼り付け方はここ マウスを当てると画像が開きます。

この記事がいいなと思ったらメールマガジンに登録していただけると嬉しいです。
メールアドレスを入力して登録ボタンを押してください。

株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422