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

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

ブログ運営を行っていると、まず最初にカスタマイズをしたい衝動に駆られるのが「見出し」ではないでしょうか!?

テーマやテンプレートを使用していても、見出しのデザインがかぶってしまったり、はたまた地味?なデザインであったり・・

あなたのサイトに合ったオリジナルでおしゃれなデザインにしたいですよね!?

ということで、この記事では、コピー&ペースト(コピペ)で使える見出しのおしゃれなCSSデザインを合計25種類まとめました。

後半では、それらの見出しをオリジナルにカスタマイズする方法をお伝えしていきます。

見出しを表示させる方法が分からない場合は、

の記事を参考にしてみてください。

上記の記事を理解しておけば、CSSのデザインと実際に表示させる方法までスムーズに行うことができます。

:CSSの編集を行う場合は、必ずバックアップをとってから行うようにしてください。
カスタマイズによるサイトの不具合は、当サイトでは責任は負いかねますので個人の判断で行うことをご了承ください。
バックアップ方法が分からない場合は、

を参考にしてみてください。

おしゃれな見出しのCSSデザイン【まとめ】

各見出しのCSSデザインのサンプルを紹介します。

そのままコピペして貼り付けてお使いください。

また、サンプルを元にあなたのオリジナルに修正しやすいポイントもお伝えしていきますので参考にして編集してみてください。

左線のみの見出し

見出しのCSSデザイン-sample01

 

 

左線と下線の見出し

見出しのCSSデザイン-sample02

 

 

上下二重線の見出し

見出しのCSSデザイン-sample03

 

 

角を丸めた見出し

見出しのCSSデザイン-sample04

7行目~9行目にかけては、角を丸める記述になります。

角を丸めたくない場合は7行目?9行目を削除すると四角い枠になります。

吹き出しタイプの見出し1

見出しのCSSデザイン-sample05

sample04と同じように10行目~12行目までを削除すると、角ばったデザインになります。

背景色を変更した場合は、背景色に合わせて19行目の色も変更させましょう。

吹き出しタイプの見出し2

見出しのCSSデザイン-sample06

影をつけてへこませたように見えるデザインです。

背景色を変更した場合は、背景色に合わせて20行目の色も変更させましょう。

補足:濃い色を選択すると、影の部分が目立たずにあまりへこんでいる感じに見えません。薄い色を選択することをおすすめします。

吹き出しタイプの見出し3

見出しのCSSデザイン-sample07

下線部分だけにラインが入っています。

上にもラインを表示したい場合は『border-top: 2px solid #〇〇〇〇〇〇;』を

背景色を変更したい場合は『background-color: #〇〇〇〇〇〇;』を2行目~7行目の間に貼り付けましょう。

:吹き出し部分の線の太さは変更してしまうとデザインが崩れてしまうので、線の種類と色だけの編集にとどめておきましょう。

リボン型の見出し1

見出しのCSSデザイン-sample08

両サイドの折り返しの色を変更したい場合は、『折り返しの色1、2、3』をそれぞれ変更します。

テキストを左側に寄せたい場合は、6行目を削除しましょう。

リボン型の見出し2

見出しのCSSデザイン-sample09

リボン部分のサイズがずれる場合は、28・31行目(同じサイズにする)のサイズを変更してみてください。だいたい20~23pxの間のサイズで合うと思います。

ページ:

1

2 3

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

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

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

関連記事

コメント

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

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

CAPTCHA


ピックアップ記事

コンセプトを決めたチラシ作成のコツと、GIMPでチラシ作成

コンセプトを決めるコツと、GIMPでチラシ作成

GIMPの使い方として様々な基本操作方法をお伝えしてきました。 今回はその使い方を応用してチラシを作ってみます。 その工程を解説しながら…

おすすめ記事

Now!!

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

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