【コピペ実装 】ブログ見出しCSSデザインカタログ

Author

トッド(Todd)

トッド

コピペで実装できる色んなブログ見出しを作ってみました。

What Content?

色んな見出し

見出しデザインカタログを作ってみました。


ワクワク

シンプルな見出し

下線見出し

CSS
h2 {
  font-size: 24px;/*文字サイズ*/
  font-weight: bold;/*文字の太さ*/
  padding: 0.5rem 1rem 0 1rem;/*要素内余白*/
  margin-top: 2rem;/*要素外余白*/
  margin-bottom: 1.2rem;/*要素外余白*/
  border-bottom: 3px solid #555;/*下線*/
}

border-bottom:太さ 線種 色;の部分を書き換えると違った印象を与えることが出来ます。

上記見出しは線種にsolid・・・一本線を使いました。

二重線

線種にdouble・・・二重線になります。

ドット線

線種にdotted・・・ドット線になります


上下線見出し

CSS
h2 {
  font-size: 26px;/*文字サイズ*/
  font-weight: bold;/*文字の太さ*/
  padding: 0.8rem 1rem 0.8rem 1rem;/*要素内余白*/
  margin-top: 2rem;/*要素外余白*/
  margin-bottom: 1.6rem;/*要素外余白*/
  line-height: 1.4em;/*行の高さ*/
  color: #555;/*文字色*/
  border-top: 3px solid #555;/*上線*/
  border-bottom: 3px solid #555;/*下線*/
 
}

上下にボーダーを引いてみました。上と下で異なる線種を使ってみると面白いかもしれません。


短い下線見出し

CSS
h2 {
  position: relative;
  text-align: center;
  font-size: 26px;/*文字サイズ*/
  font-weight: bold;/*文字の太さ*/
  padding: 0.5rem 1rem 0.5rem 1rem;/*要素内余白*/
  margin-top: 2rem;/*要素外余白*/
  margin-bottom: 1.7rem;/*要素外余白*/
  line-height: 1.4em;/*行の高さ*/
  color: #555;/*文字色*/
 
}

h2:after {
  position: absolute;
  content: "";
  width: 60px;
  height: 7px;
  top: 110%;
  left: 50%;
  right: 50%;
  background: #555;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  border-radius: 6px;
}

h2見出しで使用するにはパンチが足りない気がしますが、シックに落ち着きある見出しを求めるなら良いかもしれません。


ギザギザ下線見出し

CSS
h2 {
  position: relative;
  text-align: center;
  font-size: 26px;/*文字サイズ*/
  font-weight: bold;/*文字の太さ*/
  padding: 0.5rem 1rem 0.5rem 1rem;/*要素内余白*/
  margin-top: 2rem;/*要素外余白*/
  margin-bottom: 2.4rem;/*要素外余白*/
  line-height: 1.4em;/*行の高さ*/
  color: #555;/*文字色*/
 
}


