ブログ用の見出しCSSサンプル第二弾です。
今回は、CSSで囲い枠がある見出しサンプルをご紹介します。
WordPressのスタイルシートにもそのままコピペで使用できますのでご利用下さい。
WordPressに利用する場合このサンプルCSSをWordPressの見出しに利用する場合は以下の記事を見て下さい。
目次
囲い枠がある見出しサンプル
シンプルな囲い枠
文字色や枠線の色や大きさ、背景色などアレンジして好みのデザインにチャレンジして下さい。
囲いに丸みを付けた見出し
囲い枠にラインを入れた見出し
リボン系見出し
|
1 |
border-color: transparent transparent transparent #ffffff; |
transparent transparent transparent #ffffff の色は背景色に合わせて下さい。
文字数が多く、改行してしまう場合には対応しておりません。
グラデーション系見出し
グラデーションも、なかなかいいですね～
WordPressに利用する場合このサンプルCSSをWordPressの見出しに利用する場合は以下の記事を見て下さい。
まとめ
今回は、見出しに枠を付けたデザインを紹介しました。
今後もCSSで装飾する見出しを紹介していきます。
