見出しのいろんなバージョンを作ってみたくなったので、こちらで保管場所を作りました
「ＣＳＳコード」をクリックすると、ＣＳＳのコードが表示されます。
一通り確認していますが、不具合があるといけないのでＣＳＳを変更前に必ずバックアップをしてくださいm(__)m
ピンクをイメージしました
[su_spoiler title=”ＣＳＳ コード”]
h1 {
color: #ffa3a3;
text-shadow: 0 0 5px white;
padding: 0.3em 0.5em;
background: -webkit-repeating-linear-gradient(-45deg, #fff9fc, #fff9fc 3px,#fdeff2 3px, #fdeff2 7px);
background: repeating-linear-gradient(-45deg, #fff9fc, #fff9fc 3px,#fdeff2 3px, #fdeff2 7px);
}
.entry-content h2 {
font-size: 140%;
position: relative;
padding: 0.2em 0.5em;
background-color: #f4b3c2;
box-shadow: 0px 0px 0px 5px #f4b3c2;
border-top: 1px dashed #fff;
border-bottom: 1px dashed #fff;
}
.article h2 { border-left: none; }
h3 {
background: #fdeff2;
box-shadow: 0px 0px 0px 5px #fdeff2;
border: dashed 2px white;
padding: 0.2em 0.5em;
color: #ee827c;
}
.article h3 { border: none; }
h5{
background-color: #fdeff2; /* 背景色 */
background-image: radial-gradient(#ffffff 20%, transparent 0), radial-gradient(#ffffff 20%, transparent 0); /* 水玉の色 */
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
color: #590c11; /* 文字色 */
padding: 10px; /* 余白 */
}
h6{
color: #590c11; /* 文字色 */
overflow: hidden;
padding: 10px; /* 余白 */
position: relative;
}
h6:after {
background-color: #f3a3a8; /* 1個目（一番左）のドットの色 */
border-radius: 50%;
content: ”;
margin-left: 15px; /* 最後の文字とドットとの余白 */
position: absolute;
top: 50%;
transform : translateY(-50%);
width: 5px; /* ドットの幅 */
height: 5px; /* ドットの高さ */
box-shadow: 20px 0px 0px rgb(217,204,179), /* 2個目のドットの位置と色 */
40px 0px 0px rgb(217,204,179), /* 3個目のドットの位置と色 */
60px 0px 0px rgb(243,163,168), /* 4個目のドットの位置と色 */
80px 0px 0px rgb(217,204,179), /* 5個目のドットの位置と色 */
100px 0px 0px rgb(217,204,179), /* 6個目のドットの位置と色 */
120px 0px 0px rgb(243,163,168), /* 7個目のドットの位置と色 */
140px 0px 0px rgb(217,204,179), /* 8個目のドットの位置と色 */
160px 0px 0px rgb(217,204,179), /* 9個目のドットの位置と色 */
180px 0px 0px rgb(243,163,168), /* 10個目のドットの位置と色 */
200px 0px 0px rgb(217,204,179), /* 11個目のドットの位置と色 */
220px 0px 0px rgb(217,204,179); /* 12個目のドットの位置と色 */
}
[/su_spoiler]
青をイメージしました
[su_spoiler title=”ＣＳＳ コード”]
h1 {
color: #2a83a2;
text-shadow: 0 0 5px white;
padding: 0.3em 0.5em;
background: -webkit-repeating-linear-gradient(-45deg, #ebf6f7, #ebf6f7 3px,#bce2e8 3px, #bce2e8 7px);
background: repeating-linear-gradient(-45deg, #ebf6f7, #ebf6f7 3px,#bce2e8 3px, #bce2e8 7px);
}
.entry-content h2 {
font-size: 140%;
position: relative;
padding: 0.2em 0.5em;
background-color: #89c3eb;
box-shadow: 0px 0px 0px 5px #89c3eb;
border-top: 1px dashed #fff;
border-bottom: 1px dashed #fff;
}
.article h2 { border-left: none; }
h3 {
background: #ebf6f7;
box-shadow: 0px 0px 0px 5px #ebf6f7;
border: dashed 2px white;
padding: 0.2em 0.5em;
color:#89c3eb;
}
.article h3 { border: none; }
h5{
background-color: #c1e4e9; /* 背景色 */
background-image: radial-gradient(#ffffff 20%, transparent 0), radial-gradient(#ffffff 20%, transparent 0); /* 水玉の色 */
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
color: #590c11; /* 文字色 */
padding: 10px; /* 余白 */
}
h6{
color: #590c11; /* 文字色 */
overflow: hidden;
padding: 10px; /* 余白 */
position: relative;
}
h6:after {
background-color: #a2d7dd; /* 1個目（一番左）のドットの色 */
border-radius: 50%;
content: ”;
margin-left: 15px; /* 最後の文字とドットとの余白 */
position: absolute;
top: 50%;
transform : translateY(-50%);
width: 5px; /* ドットの幅 */
height: 5px; /* ドットの高さ */
box-shadow: 20px 0px 0px rgb(217,204,179), /* 2個目のドットの位置と色 */
40px 0px 0px rgb(217,204,179), /* 3個目のドットの位置と色 */
60px 0px 0px rgb(162, 215, 221), /* 4個目のドットの位置と色 */
80px 0px 0px rgb(217,204,179), /* 5個目のドットの位置と色 */
100px 0px 0px rgb(217,204,179), /* 6個目のドットの位置と色 */
120px 0px 0px rgb(162, 215, 221), /* 7個目のドットの位置と色 */
140px 0px 0px rgb(217,204,179), /* 8個目のドットの位置と色 */
160px 0px 0px rgb(217,204,179), /* 9個目のドットの位置と色 */
180px 0px 0px rgb(162, 215, 221), /* 10個目のドットの位置と色 */
200px 0px 0px rgb(217,204,179), /* 11個目のドットの位置と色 */
220px 0px 0px rgb(217,204,179); /* 12個目のドットの位置と色 */
}
[/su_spoiler]
緑をイメージしました
[su_spoiler title=”ＣＳＳ コード”]
h1 {
color: #69821b;
text-shadow: 0 0 5px white;
padding: 0.3em 0.5em;
background: -webkit-repeating-linear-gradient(-45deg, #e0ebaf , #e0ebaf 3px,#f9fff4 3px, #f9fff4 7px);
background: repeating-linear-gradient(-45deg, #e0ebaf , #ebf6f7 3px,#f9fff4 3px, #f9fff4 7px);
}
.entry-content h2 {
font-size: 140%;
position: relative;
padding: 0.2em 0.5em;
background-color: #e0ebaf;
box-shadow: 0px 0px 0px 5px #e0ebaf;
border-top: 1px dashed #fff;
border-bottom: 1px dashed #fff;
}
.article h2 { border-left: none; }
h3 {
background: #f0f2de;
box-shadow: 0px 0px 0px 5px #f0f2de;
border: dashed 2px white;
padding: 0.2em 0.5em;
color:#7b8d42;
}
.article h3 { border: none; }
h5{
background-color: #e0ebaf; /* 背景色 */
background-image: radial-gradient(#ffffff 20%, transparent 0), radial-gradient(#ffffff 20%, transparent 0); /* 水玉の色 */
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
color: #69821b; /* 文字色 */
padding: 10px; /* 余白 */
}
h6{
color: #69821b; /* 文字色 */
overflow: hidden;
padding: 10px; /* 余白 */
position: relative;
}
h6:after {
background-color: #b8d200; /* 1個目（一番左）のドットの色 */
border-radius: 50%;
content: ”;
margin-left: 15px; /* 最後の文字とドットとの余白 */
position: absolute;
top: 50%;
transform : translateY(-50%);
width: 5px; /* ドットの幅 */
height: 5px; /* ドットの高さ */
box-shadow: 20px 0px 0px rgb(217,204,179), /* 2個目のドットの位置と色 */
40px 0px 0px rgb(217,204,179), /* 3個目のドットの位置と色 */
60px 0px 0px rgb(184, 210, 0), /* 4個目のドットの位置と色 */
80px 0px 0px rgb(217,204,179), /* 5個目のドットの位置と色 */
100px 0px 0px rgb(217,204,179), /* 6個目のドットの位置と色 */
120px 0px 0px rgb(184, 210, 0), /* 7個目のドットの位置と色 */
140px 0px 0px rgb(217,204,179), /* 8個目のドットの位置と色 */
160px 0px 0px rgb(217,204,179), /* 9個目のドットの位置と色 */
180px 0px 0px rgb(184, 210, 0), /* 10個目のドットの位置と色 */
200px 0px 0px rgb(217,204,179), /* 11個目のドットの位置と色 */
220px 0px 0px rgb(217,204,179); /* 12個目のドットの位置と色 */
}
[/su_spoiler]
茶色をイメージしました
[su_spoiler title=”ＣＳＳ コード”]
h1 {
color: #6f4b3e;
text-shadow: 0 0 5px white;
padding: 0.3em 0.5em;
background: -webkit-repeating-linear-gradient(-45deg, #d3cbc6 , #d3cbc6 3px,#e6eae3 3px, #e6eae3 7px);
background: repeating-linear-gradient(-45deg, #d3cbc6 , #d3cbc6 3px,#e6eae3 3px, #e6eae3 7px);
}
.entry-content h2 {
font-size: 140%;
position: relative;
padding: 0.2em 0.5em;
background-color: #b4866b;
box-shadow: 0px 0px 0px 5px #b4866b;
border-top: 1px dashed #fff;
border-bottom: 1px dashed #fff;
}
.article h2 { border-left: none; }
h3 {
background: #d3cbc6;
box-shadow: 0px 0px 0px 5px #d3cbc6;
border: dashed 2px white;
padding: 0.2em 0.5em;
color:#6f4b3e;
}
.article h3 { border: none; }
h5{
background-color: #c8c2c6; /* 背景色 */
background-image: radial-gradient(#ffffff 20%, transparent 0), radial-gradient(#ffffff 20%, transparent 0); /* 水玉の色 */
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
color: #543f32; /* 文字色 */
padding: 10px; /* 余白 */
}
h6{
color: #6f4b3e; /* 文字色 */
overflow: hidden;
padding: 10px; /* 余白 */
position: relative;
}
h6:after {
background-color: #b4866b; /* 1個目（一番左）のドットの色 */
border-radius: 50%;
content: ”;
margin-left: 15px; /* 最後の文字とドットとの余白 */
position: absolute;
top: 50%;
transform : translateY(-50%);
width: 5px; /* ドットの幅 */
height: 5px; /* ドットの高さ */
box-shadow: 20px 0px 0px rgb(217,204,179), /* 2個目のドットの位置と色 */
40px 0px 0px rgb(217,204,179), /* 3個目のドットの位置と色 */
60px 0px 0px rgb(180, 134, 107), /* 4個目のドットの位置と色 */
80px 0px 0px rgb(217,204,179), /* 5個目のドットの位置と色 */
100px 0px 0px rgb(217,204,179), /* 6個目のドットの位置と色 */
120px 0px 0px rgb(180, 134, 107), /* 7個目のドットの位置と色 */
140px 0px 0px rgb(217,204,179), /* 8個目のドットの位置と色 */
160px 0px 0px rgb(217,204,179), /* 9個目のドットの位置と色 */
180px 0px 0px rgb(180, 134, 107), /* 10個目のドットの位置と色 */
200px 0px 0px rgb(217,204,179), /* 11個目のドットの位置と色 */
220px 0px 0px rgb(217,204,179); /* 12個目のドットの位置と色 */
}
[/su_spoiler]
