mail2

CSSで見出しのデザインを変更!コード一覧とテンプレートも公開!

岩田です、

サイトを運営していると
気になるのが見出しですよね。

CSSで見出しのデザインを少し変えるだけで
大きくイメージが変わってきます。

「このサイト見やすいな~」

と訪問者に思わせることができれば
ユーザビリティの向上で滞在時間とか
間接的に伸びることもあります。

基本的にスクロールして見出しを見て
本文を確認する方が多いと思います。

ですので、

見出しと本文の区別がつかないような
見出しはNGだと思っています。

例えば、

文字を強調(太く)しただけの見出しでは
ただ単に太字にしているようにしか見えません。

そこで、しっかりと区別できるように
デザインを変更していきましょう。

CSSで見出しを変更するのに使うコード一覧

まずはこの画像を見てください。

CSS 見出し デザイン

この画像を見ながらこれから説明するものを
確認していってください。

border(ボーダー)

テキスト周りの枠線を指定します。

  • border
  • 上下左右に枠線を表示させる

  • border-top
  • 上に枠線を表示させる

  • border-right
  • 右に枠線を表示させる

  • border-bottom
  • 下に枠線を表示させる

  • border-left
  • 左に枠線を表示させる

この枠線をすべて表示する(borderのみ記述する)ことで
見出しテキストを四角で囲むことができます。

使い方はこのような感じです。

上記の記述はこのように指定してます。

・上に枠線を表示する
・枠線の太さは5px
・枠線のスタイルはソリッド(実線)
・カラーは赤

border-style(スタイル)

枠線の種類です。

  • none
  • 枠線の表示はしません

  • hidden
  • こちらも枠線の表示はされません

  • solid
  • 実線(1本線)

  • double
  • 2本線

  • groove
  • へこんでる様な線

  • ridge
  • 浮かび上がるような線

  • inset
  • 立体的なボタンを押したような線

  • outset
  • 立体的なボタンを押してない状態のような線

  • dashed
  • 破線

  • dotted
  • 点線

こんな感じで使います。

padding(パディング)

テキストから枠線までの間隔です。

  • padding
  • テキストと枠線の周囲の間隔

  • padding-top
  • テキストと枠線上の間隔

  • padding-right
  • テキストと枠線右の間隔

  • padding-left
  • テキストと枠線左の間隔

  • padding-bottom
  • テキストと枠線下の間隔

よく見出しでしようされる下の枠線と
テキストの間隔を調整したりするのに使用。

ちなみにこれにはコツがあって
例えば

と記述すると上下左右とも同じ間隔で
余白を指定できます。

それで、バラバラに指定したい場合は
topとかbottomとか指定しなくても
paddingのみで指定することもできます。

例えば、

のようにすると
上からスタートで時計回りに
余白を指定できます。

上、右、下、左の順番で指定できるのです。

上記の場合でいうと

・上に3pxの余白
・右に5pxの余白
・下に4pxの余白
・左に1pxの余白

というように記述されています。

margin(マージン)

枠線の外側の間隔です。

イメージとしては記事本文との間隔、
またはコンテンツ枠との間隔です。

  • margin
  • 上下左右の枠線の外側の間隔を指定

  • margin-top
  • 上の枠線外側の間隔を指定

  • margin-right
  • 右の枠線外側の間隔を指定

  • margin-bottom
  • 下の枠線外側の間隔を指定

  • margin-left
  • 左の枠線外側の間隔を指定

そして、これもpaddingと同じように
marginだけで4つの枠線外側の間隔を
指定することが可能です。

width(幅)&height(高さ)

ボックス(枠線)の高さと幅を指定することができます。

paddingとmarginを使うので
あまり使わないと思います。

text-shadow

text-shadowを使うことで
文字自体に影をつけることができます。

例えば、

とした場合は

・右に1px
・下に2px
・ぼかし度合い3px

というような形になります。

手前の数字から順に

1:X軸のずれ(右側へ)
2:Y軸のずれ(下へ)
3:ぼかし度合い

というように数字を決めていきます。

最後に色を指定すれば完成です。

box-shadow

ボックス(枠線)に影をつけることができます。

使い方は

という感じに使います。

text-shadowと同様にX軸、Y軸、ぼかしの順番に
数字を決めますがbox-shadowでは影の大きさ、
範囲を指定することができます。

1:X軸のずれ
2:Y軸のずれ
3:ぼかし度合い
4:影の範囲

そして、色の指定です。

border-radius