h2:after {
  position: absolute;
  content: "";
  display: block;
  -webkit-clip-path: polygon(95% 100%, 80% 85%, 65% 100%, 50% 85%, 35% 100%, 20% 85%, 5% 100%, 0 100%, 20% 70%, 35% 85%, 50% 70%, 65% 85%, 80% 70%, 100% 100%);
clip-path: polygon(95% 100%, 80% 85%, 65% 100%, 50% 85%, 35% 100%, 20% 85%, 5% 100%, 0 100%, 20% 70%, 35% 85%, 50% 70%, 65% 85%, 80% 70%, 100% 100%);
  top: 80%;
  width: 80px;
  height: 70px;
  left: 50%;
  background: #555;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}

この見出しではclip-pathというものを使用しています。

以下の記事でclip-pathを用いた図形の作成が簡単になるツールの紹介をしています。

【css】clip-pathを使った文節の境界線を多角形で作るデザインコード&ツール

三角下線見出し

CSS
h2 {
  position: relative;
  font-size: 26px;/*文字サイズ*/
  font-weight: bold;/*文字の太さ*/
  padding: 0.8rem 1rem 0.8rem 1rem;/*要素内余白*/
  margin-top: 2rem;/*要素外余白*/
  margin-bottom: 2rem;/*要素外余白*/
  line-height: 1.4em;/*行の高さ*/
  color: #555;/*文字色*/
 
}
h2:after{
  position: absolute;
  content: "";
  display: block;
  background-image: linear-gradient(-100deg, #FF057C 0%, #7C64D5 48%, #4CC3FF 100%);
  bottom: -0.6em;
  left: 0;
  right: 0;
  height: 7em;
  -webkit-clip-path: polygon(0 95%, 100% 80%, 100% 100%, 0% 100%);
  clip-path: polygon(0 95%, 100% 80%, 100% 100%, 0% 100%);
}

大胆な下線かもしれません。この見出しもclip-pathを用いて作成しています。


囲い見出し

CSS
h2 {
  font-size: 24px;/*文字サイズ*/
  font-weight: bold;/*文字の太さ*/
  padding: 0.5rem 1rem 0.5rem 1rem;/*要素内余白*/
  margin-top: 2rem;/*要素外余白*/
  margin-bottom: 1.2rem;/*要素外余白*/
  border: 3px solid #555;/*下線*/
}

角丸囲い見出し

CSS

h2 {
  font-size: 24px;/*文字サイズ*/
  font-weight: bold;/*文字の太さ*/
  padding: 0.5rem 1rem 0.5rem 1rem;/*要素内余白*/
  margin-top: 2rem;/*要素外余白*/
  margin-bottom: 1.2rem;/*要素外余白*/
  border: 3px solid #555;/*下線*/
  border-radius: 6px;/*角丸の度合い*/
}

角丸(border-radius)で、より遊びのある複雑な形を感覚的に作成した人はコチラの記事がオススメです。

【css】Border-radiusを使った歪な形の作り方

グラデーション囲い見出し

CSS
h2 {
  font-size: 24px;/*文字サイズ*/
  font-weight: bold;/*文字の太さ*/
  padding: 0.5rem 1rem 0.5rem 1rem;/*要素内余白*/
  margin-top: 2rem;/*要素外余白*/
  margin-bottom: 1.2rem;/*要素外余白*/
  border: 3px solid ;/*下線*/
  border-image: linear-gradient(to right, #ec77ab 0%, #7873f5 100%);/*グラデーションの詳細*/
  border-image-slice: 1;
}

2.で紹介した囲い見出しのソースコードにborder-image: linear-gradient(どこから, 色 領域値, 色 領域値);とborder-image-slice: 1;を書き加えてやるとボーダーにグラデーションをかけることが出来ます。


背景色見出し

CSS
h2 {
  font-size: 24px;/*文字サイズ*/
  font-weight: bold;/*文字の太さ*/
  padding: 0.5rem 1rem 0.5rem 1rem;/*要素内余白*/
  margin-top: 2rem;/*要素外余白*/
  margin-bottom: 1.2rem;/*要素外余白*/
  background: #ffa073;/*背景色*/
  color: #ffffff;/*文字色*/
 
}

背景色を設定し、その色の明度しだいで文字色を変更してみると良いでしょう。


枠線+背景色見出し

CSS
h2 {
  font-size: 24px;/*文字サイズ*/
  font-weight: bold;/*文字の太さ*/
  padding: 0.5rem 1rem 0.5rem 1rem;/*要素内余白*/
  margin-top: 2rem;/*要素外余白*/
  margin-bottom: 1.2rem;/*要素外余白*/
  background: #b0e5ff;/*背景色*/
  color: #4fa4ef;/*文字色*/
  border: 3px solid #73b5ef;
 
}

枠線に背景色です。ここでの枠線(ボーダー)でも、solid・double・dottedの箇所を書き換えてあげると印象が変わります。


背景グラデーション見出し

CSS
h2 {
  font-size: 24px;/*文字サイズ*/
  font-weight: bold;/*文字の太さ*/
  padding: 0.5rem 1rem 0.5rem 1rem;/*要素内余白*/
  margin-top: 2rem;/*要素外余白*/
  margin-bottom: 1.2rem;/*要素外余白*/
  background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
  color: #ffffff;/*文字色*/
 
}

このグラデーションカラーが好みでなくても大丈夫!!

以下のリンクでは、180種類以上のグラデーションカラーが揃っており、好みの色を見つけられるはず。

参考 Fresh Background Gradientsitmeo

影付き背景見出し

CSS
h2 {
  font-size: 24px;/*文字サイズ*/
  font-weight: bold;/*文字の太さ*/
  padding: 0.5rem 1rem 0.5rem 1rem;/*要素内余白*/
  margin-top: 2rem;/*要素外余白*/
  margin-bottom: 1.2rem;/*要素外余白*/
  color: #ffffff;/*文字色*/
  background: #7f8faf;/*背景色*/
  box-shadow: 1px 6px 8px #aaa;/*影の付与*/
 
}

影を加えるにはbox-shadow: 横軸 縦軸 ぼかし率 色;を使用すれば簡単です。


影+斜線背景見出し

CSS
h2 {
  font-size: 24px;/*文字サイズ*/
  font-weight: bold;/*文字の太さ*/
  padding: 0.5rem 1rem 0.5rem 1rem;/*要素内余白*/
  margin-top: 2rem;/*要素外余白*/
  margin-bottom: 1.2rem;/*要素外余白*/
  color: #555;/*文字色*/
  box-shadow: 1px 6px 8px #ddd;/*影の付与*/
  background:repeating-linear-gradient(-45deg, #CAE9FF 0, #CAE9FF 10px, #E7F8FC 10px, #E7F8FC 20px);
 
}

吹き出し見出し

CSS
h2 {
  position: relative;
  font-size: 26px;/*文字サイズ*/
  font-weight: bold;/*文字の太さ*/
  padding: 0.8rem 1rem 0.8rem 1rem;/*要素内余白*/
  margin-top: 2rem;/*要素外余白*/
  margin-bottom: 2rem;/*要素外余白*/
  line-height: 1.4em;/*行の高さ*/
  color: #ffffff;/*文字色*/
  background: #6666cc;/*背景色*/ 
}

h2:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 20px solid transparent;/*三角形*/
  border-top: 20px solid #6666cc;/*三角の色*/
}

よくある、吹き出し見出しです。


影+吹き出し見出し

CSS
h2 {
  display: block;
  text-align: center;
  font-size: 26px;/*文字サイズ*/
  font-weight: bold;/*文字の太さ*/
  padding: 1rem 0.5rem 1rem 0.5rem;/*要素内余白*/
  margin-top: 2rem;/*要素外余白*/
  margin-bottom: 1.5rem;/*要素外余白*/
  line-height: 1.4em;/*行の高さ*/
  color: #555;/*文字色*/
  background: #ffffff;/*背景色*/
  box-shadow: 1px 6px 20px #e1e1e1;
  border-radius: 8px;
}
.little-say {
   position: relative;
    display: block;
    width: 30%;
    background: #f7004c;
    color: white;
    padding: 0.5rem;
    border-radius: 25px;
    margin: 0.2rem 0 1rem 0;
}
.little-say:after {
  position: absolute;/*絶対配置*/
  content: '';/*空に*/
  border-top: 12px solid #f7004c;/*三角を作る*/
  border-right: 0 solid transparent;
  border-left: 20px solid transparent;
  top: 100%;/*下にフィット*/
  left: 40%;/*中央配置*/
  transform: translateX(30%);/*一応ズレを補正*/
}
.little-says {
  font-size: 1rem; 
  font-weight: bold;
  line-height: 1.2rem;
}

この見出しだけ、独特のHTML記載方法があります。この見出しを使用するときは下記のようなHTML構成が必要です。

HTML

<h2>
  <div class="little-say">
    <span class="little-says">一言何か</span>
  </div>
ココに見出し文章を書く
</h2>

影縁取り見出し

CSS

h2 {
  display: block;
  font-size: 26px;/*文字サイズ*/
  font-weight: bold;/*文字の太さ*/
  padding: 1rem;/*要素内余白*/
  margin-top: 2rem;/*要素外余白*/
  margin-bottom: 1.5rem;/*要素外余白*/
  line-height: 1.4em;/*行の高さ*/
  color: #555;/*文字色*/
  background: #fff;/*背景色*/
  box-shadow: 1px 6px 17px #e1e1e1;
  border-radius: 8px;
}

凸凹見出し

CSS

h2 {
  display: block;
  font-size: 26px;/*文字サイズ*/
  font-weight: bold;/*文字の太さ*/
  padding: 1rem;/*要素内余白*/
  margin-top: 2rem;/*要素外余白*/
  margin-bottom: 1.5rem;/*要素外余白*/
  line-height: 1.4em;/*行の高さ*/
  color: #555;/*文字色*/
  background: #f3f3f3;/*背景色*/
  border-left: 6px solid #f9ad53;
  border-bottom: 4px solid #ccc;
}

付箋見出し

CSS

h2 {
  display: block;
  font-size: 26px;/*文字サイズ*/
  font-weight: bold;/*文字の太さ*/
  padding: 1rem;/*要素内余白*/
  margin-top: 2rem;/*要素外余白*/
  margin-bottom: 1.5rem;/*要素外余白*/
  line-height: 1.4em;/*行の高さ*/
  color: #555;/*文字色*/
  background: #f3f3f3;/*背景色*/
  border-left: 40px solid #f7004c;
  border-radius: 0 6px 6px 0;
}

カラーサンド見出し

CSS

h2 {
  display: block;
  text-align: center;
  font-size: 26px;/*文字サイズ*/
  font-weight: bold;/*文字の太さ*/
  padding: 1rem;/*要素内余白*/
  margin-top: 2rem;/*要素外余白*/
  margin-bottom: 1.5rem;/*要素外余白*/
  line-height: 1.4em;/*行の高さ*/
  color: #555;/*文字色*/
  background: #fff;/*背景色*/
  border-left: 30px solid #00e08d;
  border-right: 30px solid #f7004c;
  border-radius: 6px;
}

サブワード見出し

CSS

h2 {
  position: relative;
  display: block;
  font-size: 26px;/*文字サイズ*/
  font-weight: bold;/*文字の太さ*/
  padding: 1rem;/*要素内余白*/
  margin-top: 2rem;/*要素外余白*/
  margin-bottom: 1.5rem;/*要素外余白*/
  line-height: 1.4em;/*行の高さ*/
  color: #555;/*文字色*/
  background: #fff;/*背景色*/
  border: 3px solid #555;
  border-radius: 0 6px 6px 6px;
}
h2:before {
  position: absolute;
  content: "Topic!!";
  font-size: 18px;
  top: -1.4rem;
  font-style: oblique;
  background: #fff;
  padding: 0 6px 0 6px;
}
h2:first-letter {
  font-size: 30px;
}

ワクワク

アイコン付き見出し

その前に

以下のアイコン付き見出しには”Font Awesome 5“のWEBアイコンを使用しています。

Font Awesomeのアイコンを導入・反映させるためには、お使いのブログテーマの<head>~</head>間にCDNコードを貼り付ける方法があります。

※2019年4月現在のコードはコチラになります。

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

コメント

CSS

h2 {
  position: relative;
  display: block;
  font-size: 26px;/*文字サイズ*/
  font-weight: bold;/*文字の太さ*/
  padding: 1rem;/*要素内余白*/
  margin-top: 2rem;/*要素外余白*/
  margin-bottom: 1rem;/*要素外余白*/
  line-height: 1.4em;/*行の高さ*/
  color: #555;/*文字色*/
  background: #fff;/*背景色*/
}
h2:before {
  position: absolute;
  font-family:"Font Awesome 5 Free";
  content: "\f4ad";/*アイコン種*/
  color: #f7004c;/*アイコン色*/
  font-size: 30px;
  top: -1.3rem;
  background: #fff;
  padding: 0 6px 0 6px;
}

チェックマーク

CSS

h2 {
  position: relative;
  display: block;
  font-size: 26px;/*文字サイズ*/
  font-weight: bold;/*文字の太さ*/
  padding: 1rem 1rem 1rem 3rem;/*要素内余白*/
  margin: 2rem 0 0.5rem 0;
  line-height: 1.4em;/*行の高さ*/
  color: #555;/*文字色*/
  background: #fff;/*背景色*/
}
h2:before {
  position: absolute;
  font-family:"Font Awesome 5 Free";
  content: "\f00c";/*アイコン種*/
  color: #77dd55;/*アイコン色*/
  font-size: 30px;
  left: 0;
  background: #fff;
  padding: 0 6px 0 6px;
}

アンカー

CSS

h2 {
  position: relative;
  display: block;
  font-size: 26px;/*文字サイズ*/
  font-weight: bold;/*文字の太さ*/
  padding: 1rem 3rem 1rem 3rem;/*要素内余白*/
  margin: 2rem 0 0.5rem 0;
  line-height: 1.4em;/*行の高さ*/
  color: #555;/*文字色*/
  background: #fff;/*背景色*/
}
h2:before {
  position: absolute;
  font-family:"Font Awesome 5 Free";
  content: "\f13d";/*アイコン種*/
  color: #50adff;/*アイコン色*/
  font-size: 30px;
  left: 0;
  background: #fff;
  padding: 0 6px 0 6px;
}

ライトクラブ

CSS

h2 {
  position: relative;
  display: block;
  text-align: center;
  font-size: 26px;/*文字サイズ*/
  font-weight: bold;/*文字の太さ*/
  padding: 0.7rem;/*要素内余白*/
  margin: 2.5rem 0 0 0;
  line-height: 1.4em;/*行の高さ*/
  color: #555;/*文字色*/
  background: #fff;/*背景色*/
}

h2:after {
  position: absolute;
  font-family:"Font Awesome 5 Free";
  content: "\f0eb";/*アイコン種*/
  color: #fff550;/*アイコン色*/
  font-size: 30px;
  top: -10px;
  left: 50%;
  background: #fff;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}

~追記予定あり~

コメントを残す

メールアドレスが公開されることはありません。