Cocoon(WordPress)のコピペで変える見出しデザイン

スポンサーリンク

繰り返し線形グラデーション(repeating-linear-gradientタグ)を利用した見出しデザインを用意しました。

repeating-linear-gradientタグとは

構文

repeating-linear-gradient(グラデーションの角度, 開始色 [開始位置], [途中色1 途中位置1,途中色2 途中位置2, ・・・・], 終了色 終了位置);
[]内は省略可能となってます。
グラデーションの経過ポイントを色と位置で指定します。
経過ポイントは複数指定可能なので増やすことでグラデーションパターンが広がります。
そしてこのグラデーションパターンは要素内で繰り返されます。
また、色指定に
rgba(0~255赤, 0~255緑, 0~255青, 0透明~1不透明)
を用いることで、色と透過率変化させることが出来ます。

ベンダープレフィックス

このタグは、ブラウザによって対応できない場合があるので
ベンダープレフィックスを付けて使うことが出来ます。

ブラウザ プレフィックス
Google Chrome, Safari -webkit-
Internet Explorer -ms-
Firefox -moz-
Opera -o-

【使用方法】
プレフィックス + タグ
【使用例】
-webkit-repeating-linear-gradient(~
-ms-repeating-linear-gradient(~
-moz-repeating-linear-gradient(~
-o-repeating-linear-gradient(~

コピペで簡単見出しデザイン

縦グラデーションバー

表示サンプル

コード

.article h2 {
    position: relative;
    background-color: transparent;
    width: 100%;
    border: none;
    padding-bottom: 0.6em;
    background: repeating-linear-gradient(-90deg, rgba(255,0,0,0), rgba(255,0,0,0) 2.1em, rgba(255,0,0,1) 2.1em, rgba(255,0,0,0) 2.6em);
    background: -webkit-repeating-linear-gradient(-90deg, rgba(255,0,0,0), rgba(255,0,0,0) 2.1em, rgba(255,0,0,1) 2.1em, rgba(255,0,0,0) 2.6em);
}
.article h3 {
    position: relative;
    background-color: transparent;
    width: 100%;
    border: none;
    padding-bottom: 0.6em;
    background: repeating-linear-gradient(-90deg, rgba(255,0,0,0), rgba(255,0,0,0) 1.6em, rgba(255,0,0,1) 1.6em, rgba(255,0,0,0) 2.0em);
    background: -webkit-repeating-linear-gradient(-90deg, rgba(255,0,0,0), rgba(255,0,0,0) 1.6em, rgba(255,0,0,1) 1.6em, rgba(255,0,0,0) 2.0em);
}
.article h4 {
    position: relative;
    background-color: transparent;
    width: 100%;
    border: none;
    padding-bottom: 0.6em;
    background: repeating-linear-gradient(-90deg, rgba(255,0,0,0), rgba(255,0,0,0) 1.6em, rgba(255,0,0,1) 1.6em, rgba(255,0,0,0) 1.9em);
    background: -webkit-repeating-linear-gradient(-90deg, rgba(255,0,0,0), rgba(255,0,0,0) 1.6em, rgba(255,0,0,1) 1.6em, rgba(255,0,0,0) 1.9em);
}
.article h5 {
    position: relative;
    background-color: transparent;
    width: 100%;
    border: none;
    padding-bottom: 0.6em;
    background: repeating-linear-gradient(-90deg, rgba(255,0,0,0), rgba(255,0,0,0) 1.6em, rgba(255,0,0,1) 1.6em, rgba(255,0,0,0) 1.8em);
    background: -webkit-repeating-linear-gradient(-90deg, rgba(255,0,0,0), rgba(255,0,0,0) 1.6em, rgba(255,0,0,1) 1.6em, rgba(255,0,0,0) 1.8em);
}
.article h6 {
    position: relative;
    background-color: transparent;
    width: 100%;
    border: none;
    padding-bottom: 0.6em;
    background: repeating-linear-gradient(-90deg, rgba(255,0,0,0), rgba(255,0,0,0) 1.6em, rgba(255,0,0,1) 1.6em, rgba(255,0,0,0) 1.7em);
    background: -webkit-repeating-linear-gradient(-90deg, rgba(255,0,0,0), rgba(255,0,0,0) 1.6em, rgba(255,0,0,1) 1.6em, rgba(255,0,0,0) 1.7em);
}

背景フルデザインタイプ

表示サンプル

コード

.article h2 {
    position: relative;
    background-color: transparent;
    width: 100%;
    border: none;
    padding-bottom: 0.3em;
    background: repeating-linear-gradient(-85deg, rgba(243,238,255,1), rgba(255,221,221,0) 0.7em, rgba(255,221,221,1) 0.7em, rgba(255,221,221,0) 1.6em);
    background: -webkit-repeating-linear-gradient(-85deg, rgba(243,238,255,1), rgba(255,221,221,0) 0.7em, rgba(255,221,221,1) 0.7em, rgba(255,221,221,0) 1.6em);
}
.article h3 {
    position: relative;
    background-color: transparent;
    width: 100%;
    border: none;
    padding-bottom: 0.3em;
    background: repeating-linear-gradient(-85deg, rgba(243,238,255,1), rgba(255,221,221,0) 0.7em, rgba(255,221,221,1) 0.7em, rgba(255,221,221,0) 1.5em);
    background: -webkit-repeating-linear-gradient(-85deg, rgba(243,238,255,1), rgba(255,221,221,0) 0.7em, rgba(255,221,221,1) 0.7em, rgba(255,221,221,0) 1.5em);
}
.article h4 {
    position: relative;
    background-color: transparent;
    width: 100%;
    border: none;
    padding-bottom: 0.3em;
    background: repeating-linear-gradient(-85deg, rgba(243,238,255,1), rgba(255,221,221,0) 0.7em, rgba(255,221,221,1) 0.7em, rgba(255,221,221,0) 1.4em);
    background: -webkit-repeating-linear-gradient(-85deg, rgba(243,238,255,1), rgba(255,221,221,0) 0.7em, rgba(255,221,221,1) 0.7em, rgba(255,221,221,0) 1.5em);
}
.article h5 {
    position: relative;
    background-color: transparent;
    width: 100%;
    border: none;
    padding-bottom: 0.3em;
    background: repeating-linear-gradient(-85deg, rgba(243,238,255,1), rgba(255,221,221,0) 0.7em, rgba(255,221,221,1) 0.7em, rgba(255,221,221,0) 1.3em);
    background: -webkit-repeating-linear-gradient(-85deg, rgba(243,238,255,1), rgba(255,221,221,0) 0.7em, rgba(255,221,221,1) 0.7em, rgba(255,221,221,0) 1.3em);
}
.article h6 {
    position: relative;
    background-color: transparent;
    width: 100%;
    border: none;
    padding-bottom: 0.3em;
    background: repeating-linear-gradient(-85deg, rgba(243,238,255,1), rgba(255,221,221,0) 0.7em, rgba(255,221,221,1) 0.7em, rgba(255,221,221,0) 1.2em);
    background: -webkit-repeating-linear-gradient(-85deg, rgba(243,238,255,1), rgba(255,221,221,0) 0.7em, rgba(255,221,221,1) 0.7em, rgba(255,221,221,0) 1.2em);
}

くっきりシンプルデザインタイプ

表示サンプル

コード

.article h2 {
    position: relative;
    background-color: transparent;
    padding-left: .6em;
    padding-bottom: .4em;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: solid .4em #ff0000; 
}
.article h2:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: .3em;
    background: repeating-linear-gradient(-0deg, rgba(0,127,255,1), rgba(0,127,255,1) 0.3em, rgba(0,127,255,0) 0.3em, rgba(0,127,255,0) 0.6em);
    background: -webkit-repeating-linear-gradient(-0deg, rgba(0,127,255,1), rgba(0,127,255,1) 0.3em, rgba(0,127,255,0) 0.3em, rgba(0,127,255,0) 0.6em);
}
.article h3 {
    position: relative;
    background-color: transparent;
    padding-left: .6em;
    padding-bottom: .1em;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: solid .3em #ff8888; 
}
.article h3:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: .2em;
    background: repeating-linear-gradient(-0deg, rgba(0,127,255,1), rgba(0,127,255,1) 0.3em, rgba(0,127,255,0) 0.3em, rgba(0,127,255,0) 0.6em);
    background: -webkit-repeating-linear-gradient(-0deg, rgba(0,127,255,1), rgba(0,127,255,1) 0.3em, rgba(0,127,255,0) 0.3em, rgba(0,127,255,0) 0.6em);
}
.article h4 {
    position: relative;
    background-color: transparent;
    padding-left: .6em;
    padding-bottom: .1em;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: solid .2em #ff8888; 
}
.article h4:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: .1em;
    background: repeating-linear-gradient(-0deg, rgba(0,127,255,1), rgb(0,127,255,1) 0.3em, rgba(0,127,255,0) 0.3em, rgba(0,127,255,0) 0.6em);
    background: -webkit-repeating-linear-gradient(-0deg, rgba(0,127,255,1), rgb(0,127,255,1) 0.3em, rgba(0,127,255,0) 0.3em, rgba(0,127,255,0) 0.6em);
}
.article h5 {
    position: relative;
    background-color: transparent;
    padding-left: .6em;
    padding-bottom: .1em;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: none; 
}
.article h5:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: .1em;
    background: repeating-linear-gradient(-0deg, rgba(0,127,255,1), rgba(0,127,255,1) 0.3em, rgba(0,127,255,0) 0.3em, rgba(0,127,255,0) 0.6em);
    background: -webkit-repeating-linear-gradient(-0deg, rgba(0,127,255,1), rgba(0,127,255,1) 0.3em, rgba(0,127,255,0) 0.3em, rgba(0,127,255,0) 0.6em);
}
.article h6 {
    position: relative;
    background-color: transparent;
    padding-left: .6em;
    padding-bottom: .1em;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: none; 
}
.article h6:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: .1em;
    background: repeating-linear-gradient(-0deg, rgba(0,127,255,1), rgba(0,127,255,1) 0.3em, rgba(0,127,255,0) 0.3em, rgba(0,127,255,0) 1.0em);
    background: -webkit-repeating-linear-gradient(-0deg, rgba(0,127,255,1), rgba(0,127,255,1) 0.3em, rgba(0,127,255,0) 0.3em, rgba(0,127,255,0) 1.0em);
}

