コピペで使える見出しデザインいろいろ

私の製作したテンプレートについては各専用記事を必ず用意していますが、ARTICLE DEMO のページを開くとそのテンプレートの固有機能説明があり、そこに掲載されている見出しデザインはすぐに利用できるようになっていますので事前にご確認ください。

見出しデザイン という文言が無い場合には自動で見出し装飾が行われることはありませんので、本記事をご覧頂きまして、CSS内容の追加を行なってください。
CSSを指定しない限り装飾はできませんので、ご自身でソース追加及び管理をお願いします。

本記事内で テンプレート と書かれている箇所については全て 私がリリースしたものに限ります。
他者製作者様テンプレートへの言及は一切ありませんので事前にご承知おきください。

一部テンプレートに既に含まれている見出しデザイン

ご自身のテンプレートに含まれているかを事前にご確認ください。
CSS内容が重複してもレイアウトが崩れるといった重大なことは起こりませんが、無駄な記述となり、ページの読み込みが微々たるものとはいえ遅くなります。

ソース内容の右上に Markup とあるものはhtml内容です。
記事を書く際に利用したい場面で毎回記述する内容です。

右上に CSS とあるものはCSS内容です。
テンプレート管理画面下段にあるスタイルシートの末尾に追加してください。

html, CSSソース共に Copy をクリックして頂くことで内容が一発コピーされます。
そのままご自身のページでペーストを行なってください。

最終章に重要な内容を記しています。部分的ではなく、記事内容全てに目を通して頂ますようお願いします。

手書き風

<h2 class="freehand">テキスト内容</h2>

.freehand {
  border: 3px solid rgb(230,230,230); /* ボーダーの色 */
  border-radius: 3em .7em 2em .7em/.7em 2em .7em 3em;
  padding: 1em;
  font-weight: bold;
}

ドッグイヤー

<h2 class="dogear">テキスト内容</h2>

.dogear {
  position: relative;
  padding: 1em;
  background-color: rgb(240,240,240); /* 背景色 */
  color: rgb(51,51,51);
  font-weight: bold;
}

.dogear::after {
  content: "";
  width: 0;
  border-width: 0 16px 16px 0;
  border-style: solid;
  border-color: white white rgb(221,221,221) rgb(221,221,221); /* whiteの部分は記事背景色と同じものを指定 */
  box-shadow: -1px 1px 2px rgba(0,0,0,.1);
  position: absolute;
  top: 0;
  right: 0;
}

カール

<h2 class="curl">テキスト内容</h2>

.curl {
  background-color: rgb(240,240,240); /* 背景色 */
  padding: .5em .75em;
  position: relative;
  z-index: 3;
  font-weight: bold;
  transform-style: preserve-3d;
}

.curl::before,
.curl::after {
  content: "";
  width: 30%;
  height: 50%;
  position: absolute;
  bottom: 8px;
  z-index: -1;
  box-shadow: 0 10px 15px rgba(0,0,0,.2);
}

.curl::before {
  left: .3em;
  -webkit-transform: translate3D(0,0,-1px) rotate(-3deg);
  transform: translate3D(0,0,-1px) rotate(-3deg);
}

.curl::after {
  right: .3em;
  -webkit-transform: translate3D(0,0,-1px) rotate(3deg);
  transform: translate3D(0,0,-1px) rotate(3deg);
}

注意
テンプレートの構造によっては利用できない場合があります。

どのテンプレートにも含めていない見出しデザイン

既存テンプレート(もちろん私が制作したものについてです)のいずれにも含めていない見出し装飾です。
お使いになる場合には新規でCSSへの追加を行なってください。

淡い色(ペイル)の見出し

<h2 class="pale">テキスト内容</h2>

.pale {
  width: calc(100% - 10px);
  background-color: rgb(239,239,255); /* 背景色 */
  outline: 1px solid rgb(239,239,255); /* ボーダータイプ */
  outline-offset: 5px;
  padding: 8px;
}

注意
IE11を含む全てのIEで利用不可(outlineプロパティ未実装のため)

