この記事は約 79 分で読めます。
ユウキです。
今回は TCD テーマ「Be」と「MAG」の見出し装飾サンプルを 64 種類まとめて紹介します。
すべての CSS コードはコピペですぐに設定して使えるように確認済みのものばかりなので、気に入ったものがあればお試しください。
- TCD「Be」の見出しをカスタマイズしたい方
- TCD「MAG」の見出しをカスタマイズしたい方
- その他、WordPress の見出しをカスタマイズしたい方
装飾と CSS コードは、サルワカさんのコンテンツを参考にさせていただきました。
CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選|サルワカ
目次
見出し装飾(CSS)を追加する前に確認
この記事で紹介する見出しタグはすべて以下の HTML コードを使っています。
<h2 class="style2a">TCD テーマのおしゃれな見出しデザイン</h2>
サンプルには H2 タグを使っていますが、任意の H タグや style タグに変更してカスタマイズできるので、コピペする際に修正されてください。
style.css を最適化する
テーマの style.css には見出し用に初期設定されているスタイルがあります。
見出し装飾用に CSS を追加した際、競合して表示に不具合を起こすため、あらかじめ削除しておくとトラブル防止になります。
削除する箇所は「Be」の場合、1684 行目の h2 ~ h5 スタイルを削除。
「MAG」の場合は 1247 行目の h3 ~ h5 スタイルを削除しておきます。
「Be」の見出しで font-weight が反映されない場合
「Be」は Table of Contents Plus を使って目次を生成した場合、見出しに自動挿入される style が影響して、一部の CSS が効かない不具合を起こします。
対処法は、指定した見出しの中のスタイルに適用するように、詳細に指定する次のコードを追加すれば反映されます。
.style2a span{ font-weight: bold!important; /* 文字の太さ */ }
「MAG」の見出しで CSS がまったく反映されない場合
「MAG」は記事本文以外でもウィジェットなどに共通で見出しタグを使っています。そのため、h2 など見出しタグを直接指定して CSS コードを追加すると、サイト表示に不具合を起こします。
ですので、見出し用の CSS コードを追加する際は、必ず .post_content .style と指定しておきます。記事本文内だけに反映させられるので、サイト表示のトラブルを避けられます。
見出し装飾のサンプルと CSS コード
シンプル系
下線付き
シンプルに下線を引いたデザイン。
TCD「Be」
.style2a {
margin: 3em 0 1em; /* 上 左右 下 */
padding: .2em 0; /* 上下 左右 */
font-weight: bold!important; /* 文字の太さ */
line-height: 1.6!important; /* 行高 */
border-bottom: solid 3px black; /* 線の種類 太さ 色 */
}
TCD「MAG」
.post_content .style2a{
margin: 3em 0 1em; /* 上 左右 下 */
padding: .2em 0; /* 上下 左右 */
font-size: 22px; /* 文字の大きさ */
font-weight: bold; /* 文字の太さ */
line-height: 1.6; /* 行高 */
border-bottom: solid 3px black; /* 線の種類 太さ 色 */
}
点線+色を変える
文字色を青にして、線の種類を破線(dashed)に変えました。CSS コードがどこに反映するのか分かると、より自由なカスタマイズができますね。
TCD「Be」
.style2a{
margin: 3em 0 1em; /* 上 左右 下 */
padding: .2em 0; /* 上下 左右 */
font-weight: bold!important; /* 文字の太さ */
line-height: 1.6!important; /* 行高 */
color: #6594e0; /*文字色*/
border-bottom: dashed 2px #6594e0; /* 線の種類 太さ 色 */
}
TCD「MAG」
.post_content .style2a{
margin: 3em 0 1em; /* 上 左右 下 */
padding: .2em 0; /* 上下 左右 */
font-size: 22px; /* 文字の大きさ */
font-weight: bold; /* 文字の太さ */
line-height: 1.6; /* 行高 */
color: #6594e0; /*文字色*/
border-bottom: dashed 2px #6594e0; /* 線の種類 太さ 色 */
}
二重線
下線の二重線バージョン。色は好みで変更してみてください。
TCD「Be」
.style2a{
margin: 3em 0 1em; /* 上 左右 下 */
padding: .2em 0; /* 上下 左右 */
font-weight: bold!important; /* 文字の太さ */
line-height: 1.6!important; /* 行高 */
border-bottom: double 5px #FFC778; /* 線の種類 太さ 色 */
}
TCD「MAG」
.post_content .style2a{
margin: 3em 0 1em; /* 上 左右 下 */
padding: .2em 0; /* 上下 左右 */
font-size: 22px; /* 文字の大きさ */
font-weight: bold; /* 文字の太さ */
line-height: 1.6; /* 行高 */
border-bottom: double 5px #FFC778; /* 線の種類 太さ 色 */
}
上下に線
文字の上下にボーダーをつけたデザイン。クールな印象になります。
TCD「Be」
.style2a{
margin: 3em 0 1em; /* 上 左右 下 */
padding: .5em 0; /* 上下 左右 */
font-weight: bold!important; /* 文字の太さ */
line-height: 1.6!important; /* 行高 */
color: #364e96; /* 文字色 */
border-top: solid 3px #364e96; /* 上線 */
border-bottom: solid 3px #364e96; /* 下線 */
}
TCD「MAG」
.post_content .style2a{
margin: 3em 0 1em; /* 上 左右 下 */
padding: .5em 0; /* 上下 左右 */
font-size: 22px; /* 文字の大きさ */
font-weight: bold; /* 文字の太さ */
line-height: 1.6; /* 行高 */
color: #364e96; /* 文字色 */
border-top: solid 3px #364e96; /* 上線 */
border-bottom: solid 3px #364e96; /* 下線 */
}
単純な背景色をつける
シンプルに水色の背景色をつけたデザイン。
TCD「Be」
.style2a{
margin: 3em 0 1em; /* 上 左右 下 */
padding: .5em; /* 上下左右 */
font-weight: bold!important; /* 文字の太さ */
line-height: 1.6!important; /* 行高 */
background: #c2edff; /* 背景色 */
}
TCD「MAG」
.post_content .style2a{
margin: 3em 0 1em; /* 上 左右 下 */
padding: .5em; /* 上下左右 */
font-size: 22px; /* 文字の大きさ */
font-weight: bold; /* 文字の太さ */
line-height: 1.6; /* 行高 */
background: #c2edff; /* 背景色 */
}
全体を線で囲む
まわりを線で囲み、角少しを丸くしたデザイン。色は暗めにすると相性がいいです。
TCD「Be」
.style2a{
margin: 3em 0 1em; /* 上 左右 下 */
padding: .5em; /* 上下左右 */
font-weight: bold!important; /* 文字の太さ */
line-height: 1.6!important; /* 行高 */
color: #364e96; /* 文字色 */
border: solid 3px #364e96; /* 線色 */
border-radius: 0.5em; /* 角丸 */
}
TCD「MAG」
.post_content .style2a{
margin: 3em 0 1em; /* 上 左右 下 */
padding: .5em; /* 上下左右 */
font-size: 22px; /* 文字の大きさ */
font-weight: bold; /* 文字の太さ */
line-height: 1.6; /* 行高 */
color: #364e96; /* 文字色 */
border: solid 3px #364e96; /* 線色 */
border-radius: 0.5em; /* 角丸 */
}
背景色+下線
背景色と下線で装飾したデザインです。背景とボーダーを同系統色にするのがポイント。
TCD「Be」
.style2a{
margin: 3em 0 1em; /* 上 左右 下 */
padding: .5em; /* 上下左右 */
font-weight: bold!important; /* 文字の太さ */
line-height: 1.6!important; /* 行高 */
color: #010101; /* 文字色 */
background: #eaf3ff; /* 背景色 */
border-bottom: solid 3px #516ab6; /* 下線 */
}
TCD「MAG」
.post_content .style2a{
margin: 3em 0 1em; /* 上 左右 下 */
padding: .5em; /* 上下左右 */
font-size: 22px; /* 文字の大きさ */
font-weight: bold; /* 文字の太さ */
line-height: 1.6; /* 行高 */
color: #010101; /* 文字色 */
background: #eaf3ff; /* 背景色 */
border-bottom: solid 3px #516ab6; /* 下線 */
}
左線
左側のみ線をつけたデザインです。ブログでよく見る装飾ですね。
TCD「Be」
.style2a{
margin: 3em 0 1em; /* 上 左右 下 */
padding: .25em .5em; /* 上下 左右 */
font-weight: bold!important; /* 文字の太さ */
line-height: 1.6!important; /* 行高 */
color: #494949; /* 文字色 */
border-left: solid 5px #7db4e6; /* 左線 */
}
TCD「MAG」
.post_content .style2a{
margin: 3em 0 1em; /* 上 左右 下 */
padding: .25em .5em; /* 上下 左右 */
font-size: 22px; /* 文字の大きさ */
font-weight: bold; /* 文字の太さ */
line-height: 1.6; /* 行高 */
color: #494949; /* 文字色 */
border-left: solid 5px #7db4e6; /* 左線 */
}
左線+背景色
左線に背景色を加えたデザイン。珍しさはありませんが、見やすい装飾です。
TCD「Be」
.style2a{
margin: 3em 0 1em; /* 上 左右 下 */
padding: .5em; /* 上下左右 */
font-weight: bold!important; /* 文字の太さ */
line-height: 1.6!important; /* 行高 */
color: #494949; /* 文字色 */
background: #fffaf4; /* 背景色 */
border-left: solid 5px #ffaf58; /* 線の種類 太さ 色 */
}
TCD「MAG」
.post_content .style2a{
margin: 3em 0 1em; /* 上 左右 下 */
padding: .5em; /* 上下左右 */
font-size: 22px; /* 文字の大きさ */
font-weight: bold; /* 文字の太さ */
line-height: 1.6; /* 行高 */
color: #494949; /* 文字色 */
background: #fffaf4; /* 背景色 */
border-left: solid 5px #ffaf58; /* 線の種類 太さ 色 */
}
立体感のあるバー
背景色より暗い色の下線をつけると立体感がでます。
TCD「Be」
.style2a{
margin: 3em 0 1em; /* 上 左右 下 */
padding: .4em .5em; /* 上下 左右 */
font-weight: bold!important; /* 文字の太さ */
line-height: 1.6!important; /* 行高 */
color: #494949; /* 文字色 */
background: #f4f4f4; /* 背景色 */
border-left: solid 5px #7db4e6; /* 左線 */
border-bottom: solid 3px #d7d7d7; /* 下線 */
}
TCD「MAG」
.post_content .style2a{
margin: 3em 0 1em; /* 上 左右 下 */
padding: .4em .5em; /* 上下 左右 */
font-size: 22px; /* 文字の大きさ */
font-weight: bold; /* 文字の太さ */
line-height: 1.6; /* 行高 */
color: #494949; /* 文字色 */
background: #f4f4f4; /* 背景色 */
border-left: solid 5px #7db4e6; /* 左線 */
border-bottom: solid 3px #d7d7d7; /* 下線 */
}
シンプルなボックスシャドウ
周囲に影をつけたデザイン。背景色は白でもいいと思います。
TCD「Be」
.style2a{
margin: 3em 0 1em; /* 上 左右 下 */
padding: .5em; /* 上下左右 */
font-weight: bold!important; /* 文字の太さ */
line-height: 1.6!important; /* 行高 */
background: aliceblue; /* 背景色 */
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.23); /* 水平 垂直 ぼかし 広がり 色 */
}
TCD「MAG」
.post_content .style2a{
margin: 3em 0 1em; /* 上 左右 下 */
padding: .5em; /* 上下左右 */
font-size: 22px; /* 文字の大きさ */
font-weight: bold; /* 文字の太さ */
line-height: 1.6; /* 行高 */
background: aliceblue; /* 背景色 */
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.23); /* 水平 垂直 ぼかし 広がり 色 */
}
おしゃれ系
タグ風
少しユニークなタグ風のデザイン。見る人の目を惹きつけるかも。
TCD「Be」
.style2a{
display: inline-block; /* 文字幅に調整 */
margin: 3em 0 1em; /* 上 左右 下 */
padding: .5em; /* 上下左右 */
font-weight: bold!important; /* 文字の太さ */
line-height: 1.3!important; /* 行高 */
color: #505050; /* 文字色 */
background: #dbebf8; /* 背景色 */
vertical-align: middle;
border-radius: 25px 0px 0px 25px; /* 左側の角丸 */
}
.style2a:before {
content: '●'; /* 丸を追加 */
color: white; /* 丸の色 */
margin-right: 8px; /* 丸と文字の幅 */
}
TCD「MAG」
.post_content .style2a{
display: inline-block; /* 文字幅に調整 */
margin: 3em 0 1em; /* 上 左右 下 */
padding: .5em; /* 上下左右 */
font-size: 22px; /* 文字の大きさ */
font-weight: bold; /* 文字の太さ */
line-height: 1.3; /* 行高 */
color: #505050; /* 文字色 */
background: #dbebf8; /* 背景色 */
vertical-align: middle;
border-radius: 25px 0px 0px 25px; /* 左側の角丸 */
}
.post_content .style2a:before {
content: '●'; /* 丸を追加 */
color: white; /* 丸の色 */
margin-right: 8px; /* 丸と文字の幅 */
}
吹き出し
吹き出し風のデザイン。border-radius で角を丸くしてもいいかもしれません。
TCD「Be」
.style2a{
position: relative; /* 相対位置 */
margin: 3em 0 1em; /* 上 左右 下 */
padding: .5em; /* 上下左右 */
font-weight: bold!important; /* 文字の太さ */
line-height: 1.6!important; /* 行高 */
background: #e0edff; /* 背景色 */
}
.style2a:before {
position: absolute; /* 絶対位置 */
content: '';
top: 100%; /* 吹き出し位置調整 縦 */
left: 30px; /* 吹き出し位置調整 横 */
border: 10px solid transparent; /* 吹き出し先 横幅 */
border-top: 15px solid #e0edff; /* 吹き出し先 縦幅 */
width: 0; /* 吹き出し元 横幅 */
height: 0; /* 吹き出し元 縦幅 */
}
TCD「MAG」
.post_content .style2a{
position: relative; /* 相対位置 */
margin: 3em 0 1em; /* 上 左右 下 */
padding: .5em; /* 上下左右 */
font-size: 22px; /* 文字の大きさ */
font-weight: bold; /* 文字の太さ */
line-height: 1.6; /* 行高 */
background: #e0edff; /* 背景色 */
}
.post_content .style2a:before {
position: absolute; /* 絶対位置 */
content: '';
top: 100%; /* 吹き出し位置調整 縦 */
left: 30px; /* 吹き出し位置調整 横 */
border: 10px solid transparent; /* 吹き出し先 横幅 */
border-top: 15px solid #e0edff; /* 吹き出し先 縦幅 */
width: 0; /* 吹き出し元 横幅 */
height: 0; /* 吹き出し元 縦幅 */
}
ステッチ風
縫い目のような点線で表現したステッチ風デザイン。
TCD「Be」
.style2a{
margin: 3em 0 1em; /* 上 左右 下 */
padding: .2em .5em; /* 上下左右 */
font-weight: bold!important; /* 文字の太さ */
line-height: 1.6!important; /* 行高 */
background: #dfefff; /* 背景色 */
box-shadow: 0px 0px 0px 5px #dfefff; /* 水平 垂直 ぼかし 広がり 色 */
border: dashed 1px #96c2fe; /* 線の種類 太さ 色 */
color: #454545; /* 文字色 */
}
TCD「MAG」
.post_content .style2a{
margin: 3em 0 1em; /* 上 左右 下 */
padding: .2em .5em; /* 上下左右 */
font-size: 22px; /* 文字の大きさ */
font-weight: bold; /* 文字の太さ */
line-height: 1.6; /* 行高 */
background: #dfefff; /* 背景色 */
box-shadow: 0px 0px 0px 5px #dfefff; /* 水平 垂直 ぼかし 広がり 色 */
border: dashed 1px #96c2fe; /* 線の種類 太さ 色 */
color: #454545; /* 文字色 */
}
ステッチを白に
背景色がある程度濃い場合は、破線を白にしても相性がいいです。このサンプルは少し線を太くしています。
TCD「Be」
.style2a{
margin: 3em 0 1em; /* 上 左右 下 */
padding: .2em .5em; /* 上下左右 */
font-weight: bold!important; /* 文字の太さ */
line-height: 1.6!important; /* 行高 */
background: #dfefff; /* 背景色 */
box-shadow: 0px 0px 0px 5px #dfefff; /* 水平 垂直 ぼかし 広がり 色 */
border: dashed 2px white; /* 線の種類 太さ 色 */
}
TCD「MAG」
.post_content .style2a{
margin: 3em 0 1em; /* 上 左右 下 */
padding: .2em .5em; /* 上下左右 */
font-size: 22px; /* 文字の大きさ */
font-weight: bold; /* 文字の太さ */
line-height: 1.6; /* 行高 */
background: #dfefff; /* 背景色 */
box-shadow: 0px 0px 0px 5px #dfefff; /* 水平 垂直 ぼかし 広がり 色 */
border: dashed 2px white; /* 線の種類 太さ 色 */
}
角がぺろっと剥がれたデザイン
ステッチ風デザインの角がはがれたような見た目で、よりお洒落さを演出できます。
TCD「Be」
.style2a{
position: relative; /* 相対位置 */
margin: 3em 0 1em; /* 上 左右 下 */
padding: .2em .5em; /* 上下 左右 */
font-weight: bold!important; /* 文字の太さ */
line-height: 1.6!important; /* 行高 */
color: #454545; /* 文字色 */
background: #dfefff; /* 背景色 */
box-shadow: 0px 0px 0px 5px #dfefff; /* 水平 垂直 ぼかし 広がり 色 */
border: dashed 2px white; /* 線の種類 太さ 色 */
}
.style2a:after {
position: absolute; /* 絶対位置 */
content: '';
top: -7px; /* 折り返し位置調整 縦 */
left: -7px; /* 折り返し位置調整 横 */
border-width: 0px 0px 15px 15px; /* 折り返し線の太さ */
border-style: solid; /* 折り返し線の種類 */
border-color: #fff #fff #a8d4ff; /* 折り返し線の色 */
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15); /* 水平 垂直 ぼかし 広がり 色 */
}
TCD「MAG」
.post_content .style2a{
position: relative; /* 相対位置 */
margin: 3em 0 1em; /* 上 左右 下 */
padding: .2em .5em; /* 上下 左右 */
font-size: 22px; /* 文字の大きさ */
font-weight: bold; /* 文字の太さ */
line-height: 1.6; /* 行高 */
color: #454545; /* 文字色 */
background: #dfefff; /* 背景色 */
box-shadow: 0px 0px 0px 5px #dfefff; /* 水平 垂直 ぼかし 広がり 色 */
border: dashed 2px white; /* 線の種類 太さ 色 */
}
.post_content .style2a:after {
position: absolute; /* 絶対位置 */
content: '';
top: -7px; /* 折り返し位置調整 縦 */
left: -7px; /* 折り返し位置調整 横 */
border-width: 0px 0px 15px 15px; /* 折り返し線の太さ */
border-style: solid; /* 折り返し線の種類 */
border-color: #fff #fff #a8d4ff; /* 折り返し線の色 */
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15); /* 水平 垂直 ぼかし 広がり 色 */
}
帯(リボン)風
リボン風のデザイン。左側の位置を調整して、裏に織り込まれているように表現されています。
TCD「Be」
.style2a{
position: relative; /* 相対位置 */
margin: 3em 0 1em; /* 上 左右 下 */
padding: .5em; /* 上下左右 */
font-weight: bold!important; /* 文字の太さ */
line-height: 1.6!important; /* 行高 */
color: white; /* 文字色 */
background: #a6d3c8; /* 背景色 */
}
.style2a:before {
position: absolute; /* 絶対位置 */
content: '';
top: 100%; /* 折り返し位置調整 縦 */
left: 0; /* 折り返し位置調整 横 */
border-bottom: solid 15px transparent; /* 折り返し縦幅 */
border-right: solid 20px rgb(149, 158, 155); /* 折り返し横幅 */
}
TCD「MAG」
.post_content .style2a{
position: relative; /* 相対位置 */
margin: 3em 0 1em; /* 上 左右 下 */
padding: .5em; /* 上下左右 */
font-size: 22px; /* 文字の大きさ */
font-weight: bold; /* 文字の太さ */
line-height: 1.6; /* 行高 */
color: white; /* 文字色 */
background: #a6d3c8; /* 背景色 */
}
.post_content .style2a:before {
position: absolute; /* 絶対位置 */
content: '';
top: 100%; /* 折り返し位置調整 縦 */
left: 0; /* 折り返し位置調整 横 */
border-bottom: solid 15px transparent; /* 折り返し縦幅 */
border-right: solid 20px rgb(149, 158, 155); /* 折り返し横幅 */
}
蛍光マーカー風
蛍光ペン風デザイン。transparent 70% の部分を小さくすればより蛍光マーカーが太く、大きくすれば細くなります。
TCD「Be」
.style2a{
margin: 3em 0 1em; /* 上 左右 下 */
font-weight: bold!important; /* 文字の太さ */
line-height: 1.6!important; /* 行高 */
background: linear-gradient(transparent 70%, #a7d6ff 70%); /* 背景色 */
}
TCD「MAG」
.post_content .style2a{
margin: 3em 0 1em; /* 上 左右 下 */
font-size: 22px; /* 文字の大きさ */
font-weight: bold; /* 文字の太さ */
line-height: 1.6; /* 行高 */
background: linear-gradient(transparent 70%, #a7d6ff 70%); /* 背景色 */
}
途中で色の変わる線
相性の良い 2 色を使えば、かっこよく見せることができます。
TCD「Be」
.style2a{
position: relative; /* 相対位置 */
margin: 3em 0 1em; /* 上 左右 下 */
padding: .2em 0; /* 上下 左右 */
font-weight: bold!important; /* 文字の太さ */
line-height: 1.6!important; /* 行高 */
border-bottom: solid 3px skyblue; /* 下線 種類 太さ 色 */
}
.style2a:after {
position: absolute; /* 絶対位置 */
content: '';
display: block;
border-bottom: solid 3px #ffc778; /* 左側下線 */
border-right: solid 20px rgb(149, 158, 155); /* 変換位置 色 */
bottom: -3px; /* 左線の位置 縦 */
width: 30%; /* 左線の幅 */
}
TCD「MAG」
.post_content .style2a{
position: relative; /* 相対位置 */
margin: 3em 0 1em; /* 上 左右 下 */
padding: .2em 0; /* 上下 左右 */
font-size: 22px; /* 文字の大きさ */
font-weight: bold; /* 文字の太さ */
line-height: 1.6; /* 行高 */
border-bottom: solid 3px skyblue; /* 下線 種類 太さ 色 */
}
.post_content .style2a:after {
position: absolute; /* 絶対位置 */
content: '';
display: block;
border-bottom: solid 3px #ffc778; /* 左側下線 */
border-right: solid 20px rgb(149, 158, 155); /* 変換位置 色 */
bottom: -3px; /* 左線の位置 縦 */
width: 30%; /* 左線の幅 */
}
色を変えてみた場合
同系統の色を組み合わせた方が、自然で違和感のないデザインになります。
TCD「Be」
.style2a{
position: relative; /* 相対位置 */
margin: 3em 0 1em; /* 上 左右 下 */
padding: .2em 0; /* 上下 左右 */
font-weight: bold!important; /* 文字の太さ */
line-height: 1.6!important; /* 行高 */
border-bottom: solid 3px #cce4ff; /* 下線 種類 太さ 色 */
}
.style2a:after {
position: absolute; /* 絶対位置 */
content: '';
display: block;
border-bottom: solid 3px #5472cd; /* 変換位置 色 */
bottom: -3px; /* 左線の位置 縦 */
width: 20%; /* 左線の幅 */
}
TCD「MAG」
.post_content .style2a{
position: relative; /* 相対位置 */
margin: 3em 0 1em; /* 上 左右 下 */
padding: .2em 0; /* 上下 左右 */
font-size: 22px; /* 文字の大きさ */
font-weight: bold; /* 文字の太さ */
line-height: 1.6; /* 行高 */
border-bottom: solid 3px #cce4ff; /* 下線 種類 太さ 色 */
}
.post_content .style2a:after {
position: absolute; /* 絶対位置 */
content: '';
display: block;
border-bottom: solid 3px #5472cd; /* 変換位置 色 */
bottom: -3px; /* 左線の位置 縦 */
width: 20%; /* 左線の幅 */
}
線先に矢印
左端を矢印にすると、シャープな印象のデザインになります。
TCD「Be」
.style2a{
position: relative; /* 相対位置 */
margin: 3em 0 1em; /* 上 左右 下 */
padding: .2em 0 .2em 1em; /* 上 下 左 右 */
font-weight: bold!important; /* 文字の太さ */
line-height: 1.6!important; /* 行高 */
}
.style2a:before {
position: absolute; /* 絶対位置 */
content: '';
bottom: -3px; /* 矢印位置 縦 */
left: 0; /* 矢印位置 横 */
border-left: solid 15px transparent; /* 矢印左線種類 太さ 透明度 */
border-bottom: solid 15px rgb(119, 195, 223); /* 矢印線種類 太さ 色 */
}
.style2a:after {
position: absolute; /* 絶対位置 */
content: '';
bottom: -3px; /* 下線位置 縦 */
left: 10px; /* 下線位置 横 */
width: 100%; /* 下線幅 */
border-bottom: solid 3px rgb(119, 195, 223); /* 下線種類 太さ 色 */
}
TCD「MAG」
.post_content .style2a{
position: relative; /* 相対位置 */
margin: 3em 0 1em; /* 上 左右 下 */
padding: .2em 0 .2em 1em; /* 上 下 左 右 */
font-size: 22px; /* 文字の大きさ */
font-weight: bold; /* 文字の太さ */
line-height: 1.6; /* 行高 */
}
.post_content .style2a:before {
position: absolute; /* 絶対位置 */
content: '';
bottom: -3px; /* 矢印位置 縦 */
left: 0; /* 矢印位置 横 */
border-left: solid 15px transparent; /* 矢印左線種類 太さ 透明度 */
border-bottom: solid 15px rgb(119, 195, 223); /* 矢印下線種類 太さ 色 */
}
.post_content .style2a:after {
position: absolute; /* 絶対位置 */
content: '';
bottom: -3px; /* 下線位置 縦 */
left: 10px; /* 下線位置 横 */
width: 100%; /* 下線幅 */
border-bottom: solid 3px rgb(119, 195, 223); /* 下線種類 太さ 色 */
}
先端が尖ったようなバー
片側だけが尖ったようなデザイン。
TCD「Be」
.style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em 0 .5em 2em;
font-weight: bold!important;
line-height: 1.3!important;
background: #77c3df;
color: white;
}
.style2a:before {
position: absolute;
content: '';
left: 0;
top: -2px;
border-left: solid 40px white;
border-bottom: solid 79px transparent;
}
TCD「MAG」
.post_content .style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em 0 .5em 2em;
font-size: 22px;
font-weight: bold;
line-height: 1.3;
background: #77c3df;
color: white;
}
.post_content .style2a:before {
position: absolute;
content: '';
left: 0;
top: -2px;
border-left: solid 40px white;
border-bottom: solid 79px transparent;
}
両先端を尖らせた場合
左右両側を斜めに尖らせ、さらに下線をつけたデザイン。
TCD「Be」
.style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em 0 .5em 2em;
font-weight: bold!important;
line-height: 1.3!important;
background: #fff0d9;
color: #2d2d2d;
border-bottom: solid 3px orange;
}
.style2a:before {
position: absolute;
content: '';
left: 0;
top: -2px;
border-left: solid 40px white;
border-bottom: solid 79px transparent;
}
.style2a:after {
position: absolute;
content: '';
right: -3px;
top: -7px;
border-left: solid 40px transparent;
border-bottom: solid 79px white;
}
TCD「MAG」
.post_content .style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em 0 .5em 2em;
font-size: 22px;
font-weight: bold;
line-height: 1.3;
background: #fff0d9;
color: #2d2d2d;
border-bottom: solid 3px orange;
}
.post_content .style2a:before {
position: absolute;
content: '';
left: 0;
top: -2px;
border-left: solid 40px white;
border-bottom: solid 79px transparent;
}
.post_content .style2a:after {
position: absolute;
content: '';
right: -3px;
top: -7px;
border-left: solid 40px transparent;
border-bottom: solid 79px white;
}
背景をストライプで塗る
ストライプ柄のデザイン。ごちゃごちゃして見えないようにストライプ柄は薄めの色にするのがおすすめ。
TCD「Be」
.style2a{
margin: 3em 0 1em;
padding: .5em;
font-weight: bold!important;
line-height: 1.6!important;
color: #010079;
text-shadow: 0 0 5px white;
background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}
TCD「MAG」
.post_content .style2a{
margin: 3em 0 1em;
padding: .5em;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
color: #010079;
text-shadow: 0 0 5px white;
background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}
左に縦線が入ったバージョン
左側に線をつけたデザイン。背景色と差のある色を選ぶのがポイント。
TCD「Be」
.style2a{
margin: 3em 0 1em;
padding: .5em;
font-weight: bold!important;
line-height: 1.6!important;
color: #010079;
text-shadow: 0 0 5px white;
border-left: solid 7px #010079;
background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}
TCD「MAG」
.post_content .style2a{
margin: 3em 0 1em;
padding: .5em;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
color: #010079;
text-shadow: 0 0 5px white;
border-left: solid 7px #010079;
background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}
ストライプ+上下線
水色系統でまとめたデザイン。サンプル CSS は文字を中央揃えにしていますが、好みに合わせて左寄せのままでもいいと思います。
TCD「Be」
.style2a{
margin: 3em 0 1em;
padding: .5em;
font-weight: bold!important;
line-height: 1.6!important;
color: #010079;
text-align: center;
border-top: solid 2px #6cb4e4;
border-bottom: solid 2px #6cb4e4;
background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}
TCD「MAG」
.post_content .style2a{
margin: 3em 0 1em;
padding: .5em;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
color: #010079;
text-align: center;
border-top: solid 2px #6cb4e4;
border-bottom: solid 2px #6cb4e4;
background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}
ストライプの下線
下線をストライプ柄にしたデザイン。色は好みで変更してみてください。
TCD「Be」
.style2a{
position: relative;
margin: 3em 0 1em;
padding: .2em 0;
font-weight: bold!important;
line-height: 1.6!important;
}
.style2a:after {
position: absolute;
content: "";
left: 0;
bottom: 0;
width: 100%;
height: 7px;
background: -webkit-repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
background: repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
}
TCD「MAG」
.post_content .style2a{
position: relative;
margin: 3em 0 1em;
padding: .2em 0;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
}
.post_content .style2a:after {
position: absolute;
content: "";
left: 0;
bottom: 0;
width: 100%;
height: 7px;
background: -webkit-repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
background: repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
}
ストライプの吹き出し
ストライプと吹き出しの合わせ技。かわいくて目立つデザインです。
TCD「Be」
.style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em;
font-weight: bold!important;
line-height: 1.6!important;
background: -webkit-repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
background: repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
border-radius: 7px;
}
.style2a:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #ffebbe;
}
TCD「MAG」
.post_content .style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
background: -webkit-repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
background: repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
border-radius: 7px;
}
.post_content .style2a:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #ffebbe;
}
両端に線を伸ばす
文字の両側に線を伸ばすデザインです。モノクロベースのデザインによくマッチしそうです。
TCD「Be」
.style2a {
position: relative;
display: inline-block;
margin: 3em 0 1em;
padding: 0 3em;
font-weight: bold!important;
line-height: 1.6!important;
}
.style2a:before, .style2a:after {
position: absolute;
content: "";
top: 50%;
width: 45px;
height: 1px;
background-color: black;
}
.style2a:before {
left: 0;
}
.style2a:after {
right: 0;
}
TCD「MAG」
.post_content .style2a {
position: relative;
display: inline-block;
margin: 3em 0 1em;
padding: 0 3em;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
}
.post_content .style2a:before, .post_content .style2a:after {
position: absolute;
content: "";
top: 50%;
width: 45px;
height: 1px;
background-color: black;
}
.post_content .style2a:before {
left: 0;
}
.post_content .style2a:after {
right: 0;
}
二重線バージョン
物足りなく感じたときは、二重線にするとさらにおしゃれに見えるかもしれません。
TCD「Be」
.style2a {
position: relative;
display: inline-block;
margin: 3em 0 1em;
padding: 0 3em;
font-weight: bold!important;
line-height: 1.6!important;
}
.style2a:before, .style2a:after {
position: absolute;
content: "";
top: 50%;
width: 45px;
height: 2px;
border-top: solid 1px black;
border-bottom: solid 1px black;
}
.style2a:before {
left: 0;
}
.style2a:after {
right: 0;
}
TCD「MAG」
.post_content .style2a {
position: relative;
display: inline-block;
margin: 3em 0 1em;
padding: 0 3em;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
}
.post_content .style2a:before, .post_content .style2a:after {
position: absolute;
content: "";
top: 50%;
width: 45px;
height: 2px;
border-top: solid 1px black;
border-bottom: solid 1px black;
}
.post_content .style2a:before {
left: 0;
}
.post_content .style2a:after {
right: 0;
}
下側に小さく線をつける
文章の下に小さく線をつけるデザイン。中央寄せにするとスタイリッシュです。
TCD「Be」
.style2a {
position: relative;
margin: 3em 0 1.5em;
padding: 0 .5em;
font-weight: bold!important;
line-height: 1.6!important;
text-align: center;
}
.style2a:before {
position: absolute;
content: "";
bottom: -15px;
width: 60px;
height: 5px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: black;
border-radius: 2px;
}
TCD「MAG」
.post_content .style2a {
position: relative;
margin: 3em 0 1.5em;
padding: 0 .5em;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
text-align: center;
}
.post_content .style2a:before {
position: absolute;
content: "";
bottom: -15px;
width: 60px;
height: 5px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: black;
border-radius: 2px;
}
スラッシュで囲む
少し長めのスラッシュにすることでシャープでおしゃれに見えます。
TCD「Be」
.style2a {
position: relative;
display: inline-block;
margin: 3em 0 1em;
padding: 0 2em;
font-weight: bold!important;
line-height: 1.6!important;
}
.style2a:before, .style2a:after {
position: absolute;
content: "";
top: 50%;
width: 44px;
height: 2px;
background-color: black;
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.style2a:before {
left: 0;
}
.style2a:after {
right: 0;
}
TCD「MAG」
.post_content .style2a {
position: relative;
display: inline-block;
margin: 3em 0 1em;
padding: 0 2em;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
}
.post_content .style2a:before, .post_content .style2a:after {
position: absolute;
content: "";
top: 50%;
width: 44px;
height: 2px;
background-color: black;
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.post_content .style2a:before {
left: 0;
}
.post_content .style2a:after {
right: 0;
}
交差線
ボーダーが交差したようなデザイン。ボーダーや文字をカラフルな色にしてもいいと思います。
TCD「Be」
.style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em 1em;
font-weight: bold!important;
line-height: 1.6!important;
border-top: solid 2px black;
border-bottom: solid 2px black;
}
.style2a:before, .style2a:after {
content: '';
position: absolute;
top: -7px;
width: 2px;
height: -webkit-calc(100% + 14px);
background-color: black;
}
.style2a:before {
left: 7px;
}
.style2a:after {
right: 7px;
}
TCD「MAG」
.post_content .style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em 1em;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
border-top: solid 2px black;
border-bottom: solid 2px black;
}
.post_content .style2a:before, .post_content .style2a:after {
content: '';
position: absolute;
top: -7px;
width: 2px;
height: -webkit-calc(100% + 14px);
background-color: black;
}
.post_content .style2a:before {
left: 7px;
}
.post_content .style2a:after {
right: 7px;
}
角がくるん
角にくるんとした丸をつけたデザイン。
TCD「Be」
.style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em;
font-weight: bold!important;
line-height: 1.6!important;
border: solid 2px black;
border-radius: 3px 0;
}
.style2a:before, .style2a:after {
content: '';
position: absolute;
width:10px;
height: 10px;
border: solid 2px black;
border-radius: 50%;
}
.style2a:before {
bottom:-12px;
right:-12px;
}
.style2a:after {
top:-12px;
left:-12px;
}
TCD「MAG」
.post_content .style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
border: solid 2px black;
border-radius: 3px 0;
}
.post_content .style2a:before, .post_content .style2a:after {
content: '';
position: absolute;
width:10px;
height: 10px;
border: solid 2px black;
border-radius: 50%;
}
.post_content .style2a:before {
bottom:-12px;
right:-12px;
}
.post_content .style2a:after {
top:-12px;
left:-12px;
}
葉っぱ風
上下を曲線のボーダーではさんだデザイン。文字を中央寄せで使うのがおすすめ。
TCD「Be」
.style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em;
font-weight: bold!important;
line-height: 1.6!important;
color: #158b2b;
text-align: center;
}
.style2a:before {
position: absolute;
content: "";
top: -8px;
left: 50%;
width: 150px;
height: 58px;
border-radius: 50%;
border: 5px solid #a6ddb0;
border-left-color: transparent;
border-right-color: transparent;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
TCD「MAG」
.post_content .style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
color: #158b2b;
text-align: center;
}
.post_content .style2a:before {
position: absolute;
content: "";
top: -8px;
left: 50%;
width: 150px;
height: 58px;
border-radius: 50%;
border: 5px solid #a6ddb0;
border-left-color: transparent;
border-right-color: transparent;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
細カギ括弧
細くて長めのカギ括弧をつけると、クールな雰囲気を演出できます。
TCD「Be」
.style2a{
position: relative;
display: inline-block;
margin: 3em 0 1em;
padding: .5em 1em;
font-weight: bold!important;
line-height: 1.4!important;
}
.style2a:before, .style2a:after {
position: absolute;
content: "";
display: inline-block;
width: 20px;
height: 30px;
}
.style2a:before {
border-left: solid 1px #ff5722;
border-top: solid 1px #ff5722;
top:0;
left: 0;
}
.style2a:after {
border-right: solid 1px #ff5722;
border-bottom: solid 1px #ff5722;
bottom:0;
right: 0;
}
TCD「MAG」
.post_content .style2a{
position: relative;
display: inline-block;
margin: 3em 0 1em;
padding: .5em 1em;
font-size: 22px;
font-weight: bold;
line-height: 1.4;
}
.post_content .style2a:before, .post_content .style2a:after {
position: absolute;
content: "";
display: inline-block;
width: 20px;
height: 30px;
}
.post_content .style2a:before {
border-left: solid 1px #ff5722;
border-top: solid 1px #ff5722;
top:0;
left: 0;
}
.post_content .style2a:after {
border-right: solid 1px #ff5722;
border-bottom: solid 1px #ff5722;
bottom:0;
right: 0;
}
大括弧
大括弧バージョン。見出しサイズと本文サイズにしっかり差をつけるのがポイント。
TCD「Be」
.style2a{
position: relative;
display: inline-block;
margin: 3em 0 1em;
padding: .5em 1em;
font-weight: bold!important;
line-height: 1.4!important;
top:0;
}
.style2a:before, .style2a:after {
position: absolute;
content: "";
display: inline-block;
top: 0;
width: 8px;
height: 100%;
}
.style2a:before {
border-left: solid 1px black;
border-top: solid 1px black;
border-bottom: solid 1px black;
left: 0;
}
.style2a:after {
border-top: solid 1px black;
border-right: solid 1px black;
border-bottom: solid 1px black;
right: 0;
}
TCD「MAG」
.post_content .style2a{
position: relative;
display: inline-block;
margin: 3em 0 1em;
padding: .5em 1em;
font-size: 22px;
font-weight: bold;
line-height: 1.4;
top:0;
}
.post_content .style2a:before, .post_content .style2a:after {
position: absolute;
content: "";
display: inline-block;
top: 0;
width: 8px;
height: 100%;
}
.post_content .style2a:before {
border-left: solid 1px black;
border-top: solid 1px black;
border-bottom: solid 1px black;
left: 0;
}
.post_content .style2a:after {
border-top: solid 1px black;
border-right: solid 1px black;
border-bottom: solid 1px black;
right: 0;
}
点線バージョン大括弧
物足りなさを感じるときは、線の種類を点線や破線にしてみるといいですよ。
TCD「Be」
.style2a{
position: relative;
display: inline-block;
margin: 3em 0 1em;
padding: .5em 1em;
font-weight: bold!important;
line-height: 1.4!important;
top:0;
}
.style2a:before, .style2a:after {
position: absolute;
content: "";
display: inline-block;
top: 0;
width: 8px;
height: 100%;
}
.style2a:before {
border-top: dotted 1px #535aaa;
border-left: dotted 1px #535aaa;
border-bottom: dotted 1px #535aaa;
left: 0;
}
.style2a:after {
border-top: dotted 1px #535aaa;
border-right: dotted 1px #535aaa;
border-bottom: dotted 1px #535aaa;
right: 0;
}
TCD「MAG」
.post_content .style2a{
position: relative;
display: inline-block;
margin: 3em 0 1em;
padding: .5em 1em;
font-size: 22px;
font-weight: bold;
line-height: 1.4;
top:0;
}
.post_content .style2a:before, .post_content .style2a:after {
position: absolute;
content: "";
display: inline-block;
top: 0;
width: 8px;
height: 100%;
}
.post_content .style2a:before {
border-top: dotted 1px #535aaa;
border-left: dotted 1px #535aaa;
border-bottom: dotted 1px #535aaa;
left: 0;
}
.post_content .style2a:after {
border-top: dotted 1px #535aaa;
border-right: dotted 1px #535aaa;
border-bottom: dotted 1px #535aaa;
right: 0;
}
立体的なボックス
奥行きのある 3D なボックスデザイン。使いどころは限られるかもしれませんが、見る人の目を惹くことは間違いありません。
TCD「Be」
.style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em;
font-weight: bold!important;
line-height: 1.6!important;
color: #393939;
background: #b6e9ff;
}
.style2a:before {
position: absolute;
content: "";
top: -16px;
left: 0;
width: -webkit-calc(100% - 16px);
border: solid 8px transparent;
border-bottom-color: #b2ddf0;
}
TCD「MAG」
.post_content .style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
color: #393939;
background: #b6e9ff;
}
.post_content .style2a:before {
position: absolute;
content: "";
top: -16px;
left: 0;
width: -webkit-calc(100% - 16px);
border: solid 8px transparent;
border-bottom-color: #b2ddf0;
}
一文字目だけ装飾を変える
一文字目だけを強調したデザイン。
TCD「Be」
.style2a{
margin: 3em 0 1em;
padding: .5em;
font-weight: bold!important;
line-height: 1.6!important;
}
.style2a:first-letter {
font-size: 2em;
color: #7172ac;
}
TCD「MAG」
.post_content .style2a{
margin: 3em 0 1em;
padding: .5em;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
}
.post_content .style2a:first-letter {
font-size: 2em;
color: #7172ac;
}
グラデーション
消えていく下線
右側へ流れるように消えていく下線。和風なデザインの Web サイトやブログと相性がいいかもしれません。
TCD「Be」
.style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em 0;
font-weight: bold!important;
line-height: 1.6!important;
}
.style2a:after {
content: "";
display: block;
height: 4px;
background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
background: linear-gradient(to right, rgb(230, 90, 90), transparent);
}
TCD「MAG」
.post_content .style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em 0;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
}
.post_content .style2a:after {
content: "";
display: block;
height: 4px;
background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
background: linear-gradient(to right, rgb(230, 90, 90), transparent);
}
段々と色が変わっていくパターン
右に行くにつれて少しずつ色が変わっていくデザイン。同じ明度の2色を選ぶのがポイントです。
TCD「Be」
.style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em 0;
font-weight: bold!important;
line-height: 1.6!important;
}
.style2a:after {
content: "";
display: block;
height: 4px;
background: -webkit-linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
background: linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
}
TCD「MAG」
.post_content .style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em 0;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
}
.post_content .style2a:after {
content: "";
display: block;
height: 4px;
background: -webkit-linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
background: linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
}
背景をグラデーションで塗る
フラットデザインベースの Web サイトには合いませんが、どこかで使いたい表現ですね。
TCD「Be」
.style2a{
margin: 3em 0 1em;
padding: .5em;
font-weight: bold!important;
line-height: 1.6!important;
background: -webkit-linear-gradient(to right, rgb(255, 186, 115), transparent);
background: linear-gradient(to right, rgb(255, 186, 115), transparent);
color: #545454;
}
TCD「MAG」
.post_content .style2a{
margin: 3em 0 1em;
padding: .5em;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
background: -webkit-linear-gradient(to right, rgb(255, 186, 115), transparent);
background: linear-gradient(to right, rgb(255, 186, 115), transparent);
color: #545454;
}
影をつけてみた場合
背景色が少しずつ変わる表現に影をつけたデザインです。
TCD「Be」
.style2a{
margin: 3em 0 1em;
padding: .5em;
font-weight: bold!important;
line-height: 1.6!important;
background: -webkit-linear-gradient(to right, rgb(255, 124, 111), #ffc994);
background: linear-gradient(to right, rgb(255, 124, 111), #ffc994);
color: white;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.56);
}
TCD「MAG」
.post_content .style2a{
margin: 3em 0 1em;
padding: .5em;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
background: -webkit-linear-gradient(to right, rgb(255, 124, 111), #ffc994);
background: linear-gradient(to right, rgb(255, 124, 111), #ffc994);
color: white;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.56);
}
上下のグラデーション
上から下へのグラデーションを使った立体感のあるデザイン。
TCD「Be」
.style2a{
margin: 3em 0 1em;
padding: .5em;
font-weight: bold!important;
line-height: 1.6!important;
background: -webkit-linear-gradient(to top, rgb(137, 184, 255), #c5ceff);
background: linear-gradient(to top, rgb(137, 184, 255), #c5ceff);
color: #495193;
}
TCD「MAG」
.post_content .style2a{
margin: 3em 0 1em;
padding: .5em;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
background: -webkit-linear-gradient(to top, rgb(137, 184, 255), #c5ceff);
background: linear-gradient(to top, rgb(137, 184, 255), #c5ceff);
color: #495193;
}
文字の反射
反射表現のデザイン。表示対応ブラウザは Safari(iOS含む)、Chrome、Opera のみ。
TCD「Be」
.style2a{
margin: 3em 0 1.5em;
padding: .5em;
font-weight: bold!important;
line-height: 1.6!important;
color: #6eb0f9;
line-height: 1.4;
-webkit-box-reflect: below -10px -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0) 10%,rgba(0, 0, 0, 0.6));
}
TCD「MAG」
.post_content .style2a{
margin: 3em 0 1.5em;
padding: .5em;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
color: #6eb0f9;
line-height: 1.4;
-webkit-box-reflect: below -10px -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0) 10%,rgba(0, 0, 0, 0.6));
}
アイコンフォント
以下の見出しに使っているアイコンは、FontAwesome を利用しています。
使い方は、FontAwesome 公式サイトで最新バージョンを確認して、外部読み込みをするか、サーバーにデータをアップロードして使います。
外部読み込みで使う場合、次のコードをカスタムスクリプトに追加してカスタマイズを進めてください。(2020年5月26日時点の最新バージョン)
<link href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" rel="stylesheet">
シンプルなチェックマーク
シンプルなチェックマークのデザイン。小見出しや中見出しで使いたい装飾です。
TCD「Be」
.style2a{
position: relative;
margin: 3em 0 1.5em;
padding: .5em 1.4em;
font-weight: bold!important;
line-height: 1.6!important;
}
.style2a:before {
font-family: "Font Awesome 5 Free";
content: "\f00c";
position: absolute;
font-size: 1em;
left: 0;
top: 12px;
color: #5ab9ff;
}
TCD「MAG」
.post_content .style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em 1.4em;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
}
.post_content .style2a:before {
font-family: "Font Awesome 5 Free";
content: "\f00c";
position: absolute;
font-size: 1em;
left: 0;
top: 12px;
color: #5ab9ff;
}
おしゃれなシェブロンマーク
背景色と上下を点線で挟んだデザイン。色やアイコン種類は好みで変更できます。
TCD「Be」
.style2a{
position: relative;
margin: 3em 0 1.5em;
padding: .5em 1.4em;
font-weight: bold!important;
line-height: 1.4!important;
color: #ff6a6a;
border-top: dotted 1px gray;
border-bottom: dotted 1px gray;
background: #fffff4;
}
.style2a:before {
font-family: "Font Awesome 5 Free";
content: "\f138";
position: absolute;
font-size: 1em;
left: 0.25em;
color: #ff6a6a;
}
TCD「MAG」
.post_content .style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em 1.6em;
font-size: 22px;
font-weight: bold;
line-height: 1.4;
color: #ff6a6a;
border-top: dotted 1px gray;
border-bottom: dotted 1px gray;
background: #fffff4;
}
.post_content .style2a:before {
font-family: "Font Awesome 5 Free";
content: "\f138";
position: absolute;
font-size: 1em;
left: 0.25em;
color: #ff6a6a;
}
HTMLタグ風
HTML タグのようにアイコンで挟んだデザイン。
TCD「Be」
.style2a{
position: relative;
display: inline-block;
margin: 3em 0 1em;
padding: .5em 1em;
font-weight: bold!important;
line-height: 1.4!important;
}
.style2a:before, .style2a:after {
position: absolute;
display: inline-block;
font-family: "Font Awesome 5 Free";
font-size: 1em;
color: #ff6a6a;
}
.style2a:before {
content:"\f053";
left: 0;
}
.style2a:after {
content:"\f054";
right: 0;
}
TCD「MAG」
.post_content .style2a{
position: relative;
display: inline-block;
margin: 3em 0 1em;
padding: .5em 1em;
font-size: 22px;
font-weight: bold;
line-height: 1.4;
}
.post_content .style2a:before, .post_content .style2a:after {
position: absolute;
display: inline-block;
font-family: "Font Awesome 5 Free";
font-size: 1em;
color: #ff6a6a;
}
.post_content .style2a:before {
content:"\f053";
left: 0;
}
.post_content .style2a:after {
content:"\f054";
right: 0;
}
ふきだしアイコン
吹き出しのアイコンは見出しと相性がよくて、すっきりした印象になります。
TCD「Be」
.style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em 1.4em;
font-weight: bold!important;
line-height: 1.6!important;
}
.style2a:before {
font-family: "Font Awesome 5 Free";
content: "\f075";
position: absolute;
font-size: 1em;
left: 0;
top: 12px;
color: #5ab9ff;
}
TCD「MAG」
.post_content .style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em 1.4em;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
}
.post_content .style2a:before {
font-family: "Font Awesome 5 Free";
content: "\f075";
position: absolute;
font-size: 1em;
left: 0;
top: 12px;
color: #5ab9ff;
}
フラットな見出し
いかにもフラットデザインらしい見出しです。記事本文だけでなくWebページ内の様々なところで使えそうです。
TCD「Be」
.style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em .5em .5em 1.8em;
font-weight: bold!important;
line-height: 1.6!important;
color: white;
background: #81d0cb;
}
.style2a:before {
font-family: "Font Awesome 5 Free";
content: "\f14a";
position: absolute;
left : 0.5em;
}
TCD「MAG」
.post_content .style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em .5em .5em 1.8em;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
color: white;
background: #81d0cb;
}
.post_content .style2a:before {
font-family: "Font Awesome 5 Free";
content: "\f14a";
position: absolute;
left : 0.5em;
}
コードアイコンのマーカー
</> の下にカラフルな円を敷いたデザイン。プログラミング関連の情報ページや Web サイトと相性がいいと思います。
TCD「Be」
.style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em .5em .5em 1.4em;
font-weight: bold!important;
line-height: 1.6!important;
color:#153c6e;
}
.style2a::before {
position: absolute;
font-family: "Font Awesome 5 Free";
content: "\f121";
background: #c9e2ff;
color: #153c6e;
font-size: 15px;
border-radius: 50%;
left: 0;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
TCD「MAG」
.post_content .style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em .5em .5em 1.4em;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
color:#153c6e;
}
.post_content .style2a:before {
position: absolute;
font-family: "Font Awesome 5 Free";
content: "\f121";
background: #c9e2ff;
color: #153c6e;
font-size: 15px;
border-radius: 50%;
left: 0;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
タブ付き
見出し文の上にタブをつけたデザイン。アイコン種類や「Check」という部分は CSS で好きな文字に変更できます。
TCD「Be」
.style2a{
position: relative;
margin: 3em 0 1em;
padding: .4em;
font-weight: bold!important;
line-height: 1.6!important;
color: black;
background: #d0ecff;
border-radius: 0 5px 5px 5px;
}
.style2a:after {
position: absolute;
font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
content: '\f00c Check';
background: #2196F3;
color: #fff;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 3px 7px 1px;
font-size: 0.7em;
line-height: 1;
letter-spacing: 0.05em
}
TCD「MAG」
.post_content .style2a{
position: relative;
margin: 3em 0 1em;
padding: .4em;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
color: black;
background: #d0ecff;
border-radius: 0 5px 5px 5px;
}
.post_content .style2a:after {
position: absolute;
font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
content: '\f00c Check';
background: #2196F3;
color: #fff;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 3px 7px 1px;
font-size: 0.7em;
line-height: 1;
letter-spacing: 0.05em
}
タブ付きその2
デザインを少し変えたタブ付き見出し。記事内のポイントで使うと効果的に思います。
TCD「Be」
.style2a{
position: relative;
margin: 3em 0 1em;
padding: .4em;
font-weight: bold!important;
line-height: 1.6!important;
color: black;
background: #f4f4f4;
border-top: solid 2px #80c8d1;
border-bottom: solid 2px #80c8d1;
}
.style2a:after {
position: absolute;
font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
content: '\f0a7 Check';
background: #80c8d1;
color: #fff;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 3px 7px 3px;
font-size: 0.7em;
line-height: 1;
letter-spacing: 0.05em
}
TCD「MAG」
.post_content .style2a{
position: relative;
margin: 3em 0 1em;
padding: .4em;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
color: black;
background: #f4f4f4;
border-top: solid 2px #80c8d1;
border-bottom: solid 2px #80c8d1;
}
.post_content .style2a:after {
position: absolute;
font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
content: '\f0a7 Check';
background: #80c8d1;
color: #fff;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 3px 7px 3px;
font-size: 0.7em;
line-height: 1;
letter-spacing: 0.05em
}
先頭にアイコンをつける例
付箋風の先頭にアイコンをのせたデザイン。アイコンの背景だけ色を濃くすることでメリハリのある見出しになります。
TCD「Be」
.style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em;
font-weight: bold!important;
line-height: 1.6!important;
background: #f1f8ff;
border-left: solid 2em #5c9ee7;
}
.style2a:before {
position: absolute;
font-family: "Font Awesome 5 Free";
content: '\f303';
padding: 0em;
color: white;
left: -1.35em;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
TCD「MAG」
.post_content .style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
background: #f1f8ff;
border-left: solid 2em #5c9ee7;
}
.post_content .style2a:before {
position: absolute;
font-family: "Font Awesome 5 Free";
content: "\f303";
padding: 0em;
color: white;
left: -1.35em;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
ひらめき
小さな吹き出しにアイコンを入れたデザイン。電球アイコンを入れるとピコンとひらめいたようなデザインでかわいいですね。
TCD「Be」
.style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em .5em .5em 1.7em;
font-weight: bold!important;
line-height: 1.6!important;
}
.style2a:before {
position: absolute;
font-family: "Font Awesome 5 Free";
content: "\f0eb";
background: #ffca2c;
color: white;
font-weight: normal;
font-size: 15px;
border-radius: 50%;
left: 0;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.style2a:after {
content: '';
display: block;
position: absolute;
left: 20px;
height: 0;
width: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 12px solid #ffca2c;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
TCD「MAG」
.post_content .style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em .5em .5em 1.7em;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
}
.post_content .style2a:before {
position: absolute;
font-family: "Font Awesome 5 Free";
content: "\f0eb";
background: #ffca2c;
color: white;
font-weight: normal;
font-size: 15px;
border-radius: 50%;
left: 0;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.post_content .style2a:after {
content: '';
display: block;
position: absolute;
left: 20px;
height: 0;
width: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 12px solid #ffca2c;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
円にアイコンを入れてバーをつける
使い勝手が良さそうな表現です。アイコンの種類や色はお好みで変えてみてください。
TCD「Be」
.style2a{
position: relative;
margin: 3em 0 1em 1em;
padding: .3em .5em .3em 1.2em;
font-weight: bold!important;
line-height: 1.6!important;
color: #474747;
background: #ffd98a;
border-radius: 0 10px 10px 0;
}
.style2a:before {
position: absolute;
display: inline-block;
font-family: "Font Awesome 5 Free";
content: "\f135";
line-height: 50px;
color: white;
background: #ffa337;
width: 50px;
height: 50px;
top: 50%;
text-align: center;
left: -1.5em;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
border: solid 3px white;
border-radius: 50%;
}
TCD「MAG」
.post_content .style2a{
position: relative;
margin: 3em 0 1em 1em;
padding: .3em .5em .3em 1.2em;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
color: #474747;
background: #ffd98a;
border-radius: 0 10px 10px 0;
}
.post_content .style2a:before {
position: absolute;
display: inline-block;
font-family: "Font Awesome 5 Free";
content: "\f135";
line-height: 50px;
color: white;
background: #ffa337;
width: 50px;
height: 50px;
top: 50%;
text-align: center;
left: -1.5em;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
border: solid 3px white;
border-radius: 50%;
}
円のまわりに影を付けた場合
円のまわりに影をつけたデザイン。立体感があり目を惹きますね。
TCD「Be」
.style2a{
position: relative;
margin: 3em 0 1em 1em;
padding: .3em .5em .3em 1.2em;
font-weight: bold!important;
line-height: 1.6!important;
color: #474747;
background: #f4f4f4;
border-radius: 0 10px 10px 0;
}
.style2a:before {
position: absolute;
display: inline-block;
font-family: "Font Awesome 5 Free";
content: "\f041";
line-height: 50px;
color: white;
background: #ff6363;
width: 50px;
height: 50px;
top: 50%;
text-align: center;
left: -1.5em;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
border: solid 3px white;
border-radius: 50%;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}
TCD「MAG」
.post_content .style2a{
position: relative;
margin: 3em 0 1em 1em;
padding: .3em .5em .3em 1.2em;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
color: #474747;
background: #f4f4f4;
border-radius: 0 10px 10px 0;
}
.post_content .style2a:before {
position: absolute;
display: inline-block;
font-family: "Font Awesome 5 Free";
content: "\f041";
line-height: 50px;
color: white;
background: #ff6363;
width: 50px;
height: 50px;
top: 50%;
text-align: center;
left: -1.5em;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
border: solid 3px white;
border-radius: 50%;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}
さらに立体的にしてみた場合
円の下の影を少しカスタマイズして、さらに立体的にしたデザイン。
TCD「Be」
.style2a{
position: relative;
margin: 3em 0 1em 1em;
padding: .3em .5em .3em 1.2em;
font-weight: bold!important;
line-height: 1.6!important;
color: #474747;
background: #f4f4f4;
border-radius: 0 10px 10px 0;
}
.style2a:before {
font-family: "Font Awesome 5 Free";
content: "\f041";
position: absolute;
padding: 0em;
color: white;
background: #81a1e4;
width: 50px;
text-align: center;
height: 50px;
line-height: 50px;
left: -1.5em;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.29);
border-bottom: solid 2px #4967b4;
}
TCD「MAG」
.post_content .style2a{
position: relative;
margin: 3em 0 1em 1em;
padding: .3em .5em .3em 1.2em;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
color: #474747;
background: #eff4ff;
border-radius: 0 10px 10px 0;
}
.post_content .style2a:before {
font-family: "Font Awesome 5 Free";
content: "\f041";
position: absolute;
padding: 0em;
color: white;
background: #81a1e4;
width: 50px;
text-align: center;
height: 50px;
line-height: 50px;
left: -1.5em;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.29);
border-bottom: solid 2px #4967b4;
}
点滅するカーソル
カーソルのアイコンを先頭に置き、CSS3 のアニメーションで点滅させたデザイン。多用すると見る人が不快に感じるかもしれないので注意が必要。
TCD「Be」
.style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em .5em .5em 1em;
font-weight: bold!important;
line-height: 1.6!important;
}
.style2a:before {
font-family: "Font Awesome 5 Free";
content: "\f246";
position: absolute;
font-size: 1em;
left: 0;
color: silver;
-webkit-animation:blink 0.5s ease-in-out infinite alternate;
animation:blink 0.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}
@keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}
TCD「MAG」
.post_content .style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em .5em .5em 1em;
font-size: 22px;
font-weight: bold;
line-height: 1.4;
}
.post_content .style2a:before {
font-family: "Font Awesome 5 Free";
content: "\f246";
position: absolute;
font-size: 1em;
left: 0;
color: silver;
-webkit-animation:blink 0.5s ease-in-out infinite alternate;
animation:blink 0.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}
@keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}
かわいい系
背景色+角丸
角を丸く、文字を白抜きにした、やわらかい印象のデザイン。
TCD「Be」
.style2a{
margin: 3em 0 1em;
padding: .5em;
font-weight: bold!important;
line-height: 1.6!important;
color: white;
background: #b0dcfa;
border-radius: 0.5em;
}
TCD「MAG」
.post_content .style2a{
margin: 3em 0 1em;
padding: .5em;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
color: white;
background: #b0dcfa;
border-radius: 0.5em;
}
シンプルな円マーク
FontAwesome を使ったシンプルな円マークのデザイン。円の色はお好みで変更してみてください。
TCD「Be」
.style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em .5em .5em 1.8em;
font-weight: bold!important;
line-height: 1.6!important;
color: black;
}
.style2a:before {
font-family: "Font Awesome 5 Free";
content: "\f111";
position: absolute;
font-size: 1.4em;
color: #ffa7a1;
left: 0;
top: 4px;
}
TCD「MAG」
.post_content .style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em .5em .5em 1.8em;
font-size: 22px;
font-weight: bold;
line-height: 1.4;
color: black;
}
.post_content .style2a:before {
font-family: "Font Awesome 5 Free";
content: "\f111";
position: absolute;
font-size: 1.4em;
color: #ffa7a1;
left: 0;
top: 4px;
}
考えごと風
FontAwesome を使った吹き出し風デザイン。背景は控えめな色にするのがポイント。
TCD「Be」
.style2a{
position: relative;
margin: 3em 0 1em 2em;
padding: .5em;
font-weight: bold!important;
line-height: 1.6!important;
background: #def3ff;
border-radius: 20px;
}
.style2a:before {
font-family: "Font Awesome 5 Free";
content: "\f111";
position: absolute;
font-size: 15px;
left: -50px;
bottom: 0;
color: #def3ff;
}
.style2a:after {
font-family: "Font Awesome 5 Free";
content: "\f111";
position: absolute;
font-size: 23px;
left: -30px;
bottom: 0;
color: #def3ff;
}
TCD「MAG」
.post_content .style2a{
position: relative;
margin: 3em 0 1em 2em;
padding: .5em;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
background: #def3ff;
border-radius: 20px;
}
.post_content .style2a:before {
font-family: "Font Awesome 5 Free";
content: "\f111";
position: absolute;
font-size: 15px;
left: -50px;
bottom: 0;
color: #def3ff;
}
.post_content .style2a:after {
font-family: "Font Awesome 5 Free";
content: "\f111";
position: absolute;
font-size: 23px;
left: -30px;
bottom: 0;
color: #def3ff;
}
肉球マーカー
FontAwesome でカラフルな肉球のアイコンを見出し文の前に置いたデザイン。
TCD「Be」
.style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em .5em .5em 1.4em;
font-weight: bold!important;
line-height: 1.4!important;
color: #7b6459;
}
.style2a:before {
font-family: "Font Awesome 5 Free";
content: "\f1b0";
position: absolute;
font-size: 1em;
left: 0;
color: #ff938b;
}
TCD「MAG」
.post_content .style2a{
position: relative;
margin: 3em 0 1em;
padding: .5em .5em .5em 1.4em;
font-size: 22px;
font-weight: bold;
line-height: 1.4;
color: #7b6459;
}
.post_content .style2a:before {
font-family: "Font Awesome 5 Free";
content: "\f1b0";
position: absolute;
font-size: 1em;
left: 0;
color: #ff938b;
}
まとめ
お好みの見出しは見つかりましたか?
すぐに見つからなかった場合でも、サイト運営していく中で自分の表現したいデザインがはっきりしてくるものなので、デザインを変えたくなった際は参考にしてみてください。
また、CSS の各要素が何を指定しているのかが分かってくると、自分なりの細かなカスタマイズもできるようになるので、ぜひ、いろいろと試してみてくださいね。
ちなみに「Be」は CSS でフォントサイズを指定していませんでしたが、理由はテーマオプション機能で変更できるので、機能側で編集できるように固定しないためでした。
追加した装飾をクイックタグで使いやすくカスタマイズする際はこちらの記事を参考にどうぞ。

囲み枠のデザインサンプルもまとめているので、カスタマイズの参考にしてみてください。

それでは、今回はこの辺で。
ありがとうございました!