警告色?デザインタイプ

表示サンプル

コード

.article h2 {
    position: relative;
    background-color: transparent;
    padding-left: .6em;
    padding-bottom: .4em;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: none; 
}
.article h2:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: .3em;
    background: repeating-linear-gradient(-45deg, rgba(255,196,0,1), rgba(255,196,0,1) 0.3em, rgba(0,0,0,1) 0.3em, rgba(0,0,0,1) 0.6em);
    background: -webkit-repeating-linear-gradient(-45deg, rgba(255,196,0,1), rgba(255,196,0,1) 0.3em, rgba(0,0,0,1) 0.3em, rgba(0,0,0,1) 0.6em);
}
.article h3 {
    position: relative;
    background-color: transparent;
    padding-left: .6em;
    padding-bottom: .3em;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: none; 
}
.article h3:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: .2em;
    background: repeating-linear-gradient(-45deg, rgba(255,196,0,1), rgba(255,196,0,1) 0.3em, rgba(0,0,0,1) 0.3em, rgba(0,0,0,1) 0.6em);
    background: -webkit-repeating-linear-gradient(-45deg, rgba(255,196,0,1), rgba(255,196,0,1) 0.3em, rgba(0,0,0,1) 0.3em, rgba(0,0,0,1) 0.6em);
}
.article h4 {
    position: relative;
    background-color: transparent;
    padding-left: .6em;
    padding-bottom: .1em;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: none; 
}
.article h4:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: .2em;
    background: repeating-linear-gradient(-45deg, rgba(255,196,0,1), rgba(255,196,0,1) 0.3em, rgba(0,0,0,1) 0.3em, rgba(0,0,0,1) 0.6em);
    background: -webkit-repeating-linear-gradient(-45deg, rgba(255,196,0,1), rgba(255,196,0,1) 0.3em, rgba(0,0,0,1) 0.3em, rgba(0,0,0,1) 0.6em);
}
.article h5 {
    position: relative;
    background-color: transparent;
    padding-left: .6em;
    padding-bottom: .1em;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: none; 
}
.article h5:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: .1em;
    background: repeating-linear-gradient(-45deg, rgba(255,196,0,1), rgba(255,196,0,1) 0.3em, rgba(0,0,0,1) 0.3em, rgba(0,0,0,1) 0.6em);
    background: -webkit-repeating-linear-gradient(-45deg, rgba(255,196,0,1), rgba(255,196,0,1) 0.3em, rgba(0,0,0,1) 0.3em, rgba(0,0,0,1) 0.6em);
}
.article h6 {
    position: relative;
    background-color: transparent;
    padding-left: .6em;
    padding-bottom: .1em;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: none; 
}
.article h6:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: .1em;
    background: repeating-linear-gradient(-45deg, rgba(255,196,0,1), rgba(255,196,0,1) 0.3em, rgba(0,0,0,1) 0.3em, rgba(0,0,0,1) 1.0em);
    background: -webkit-repeating-linear-gradient(-45deg, rgba(255,196,0,1), rgba(255,196,0,1) 0.3em, rgba(0,0,0,1) 0.3em, rgba(0,0,0,1) 1.0em);
}