バルーン(吹き出し)の見出し(ボーダーなし)

<h2 class="balloon">テキスト内容</h2>

.balloon {
  background: rgb(232,248,239); /* 背景色 */
  padding: .6em;
  position: relative;
}

.balloon::after {
  content: "";
  width: 0;
  height: 0;
  border: 15px solid transparent;
  border-top: 15px solid rgb(232,248,239); /* 吹き出し矢印部分 */
  position: absolute;
  top: 100%;
  left: 30px; /* 吹き出し矢印の位置(左端からの距離) */
}

バルーン(吹き出し)の見出し(ボーダーあり)

<h2 class="balloon2">テキスト内容</h2>

.balloon2 {
  position: relative;
  margin: 0 0 2.5em;
  padding: .5em .75em;
  border-radius: 3px;
  border: 2px solid rgb(220,220,220);/* ボーダーの色と太さ */
  background: rgb(254,238,221);/* 背景色 */
  color: rgb(51,51,51);/* 文字色 */
}

.balloon2::before,
.balloon2::after {
  content: "";
  top: 100%;
  left: 50%;/* 矢印を水平中央にしない場合は削除 */
  height: 0;
  width: 0;
  border: solid transparent;
  position: absolute;
  pointer-events: none;
}

.balloon2::before {
  border-width: 18px;
  border-color: transparent;
  border-top-color: rgb(220,220,220);/* ボーダー色 */
  transform: translateX(-50%);/* 矢印を水平中央にしない場合は削除 */
  /* left: 27px; 矢印をを左に寄せる場合はコメント解除 */
}

.balloon2::after {
  border-color: transparent;
  border-top-color: rgb(254,238,221);/* 背景色 */
  border-width: 15px;
  transform: translateX(-50%);/* 矢印を水平中央にしない場合は削除 */
  /* left: 30px; 矢印をを左に寄せる場合はコメント解除 */
}

セロテープの見出し

<h2 class="scotchtape">テキスト内容</h2>

.scotchtape {
  background-color: rgb(241,248,255); /* 背景色 */
  border-radius: 2px;
  padding: 1em .6em .6em;
  position: relative;
}

.scotchtape::before {
  content: "";
  display: block;
  width: 70px;
  height: 30px;
  background-color: rgba(211,218,225,.9); /* セロテープ部分背景色 */
  background-image: radial-gradient(white 20%, transparent 0),
                    radial-gradient(white 20%, transparent 0);
  background-position: 0 0, 8px 8px;
  background-size: 15px 15px;
  border-left: 2px dotted rgba(0,0,0,.1);
  border-right: 2px dotted rgba(0,0,0,.1);
  box-shadow: 0 0 5px rgba(0,0,0,.2);
  position: absolute;
  top: -15px;
  left: 30px;
  -webkit-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

hタグへの細かな指定 重要

テンプレートのhタグについて

今回ここで紹介するデザインにはいずれも margin設定とフォントサイズ設定を含めていません。

既存テンプレートの記事範囲に該当する部分については、位を問わず全てのhタグを初期値設定にしてあります。
例えばhタグの初期値は

h1 {
margin: .67em 0;
font-size: 2em;
font-weight: bold;
}

こうして予めスタイルを持っているんですね。
位が下がるとmarginやfont-sizeなどは小さくなります。
テンプレート内のCSSソースで意図的な変更が加えられていなければ初期値適用となります。
で、私のテンプレートは初期値のまま残してあります。

初期値で都合が悪い、と感じる場合には

• margin
• font-size

上記2プロパティについてそれぞれ指定を行なってください。
font-size の指定を行う場合は px などの絶対数値指定を避け、em の相対数値指定をおすすめします。

独自クラスであることをお忘れなく

全て 独自クラス での装飾です。
テンプレートを変更する際、引き続き装飾が必要な場合には CSS内容の移植を怠らない ようにしてください。
でないとデザインは全て失われます。

ご質問・サポートについては私のテンプレートをご利用の方に限らせてくださいね。