見出しデザインに使えるCSSコードを紹介!
- WebDesign
- 2015/10/2
ブログの見出しに使えるデザインのコードを紹介します。
ブログ記事に彩りを持たせよう
ブログ記事に限った話ではありませんが、見出しのデザインは重要です。人を引き付けるために文面はもちろんのことデザインにもこだわりましょう。最近ではインターネット上にソースコードが公開されていますから導入は簡単です。Wordpressを使っている人も、サイドバーの『外観』から『テーマの編集』を開き、該当箇所を書き換えることで使用することができます。
h2タグ
まずはこちら
h1{
position:relative;
padding-left:30px;
border-bottom:2px solid #ccc;
font-weight: bold;
font-size: 22px;
line-height: 38px;
}
h1:before{
content:'';
height:12px;
width:12px;
display:block;
background:#00A8FF;
box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
-moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
position:absolute;
top:-0px;
left:5px;
transform:rotate(-50deg);
-webkit-transform:rotate(-50deg);
-moz-transform:rotate(-50deg);
-o-transform:rotate(-50deg);
-ms-transform:rotate(-50deg);
}
h1:after{
content:'';
height:8px;
width:6px;
display:block;
background:#00A8FF;
box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
-moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
position:absolute;
top:16px;
left:2px;
transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-o-transform:rotate(-90deg);
-ms-transform:rotate(-75deg);
}See the Pen MabKqm by rera_sikani2 (@rera_sikani2) on CodePen.
ソースは便宜上h1見出しですが、当ブログではh2見出しとして使っていて、記事一覧のページでは各ページへのリンクがこのデザインになっています。h2タグで加飾のため文字をpadding-leftで一文字分右へずらしています。そしてbefore要素とafter要素で青い四角をそれぞれ1つずつ描画しています。
h4見出し
お次はh4タグです
h4{
position:relative;
padding-left:30px;
font-weight: bold;
font-size: 22px;
line-height: 38px;
}
h4:before{
content:'';
border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
height:12px;
width:12px;
display:block;
position:absolute;
top:14px;
left:7px;
background-color:#6B0CE8;
box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
filter:alpha(opacity=50);
-moz-opacity:0.50;
-khtml-opacity: 0.50;
opacity:0.50;
z-index: 1;
}
h4:after{
content:'';
border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
height:15px;
width:15px;
display:block;
position:absolute;
top:7px;
left:2px;
background-color:#00A8FF;
box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset
}See the Pen jbVWXV by rera_sikani2 (@rera_sikani2) on CodePen.
これもさっきと同じくh4タグで一文字分左にスペースを開けて、before要素で小さい方の◯を、after要素で大きい方の◯を描画しています。
h6タグ
h6{
position:relative;
padding-left:30px;
font-size: 15px;
line-height: 38px;
}
h6:after,h6:before{
content:'';
height:18px;
width:4px;
display:block;
background:#00A8FF;
position:absolute;
top:8px;
left:15px;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
}
h6:before{
height:10px;
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
top:16px;
left:7px
}See the Pen wKoMNK by rera_sikani2 (@rera_sikani2) on CodePen.
このタグは注意書きなどに用いています。after要素とbefore要素を同時に指定しているところでチェックマーク右側の直線を描画してその後のbefore要素で左側の直線を描画しています。
その他の文字デザイン
ここからは番外編で、見出しではないものの当ブログで使用している文字デザインのソースコードを公開します。
.link a{
text-align:center;
display: inline-block;
padding: 10px 20px;
text-decoration: none;
border: 1px solid #1f9ac9;
transition-property: color, border-color;
transition-duration: .2s;
margin: 10px, 10px;
margin-bottom:20px;
color: #1f9ac9;
transition-property: color;
transition-duration: .2s;
}See the Pen RWorvm by rera_sikani2 (@rera_sikani2) on CodePen.
これは記事中で外部サイトに飛ぶ際に使うデザインです。レビュー記事の冒頭に公式ページへのリンクとして置くことが多いです。
しかし、記事の最後に置く関係するもの一覧にはh4タグを使っています（汗）
あとがき
普段僕が使っている文字デザインをいくつか紹介しましたが、いかがでしたでしょうか。Wordpressを使っている人なんかはテーマ既定の見出しを使っている人も多いと思います。配布されているテーマは人と被ることもあるので見出しだけでも変えて差別化を図るのも面白いですよ。