枠線の角を丸くすることができます。
数字=半径となります。

4つの数字まで指定ができます。

数字の指定が1つの場合:
4つの角が同じ値で反映されます。

数字の指定が2つの場合:
1:左上&右下
2:左下と右上

というように指定ができます。
対角でセットということですね。

数字の指定が3つの場合:
1:左上
2:右上&左下
3:右下

というように指定できます。

数字の指定が4つの場合:
1:左上
2:右上
3:右下
4:左下

というように左上から始まり
時計回りで指定することができます。

見出しのテンプレート公開

ここからは私が自ら作成した見出しの
CSSコードを公開します。

専門家ではないのでウェブデザインのプロから
見れば記述がアマちゃんレベルだと思います。

が、

ネットビジネスを始めてからある程度の
知識がついてデザインを触りだすと
これくらいならできるようになります。

なので、

デザインの知識なんてまったく無くても
独学でそれなりに覚えれるのです。

見出しテンプレート1

シンプルな見出しっぽいデザイン。

見出しテンプレート2

ちょっとおしゃれな感じをアピール。

見出しテンプレート3

何色でもいいよかったのですが
点線で枠を作りたかったのでやってみました。

見出しテンプレート4

影を使った演出もできます。

見出しテンプレート5

フェルト感を出したかったのですが
いかがでしょうか?

見出しテンプレート6

私がセールスレターを書くときに
見出しとして使うのはこのようなイメージです。

見出しテンプレート7

両端にアクセントをつけてみました。

あくまでもテンプレートとして
公開していますので、ここから
あなた好みにアレンジしてみてください。

それでは、この辺で。

最後までお読み頂きありがとうございました。

突然ですが、金儲けに興味ありますか?

『お金を稼ぐ方法』を知りたいですか?

● 4日間で165,500円稼いだ秘密...
● 大学生が初月で50万円以上稼げたワケ
● 主婦でも毎月5万円が入金される在宅ワーク
● 芸能人のようにブログで稼ぐ仕組みの作り方
● 60歳のジジイが1日で12,000円稼いだ方法
● 家族に見捨てたれたサラリーマンの起死回生法
● あなたの私生活からお金を生み出す思考法
● 夫婦仲、恋愛にも役立つ人心掌握術
● 会社にバレずにこっそり稼げる副業ビジネス
● 脱サラして家族とずっといれる時間を作る方法
● あなたの夢を現実とする究極の目標設定

など、

インターネットで稼ぐために
必要な情報をふんだんに詰め込んだ
最強のバイブルを僕のメルマガに
登録してくれた方にプレゼントします。

現在、まとめの段階に入っているため、
近いうちに配布することができます。

が、

配布したあとの反響によっては
有料で販売するかもしれません。

そのつもりで作っているので、
無料で手に入れられるのは

"イマ"登録した人だけになるかもです。

ですから、僕の作った最強のバイブルに
興味があり、ネットで稼ぐ情報が

『欲しい!!』

という方は今のうちに登録だけでも
済ませておいてください。

ブログで書いてしまうと、
僕が積み上げてきたノウハウが
パクられてしまいます。

そうなると僕の儲けが減ってしまって、
おいしい思いができなくなる可能性が
出てくるので、メルマガ読者だけに
公開していこうと思います。

メルマガに登録してくれる人数なんて、
日本の人口からすれば、微々たるものですし、
僕の稼ぎに影響を与えることはありません。

下に表示されるメルマガ登録フォームに

※名前(性)
※メールアドレス(普段使っているもの)

を入力して「今すぐ"登録"する!」ボタンを
クリックしてください。



*お名前(姓)
*メールアドレス

注) 登録いただく名前・メールアドレスは
最先端のセキュリティシステムを使って、
プライバシー保護しますので、ご安心ください。



すぐに折り返し、自動返信メールが
送られてきますので、登録したメールアドレスの
受信ボックスを確認してください。

僕のメルマガではかなり
"強烈なコトバ"を使ったりしているので、
迷惑メールに振り分けられるかもしれません。

万が一、受信ボックスにメールがない場合は
迷惑メールフォルダも確認してみてください。

今後、僕からのプレゼント情報などを
確実に受け取るために、メールの受信設定も
しておいてくださいね!

設定方法はこちらのサイトに
詳しく書かれているので、参考にしてください。

⇒ http://46mail.net/

☆読者様のコメントです☆

  • Comments ( 0 )
  • Trackbacks ( 1 )

Facebookへのコメント

mail2