【まとめ】「見出し」のCSSデザインをおしゃれにカスタマイズ!

モザイクっぽくグラデーションのかかった見出し

見出しのCSSデザイン-sample19

 

 

立体的に影のついたフォントの見出し

見出しのCSSデザイン-sample20

 

 

テキスト周りに光彩感のある見出し

見出しのCSSデザイン-sample21

 

 

グラデーションがかかった見出し

見出しのCSSデザイン-sample22

 

 

ページがめくれているように見える見出し

見出しのCSSデザイン-sample23

 

 

1文字目のフォントサイズを強調した見出し

見出しのCSSデザイン-sample24

 

 

マーカーで線を引いたように見える見出し

見出しのCSSデザイン-sample25

 

 

見出しをカスタマイズしてオリジナルに編集

上記で紹介した見出しをもとに、あなただけのオリジナルな見出しのデザインとなるようカスタマイズしていきましょう。

各見出しのsampleのCSSの記述の右側には、どんな役割を果たしているのかを補足しておきました。

初心者の人でも分かりやすい部分に絞ってカスタマイズできるようにしてありますので下記の表を参考に編集を行ってみてください。

見出し編集一覧

表示方法 カラーコード一覧
#〇〇〇〇〇〇 原色大辞典(参照)
1本線 2本線 破線 点線
solid double dashed botted
フォント太さ

フォントの太さは、下記の表以外にも100~900までの数値で示すこともできます。

400=normal、700=boldのサイズとなります。細かく指定したい場合は数値で示しましょう。

標準 太い
normal bold
位置
真ん中
left center right
サイズ、太さ
1ピクセル1の大きさ フォントの大きさ1が1 全体(100%)に対しての%の値
px em %

 

おわりに

少しの編集だけでも、あなたのサイトに合ったカラーリングやデザインへと編集できたのではないでしょうか!?

また、CSSの基礎的な知識にも触れてなんとなく・・・でも、どういう要素でサイト表示されているのかを理解することができたのではないかと思います。

様々な見出しを組み合わせて編集し、サイト運営が少しでも楽しくなるような、訪問者の目を惹く見出しデザインとなるように挑戦してみてください。

ページ:
1 2

3

[記事公開日]2016/07/06
[最終更新日]2017/02/13

最新情報、定期購読にはFacebookページが便利です。

ブログ吹き出し使用素材1

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


ピックアップ記事

知っ得べき!Googleウェブマスターツールの使い方

知っ得べき!Googleウェブマスターツールの使い方

Googleウェブマスターツールを導入したけど使い方がよく分からない・・・ 導入するだけでも効果のあるものですが、さらにはうまく利用するこ…

おすすめ記事

Now!!

当サイトのテーマ(テンプレート)

WordPressテーマ「AN (tcd014)」
ページ上部へ戻る