カラフルデザインタイプ

表示サンプル

コード

.article h2 {
    position: relative;
    background-color: transparent;
    padding-left: .6em;
    padding-bottom: .4em;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: none; 
}
.article h2:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: .3em;
    background: repeating-linear-gradient(-45deg, rgba(0,0,255,1), rgba(0,0,255,1) 2px, rgba(255,255,255,1) 2px,rgba(255,255,255,1) 4px,  rgba(255,0,255,1) 4px, rgba(255,0,255,1) 6px, rgba(255,255,255,1) 6px,rgba(255,255,255,1) 8px);
    background: -webkit-repeating-linear-gradient(-45deg, rgba(0,0,255,1), rgba(0,0,255,1) 2px, rgba(255,255,255,1) 2px,rgba(255,255,255,1) 4px,  rgba(255,0,255,1) 4px, rgba(255,0,255,1) 6px, rgba(255,255,255,1) 6px,rgba(255,255,255,1) 8px);
}
.article h3 {
    position: relative;
    background-color: transparent;
    padding-left: .6em;
    padding-bottom: .3em;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: none; 
}
.article h3:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: .2em;
    background: repeating-linear-gradient(-45deg, rgba(0,0,255,1), rgba(0,0,255,1) 2px, rgba(255,255,255,1) 2px,rgba(255,255,255,1) 4px,  rgba(255,0,255,1) 4px, rgba(255,0,255,1) 6px, rgba(255,255,255,1) 6px,rgba(255,255,255,1) 8px);
    background: -webkit-repeating-linear-gradient(-45deg, rgba(0,0,255,1), rgba(0,0,255,1) 2px, rgba(255,255,255,1) 2px,rgba(255,255,255,1) 4px,  rgba(255,0,255,1) 4px, rgba(255,0,255,1) 6px, rgba(255,255,255,1) 6px,rgba(255,255,255,1) 8px);
}
.article h4 {
    position: relative;
    background-color: transparent;
    padding-left: .6em;
    padding-bottom: .1em;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: none; 
}
.article h4:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: .2em;
    background: repeating-linear-gradient(-45deg, rgba(0,0,255,1), rgba(0,0,255,1) 2px, rgba(255,255,255,1) 2px,rgba(255,255,255,1) 4px,  rgba(255,0,255,1) 4px, rgba(255,0,255,1) 6px, rgba(255,255,255,1) 6px,rgba(255,255,255,1) 8px);
    background: -webkit-repeating-linear-gradient(-45deg, rgba(0,0,255,1), rgba(0,0,255,1) 2px, rgba(255,255,255,1) 2px,rgba(255,255,255,1) 4px,  rgba(255,0,255,1) 4px, rgba(255,0,255,1) 6px, rgba(255,255,255,1) 6px,rgba(255,255,255,1) 8px);
}
.article h5 {
    position: relative;
    background-color: transparent;
    padding-left: .6em;
    padding-bottom: .1em;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: none; 
}
.article h5:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: .1em;
    background: repeating-linear-gradient(-45deg, rgba(0,0,255,1), rgba(0,0,255,1) 2px, rgba(255,255,255,1) 2px,rgba(255,255,255,1) 4px,  rgba(255,0,255,1) 4px, rgba(255,0,255,1) 6px, rgba(255,255,255,1) 6px,rgba(255,255,255,1) 8px);
    background: -webkit-repeating-linear-gradient(-45deg, rgba(0,0,255,1), rgba(0,0,255,1) 2px, rgba(255,255,255,1) 2px,rgba(255,255,255,1) 4px,  rgba(255,0,255,1) 4px, rgba(255,0,255,1) 6px, rgba(255,255,255,1) 6px,rgba(255,255,255,1) 8px);
}
.article h6 {
    position: relative;
    background-color: transparent;
    padding-left: .6em;
    padding-bottom: .1em;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: none; 
}
.article h6:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: .05em;
    background: repeating-linear-gradient(-45deg, rgba(0,0,255,1), rgba(0,0,255,1) 2px, rgba(255,255,255,1) 2px,rgba(255,255,255,1) 4px,  rgba(255,0,255,1) 4px, rgba(255,0,255,1) 6px, rgba(255,255,255,1) 6px,rgba(255,255,255,1) 8px);
    background: -webkit-repeating-linear-gradient(-45deg, rgba(0,0,255,1), rgba(0,0,255,1) 2px, rgba(255,255,255,1) 2px,rgba(255,255,255,1) 4px,  rgba(255,0,255,1) 4px, rgba(255,0,255,1) 6px, rgba(255,255,255,1) 6px,rgba(255,255,255,1) 8px);
}

見出しデザインまとめ

繰り返し線形グラデーション(repeating-linear-gradientタグ)を利用した見出しデザインを数点紹介しましたが、
角度、グラデーションパターンとパラメータが豊富なので色々変えてみると、
思いもよらないデザインにめぐり逢えるので楽しいです。
コピペして、ちょっと手を加えると新たな発見があるかもしれません。