賢威7の見出しデザインのカスタマイズ全30種【完全版】
「賢威7」では、これまでとは構造が大きく変更されデザイン面でお困りの方が多くいらっしゃるかと思います。
今回は「賢威7」で使用できる見出し（hタグ）デザイン一覧とそれらのCSSでのカスタマイズ方法をご紹介しますので、ぜひ参考にしてみてください。
| ※「賢威7」はこれまでとは違い、記事内での見出しは「h2」から使用するような構造に変更されましたので、今回は「h2」の箇所を取り上げています。 |
見出し（hタグ）のカスタマイズ方法
まず、見出しデザインをカスタマイズするにはどこをどのように変更すればよいかをご説明します。
WordPress管理画面を開き、「外観」→「テーマの編集」へと進み、「base.css」を開きます。
以下のコードが記述してある箇所を探します。（「賢威7スタンダード版」の場合は1100行目あたりにあります。）
これより下の部分が見出しに関するコードです。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/*-------------------------------------------------------- 見出し --------------------------------------------------------*/ .section-in > h1:first-child, .section-in > h2:first-child, .section-in > h3:first-child, .section-in > h4:first-child, .section-in > h5:first-child, .section-in > h6:first-child{ margin-top: 0; } |
少し下に進むと以下のコードが記述してあるかと思います。
|
1 2 3 4 5 6 7 |
.main-body h2{ margin: 60px 0 30px; padding: 10px 18px; background: #909090; color: #fff; font-size: 1.75em; } |
見出し2のデザインをカスタマイズする場合は、こちらをこれから紹介するコードに差し替え、「ファイルを更新」を選択すると反映されます。
見出し3以降のデザインをカスタマイズしたい場合も、h3以降の部分を同様に設定すれば反映されます。
「賢威7」の見出しデザインおすすめ30選！
では、私のおすすめする見出しのデザインを30種類ご紹介していきます。
ちなみに、「賢威7スタンダード版」の見出し2のデフォルトデザインはこちらです。
では、紹介していきます！
背景色なし
①アンダーライン
|
1 2 3 4 5 6 7 8 9 10 11 |
.main-body h2{ color: #111; font-size: 1.143em; font-weight: bold; margin: 0 0 1.5em; border-bottom: 2px solid #499d48; box-shadow: 0 1px 0 #aaaaaa; -webkit-box-shadow: 0 1px 0 #aaaaaa; -moz-box-shadow: 0 1px 0 #aaaaaa; text-shadow: #999999 0px 1px 1px; } |
②2つの四角
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
.main-body h2{ position: relative; color: #111; font-size: 1.143em; font-weight: bold; margin: 0 0 1.5em; padding: 0.5em 0.5em 0.5em 1.7em; border-bottom: 3px solid #499d48; } .main-body h2:before{ content: ""; position: absolute; background: #00ff00; top: 0; left: 0.4em; height: 12px; width: 12px; transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); } .main-body h2:after{ content: ""; position: absolute; background: #32cd32; top: 1.0em; left: 0; height: 8px; width: 8px; transform: rotate(15deg); -moz-transform: rotate(15deg); -webkit-transform: rotate(15deg); -o-transform: rotate(15deg); -ms-transform: rotate(15deg); } |
③左バー＆破線
|
1 2 3 4 5 6 7 8 |
.main-body h2{ margin: 0 0 1.5em; padding: 0.8em; border-left: 7px solid #499d48; border-bottom: 1px dashed #499d48; font-size: 1.143em; font-weight: bold; } |
④斜め棒
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
.main-body h2{ position: relative; padding-left: 30px; border-bottom: 2px solid #ccc; font-weight: bold; font-size: 22px; line-height: 38px; } .main-body h2:after, .heading2:before{ content: ''; height: 18px; width: 4px; display: block; background: #499d48; position: absolute; top: 8px; left: 15px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); } .main-body h2:before{ height: 10px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); top: 16px; left: 7px; } |
⑤一文字目拡大
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.main-body h2{ color: #111; font-size: 1.143em; font-weight: bold; margin: 0 0 1.5em; border-bottom: 2px solid #499d48; box-shadow: 0 1px 0 #aaaaaa; -webkit-box-shadow: 0 1px 0 #aaaaaa; -moz-box-shadow: 0 1px 0 #aaaaaa; text-shadow: #999999 0px 1px 1px; } .main-body h2:first-letter{ font-size:3.0em; } |
⑥二重四角
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
.main-body h2{ position: relative; font-size: 1.143em; font-weight: bold; margin: 0 0 1.5em; padding: 0.5em 0.5em 0.5em 2.0em; border-bottom: 2px solid #499d48; } .main-body h2:before{ content: "□"; font-size: 200%; position: absolute; color: #32cd32; top: -0.8em; left: 0.3em; height: 12px; width: 12px; } .main-body h2:after{ content: "□"; font-size: 200%; position: absolute; color: #00ff00; top: -0.5em; left: 0; height: 12px; width: 12px; } |
⑦四角グラデーション
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 |
.main-body h2{ position: relative; margin: 0 10px; padding: 0 10px 0 55px; font: bold 22px/40px Arial, Helvetica, sans-serif; color: #333333; background: #fff; z-index: 1; border-bottom: 3px solid #499d48; } .main-body h2:before{ content: " "; position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-right: #fff solid 2px; background: #499d48; background-image: -webkit-gradient(linear, left top, left bottom, from( rgba(255, 255, 255, 0.0)), color-stop(0.20, rgba(255, 255, 255, 0.0)), color-stop(0.20, rgba(255, 255, 255, 0.1)), color-stop(0.40, rgba(255, 255, 255, 0.1)), color-stop(0.40, rgba(255, 255, 255, 0.3)), color-stop(0.60, rgba(255, 255, 255, 0.3)), color-stop(0.60, rgba(255, 255, 255, 0.5)), color-stop(0.80, rgba(255, 255, 255, 0.5)), color-stop(0.80, rgba(255, 255, 255, 0.6)), to( rgba(255, 255, 255, 0.6)) ); background-image: -webkit-linear-gradient(top, transparent 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.6) 100% ); background-image: -moz-linear-gradient(top, transparent 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.6) 100% ); background-image: -o-linear-gradient(top, transparent 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.6) 100% ); background-image: linear-gradient(to bottom, transparent 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.6) 100% ); z-index:-1; } .main-body h2:after{ content: " "; position: absolute; top: 0; left: 0; width: 40px; height: 40px; background-image: -webkit-gradient(linear, left top, right top, from( rgba(255, 255, 255, 0.0)), color-stop(0.20, rgba(255, 255, 255, 0.0)), color-stop(0.20, rgba(255, 255, 255, 0.1)), color-stop(0.40, rgba(255, 255, 255, 0.1)), color-stop(0.40, rgba(255, 255, 255, 0.3)), color-stop(0.60, rgba(255, 255, 255, 0.3)), color-stop(0.60, rgba(255, 255, 255, 0.5)), color-stop(0.80, rgba(255, 255, 255, 0.5)), color-stop(0.80, rgba(255, 255, 255, 0.6)), to( rgba(255, 255, 255, 0.6)) ); background-image: -webkit-linear-gradient(left, transparent 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.6) 100% ); background-image: -moz-linear-gradient(left, transparent 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.6) 100% ); background-image: -o-linear-gradient(left, transparent 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.6) 100% ); background-image: linear-gradient(to right, transparent 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.6) 100% ); z-index:-1; } |
⑧上下二重線
|
1 2 3 4 5 6 7 8 |
.main-body h2{ margin: 0 0 1.5em; padding: 0.8em; border-top: 3px double #499d48; border-bottom: 3px double #499d48; font-size: 1.143em; font-weight: bold; } |
⑨吹き出し（上下線）＆斜線背景
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
.main-body h2{ position: relative; padding: 5px 20px; font: bold 28px/1.6 Arial, Helvetica, sans-serif; color: #333; background: #fff; text-shadow: 1px 1px 0 #fff, 2px 2px 0 #999; border-top: #499d48 solid 3px; border-bottom: #499d48 solid 3px; background-image: -webkit-gradient(linear, left top, right bottom, from( rgba(255, 255, 255, 0.0)), color-stop(0.4, rgba(255, 255, 255, 0.0)), color-stop(0.4, rgba(0, 0, 0, 0.1)), color-stop(0.6, rgba(0, 0, 0, 0.1)), color-stop(0.6, rgba(255, 255, 255, 0.0)), to( rgba(255, 255, 255, 0.0)) ); background-image: -webkit-linear-gradient(top -45deg, transparent 40%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.1) 60%, transparent 60% ); background-image: -moz-linear-gradient(top -45deg, transparent 40%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.1) 60%, transparent 60% ); background-image: -o-linear-gradient(top -45deg, transparent 40%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.1) 60%, transparent 60% ); background-image: linear-gradient(to bottom -45deg, transparent 40%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.1) 60%, transparent 60% ); background-size: 4px 4px; } .main-body h2:before{ content: " "; position: absolute; top: 100%; left: 24px; width: 0; height: 0; border-width: 12px; border-style: solid; border-color: transparent; border-top-color: #499d48; } .main-body h2:after{ content: " "; position: absolute; top: 100%; left: 28px; width: 0; height: 0; border-width: 8px; border-style: solid; border-color: transparent; border-top-color: #499d48; z-index: 1; } |
⑩丸角枠
|
1 2 3 4 5 6 7 8 9 10 |
.main-body h2{ margin: 0 0 1.5em; padding: 0.8em; border: 2px solid #499d48; font-size: 1.143em; font-weight: bold; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; } |
⑪大丸角枠＆影
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.main-body h2{ margin: 0 0 1.5em; padding: 0.8em; font-size: 1.143em; font-weight: bold; border: 2px solid #499d48; border-radius: 18px; box-shadow: 3px 3px 3px rgba(0,0,0,0.4); -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.4); -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.4); -o-box-shadow: 3px 3px 3px rgba(0,0,0,0.4); -ms-box-shadow: 3px 3px 3px rgba(0,0,0,0.4); } |
⑫枠＆影
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.main-body h2{ margin: 0 0 1.5em; padding: 0.8em; font-size: 1.143em; font-weight: bold; border: 2px solid #499d48; box-shadow: 3px 3px 3px rgba(0,0,0,0.4); -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.4); -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.4); -o-box-shadow: 3px 3px 3px rgba(0,0,0,0.4); -ms-box-shadow: 3px 3px 3px rgba(0,0,0,0.4); } |
⑬枠＆左バー
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.main-body h2{ position: relative; margin: 0 0 1.5em; padding: 0.8em 0 0.8em 1.5em; border: 2px solid #499d48; font-size: 1.143em; font-weight: bold; } .main-body h2:before{ content: ""; position: absolute; background: #499d48; top: 50%; left: 0.5em; margin-top :-15px; height: 30px; width: 8px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } |
⑭大丸角枠＆リスト
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
.main-body h2{ position: relative; margin: 0 0 1.5em; padding: 0.8em 0 0.8em 2.5em; border: 1px solid #499d48; font-size: 1.143em; font-weight: bold; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; } .main-body h2:before{ content: ""; position: absolute; background: #499d48; top: 50%; left: 0.5em; margin-top :-10px; height: 20px; width: 20px; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; box-shadow: 1px 1px 1px #499d48 inset; -moz-box-shadow: 1px 1px 1px #499d48 inset; -webkit-box-shadow: 1px 1px 1px #499d48 inset; -o-box-shadow: 1px 1px 1px #499d48 inset; -ms-box-shadow: 1px 1px 1px #499d48 inset; } |
⑮吹き出し＆斜線背景
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
.main-body h2{ position: relative; padding: 0.8em; margin: 0 0 1.5em; font-size: 1.143em; font-weight: bold; color: #333; background: #fff; text-shadow: 1px 1px 0 #fff, 1px 1px 0 #999; border: #499d48 solid 2px; background-image: -webkit-gradient(linear, left top, right bottom, from( rgba(255, 255, 255, 0.0)), color-stop(0.4, rgba(255, 255, 255, 0.0)), color-stop(0.4, rgba(0, 0, 0, 0.1)), color-stop(0.6, rgba(0, 0, 0, 0.1)), color-stop(0.6, rgba(255, 255, 255, 0.0)), to( rgba(255, 255, 255, 0.0)) ); background-image: -webkit-linear-gradient(top -45deg, transparent 40%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.1) 60%, transparent 60% ); background-image: -moz-linear-gradient(top -45deg, transparent 40%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.1) 60%, transparent 60% ); background-image: -o-linear-gradient(top -45deg, transparent 40%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.1) 60%, transparent 60% ); background-image: linear-gradient(to bottom -45deg, transparent 40%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.1) 60%, transparent 60% ); background-size:4px 4px; } .main-body h2:before{ content: " "; position: absolute; top: 100%; left: 24px; width: 0; height: 0; border-width: 12px; border-style: solid; border-color: transparent; border-top-color: #499d48; } .main-body h2:after{ content: " "; position: absolute; top: 100%; left: 28px; width: 0; height: 0; border-width: 8px; border-style: solid; border-color: transparent; border-top-color: #F0F0F0; z-index:1; } |
⑯丸角吹き出し（矢印塗りつぶし）＆斜線背景
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
.main-body h2{ position: relative; padding: 0.8em; margin: 0 0 1.5em; font-size: 1.143em; font-weight: bold; border-radius: 5px; color: #333; background: #fff; text-shadow: 1px 1px 0 #fff, 1px 1px 0 #999; border: #499d48 solid 2px; background-image: -webkit-gradient(linear, left top, right bottom, from( rgba(255, 255, 255, 0.0)), color-stop(0.4, rgba(255, 255, 255, 0.0)), color-stop(0.4, rgba(0, 0, 0, 0.1)), color-stop(0.6, rgba(0, 0, 0, 0.1)), color-stop(0.6, rgba(255, 255, 255, 0.0)), to( rgba(255, 255, 255, 0.0)) ); background-image: -webkit-linear-gradient(top -45deg, transparent 40%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.1) 60%, transparent 60% ); background-image: -moz-linear-gradient(top -45deg, transparent 40%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.1) 60%, transparent 60% ); background-image: -o-linear-gradient(top -45deg, transparent 40%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.1) 60%, transparent 60% ); background-image: linear-gradient(to bottom -45deg, transparent 40%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.1) 60%, transparent 60% ); background-size:4px 4px; } .main-body h2:before{ content: " "; position: absolute; top: 100%; left: 24px; width: 0; height: 0; border-width: 12px; border-style: solid; border-color: transparent; border-top-color: #499d48; } .main-body h2:after{ content: " "; position: absolute; top: 100%; left: 28px; width: 0; height: 0; border-width: 8px; border-style: solid; border-color: transparent; border-top-color: #499d48; z-index:1; } |
背景色あり
⑰左バー
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.main-body h2{ position:relative; padding:10px; padding-left:15px; font-weight: bold; font-size: 18px; background-color: #499d48; color: #fff; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; } .main-body h2:before{ content:''; height:25px; width:4px; display:block; position:absolute; top:10px; left:4px; background-color:#fff; border-left: 4px solid #fff; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; } |
⑱マーカー
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
.main-body h2{ position: relative; margin: 0 0 1.5em; padding: 0.8em; font-size: 1.143em; font-weight: bold; color: #fff; background: #499d48; box-shadow: 12px 0 0 0 #499d48, 0 12px 0 0 #499d48, 1px 15px 4px -3px rgba(0,0,0,0.2); -moz-box-shadow: 12px 0 0 0 #499d48, 0 12px 0 0 #499d48, 1px 15px 4px -3px rgba(0,0,0,0.2); -webkit-box-shadow: 12px 0 0 0 #499d48, 0 12px 0 0 #499d48, 1px 15px 4px -3px rgba(0,0,0,0.2); -o-box-shadow: 12px 0 0 0 #499d48, 0 12px 0 0 #499d48, 1px 15px 4px -3px rgba(0,0,0,0.2); -ms-box-shadow: 12px 0 0 0 #499d48, 0 12px 0 0 #499d48, 1px 15px 4px -3px rgba(0,0,0,0.2); } .main-body h2:before{ content: " "; position: absolute; top: 100%; left: 100%; width: 0; height: 0; border-width: 12px 12px 0 0; border-style: solid; border-color: transparent; border-top-color: #00ff00; } .main-body h2:after{ content: " "; position: absolute; padding: 0 20px; bottom: 0; left: 0.8em; width: 10.0em; height: 1.5em; background: rgba(255,244,244,0.4); transform: rotate(-1deg); -webkit-transform: rotate(-1deg); -moz-transform: rotate(-1deg); -o-transform: rotate(-1deg); } |
⑲吹き出し
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.main-body h2{ position: relative; margin: 0 0 1.5em; padding: 0.8em; background: #499d48; color: #fff; font-size: 1.143em; font-weight: bold; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } .main-body h2:after{ position: absolute; bottom: -15px; left: 10%; z-index: 90; margin-left: -15px; border-top: 15px solid #499d48; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 0; content: ""; } |
⑳帯
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
.main-body h2{ position: relative; color: #fff; background: #499d48; font-size: 1.143em; font-weight: bold; margin: 0 -2.8em 1.5em -2.8em; padding: 0.8em; box-shadow: 0 1px 3px #777; -moz-box-shadow: 0 1px 3px #777; -webkit-box-shadow: 0 1px 3px #777; -o-box-shadow: 0 1px 3px #777; -ms-box-shadow: 0 1px 3px #777; } .main-body h2:after, .main-body h2:before{ content: ""; position: absolute; top: 100%; height: 0; width: 0; border: 5px solid transparent; border-top: 5px solid #333; } .main-body h2:before{ right: 0; border-left: 5px solid #333; } .main-body h2:after{ left: 0; border-right: 5px solid #333; } |
㉑リボン＆リスト
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
.main-body h2{ position: relative; color: #111; background: #499d48; font-size: 20px; line-height: 1; margin: 30px 20px 10px -10px; padding: 14px 5px 10px 50px; border-radius: 22px 0 0 22px; } .main-body h2:before{ content: ""; position: absolute; background: #fff; top: 50%; left: 14px; margin-top :-10px; height: 20px; width: 20px; border-radius: 50%; box-shadow: 1px 1px 1px #777 inset; } .main-body h2:after{ content: ""; position: absolute; top: 0; right: -22px; height: 0; width: 0; border: 22px solid #499d48; border-right-color: transparent; } |
㉒二重丸リスト
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
.main-body h2{ position: relative; color: #fff; background: #32cd32; font-size: 20px; line-height: 1; margin: 30px 0 10px 0; padding: 14px 5px 10px 40px; box-shadow: 0 1px 3px #777; border-radius: 0 10px 10px 0; } .main-body h2:before{ content: ""; position: absolute; background: #499d48; top: 50%; left: -20px; margin-top : -22px; height: 44px; width: 44px; box-shadow: 1px 1px 1px #777; border-radius: 50%; } .main-body h2:after{ content: ""; position: absolute; background: #006400; top: 50%; left: -15px; margin-top: -15px; height: 24px; width: 24px; border-radius: 50%; } |
㉓ボックス
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
.main-body h2{ position: relative; padding: 10px; color: #fff; background: #006400; box-shadow: 0 -10px 0 0 #499d48, 10px 0 0 0 #006400, -10px 0 0 0 #006400, 0 3px 3px 0 rgba(0,0,0,0.1); } .main-body h2:before{ content: " "; position: absolute; top: -10px; left: -10px; width: 0; height: 0; border-width: 0 0 10px 10px; border-style: solid; border-color: transparent; border-bottom-color: #499d48; } .main-body h2: after{ content: " "; position: absolute; top: -10px; left: 100%; width: 0; height: 0; border-width: 0 10px 10px 0; border-style: solid; border-color: transparent; border-bottom-color: #499d48; } |
㉔上下色分け
|
1 2 3 4 5 6 7 |
.main-body h2{ width: auto; padding: 3px 0 3px 10px; color: #fff; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.48, #32cd32), color-stop(0.52, #499d48)); text-shadow: 0px -1px 1px #000; } |
㉕旗
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
.main-body h2{ position: relative; margin: 0 0 1.5em; padding: 0.8em; font-size: 1.143em; font-weight: bold; color: #fff; background: #499d48; } .main-body h2:before{ content: "<"; position: absolute; top: middle; left: -10px; width: 0; height: 0; font-size: 25px; line-height: 1.0; color: #c96; } .main-body h2:after{ content: " "; position: absolute; top: -2px; left: -10px; width: 0; height: 130%; border: #600 solid 2px; border-radius:2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; transform: rotate(-2deg); -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -o-transform: rotate(-2deg); } |
㉖斜め
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.main-body h2{ position: relative; padding: 0.8em; margin: 0 0 1.5em; font-size: 1.25em; font-weight: bold; text-align: center; color: #fff; background: #499d48; vtransform: rotate(-1deg) skew(-1deg); -webkit-transform: rotate(-1deg) skew(-1deg); -moz-transform: rotate(-1deg) skew(-1deg); -o-transform: rotate(-1deg) skew(-1deg); -ms-transform: rotate(-1deg) skew(-1deg); box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #499d48, -1.0em 0 0 0 #499d48; -moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #499d48, -1.0em 0 0 0 #499d48; -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #499d48, -1.0em 0 0 0 #499d48; -o-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #499d48, -1.0em 0 0 0 #499d48; -ms-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #499d48, -1.0em 0 0 0 #499d48; } |
㉗斜め帯
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
.main-body h2{ position: relative; margin: 0 -10px; padding: 5px; font: normal 28px/1.6 "Times New Roman", Times, serif; text-align: center; color: #ffe8e8; background: #499d48; -webkit-transform: rotate(-3deg) skew(-3deg); -moz-transform: rotate(-3deg) skew(-3deg); -o-transform: rotate(-3deg) skew(-3deg); transform: rotate(-3deg) skew(-3deg); box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2); background-image: -webkit-gradient(linear, left top, left bottom, from( rgba(0, 0, 0, 0.0)), color-stop(0.08, rgba(255, 255, 255, 0.5)), color-stop(0.12, rgba(255, 255, 255, 0.5)), color-stop(0.12, rgba(0, 0, 0, 0.0)), color-stop(0.88, rgba(0, 0, 0, 0.0)), color-stop(0.88, rgba(255, 255, 255, 0.5)), color-stop(0.92, rgba(255, 255, 255, 0.5)), color-stop(0.92, rgba(0, 0, 0, 0.0)), to( rgba(0, 0, 0, 0.0)) ); background-image: -moz-linear-gradient(top, transparent 8%, rgba(255, 255, 255, 0.5) 8%, rgba(255, 255, 255, 0.5) 12%, transparent 12%, transparent 88%, rgba(255, 255, 255, 0.5) 88%, rgba(255, 255, 255, 0.5) 92%, transparent 92% ); background-image: -o-linear-gradient(top, transparent 8%, rgba(255, 255, 255, 0.5) 8%, rgba(255, 255, 255, 0.5) 12%, transparent 12%, transparent 88%, rgba(255, 255, 255, 0.5) 88%, rgba(255, 255, 255, 0.5) 92%, transparent 92% ); background-image: linear-gradient(to bottom, transparent 8%, rgba(255, 255, 255, 0.5) 8%, rgba(255, 255, 255, 0.5) 12%, transparent 12%, transparent 88%, rgba(255, 255, 255, 0.5) 88%, rgba(255, 255, 255, 0.5) 92%, transparent 92% ); } .main-body h2:before{ content: " "; position: absolute; top: -5px; left: 0; width: 0; height: 0; border-width: 0 0 5px 10px; border-style: solid; border-color: transparent; border-bottom-color: #006400; } .main-body h2:after{ content: " "; position: absolute; top: 100%; right: 0; width: 0; height: 0; border-width: 5px 10px 0 0; border-style: solid; border-color: transparent; border-top-color: #006400; } |
その他
㉘四角グラデーション
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 |
.main-body h2{ position: relative; margin: 0 0 1.5em; padding: 0.6em 0.4em 0.6em 4.0em; font-size: 1.143em; font-weight: bold; color: #fff; background: #333333; z-index: 1; } .main-body h2:before{ content: " "; position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-right: #fff solid 2px; background: #499d48; background-image: -webkit-gradient(linear, left top, left bottom, from( rgba(255, 255, 255, 0.0)), color-stop(0.20, rgba(255, 255, 255, 0.0)), color-stop(0.20, rgba(255, 255, 255, 0.1)), color-stop(0.40, rgba(255, 255, 255, 0.1)), color-stop(0.40, rgba(255, 255, 255, 0.3)), color-stop(0.60, rgba(255, 255, 255, 0.3)), color-stop(0.60, rgba(255, 255, 255, 0.5)), color-stop(0.80, rgba(255, 255, 255, 0.5)), color-stop(0.80, rgba(255, 255, 255, 0.6)), to( rgba(255, 255, 255, 0.6)) ); background-image: -webkit-linear-gradient(top, transparent 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.6) 100% ); background-image: -moz-linear-gradient(top, transparent 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.6) 100% ); background-image: -o-linear-gradient(top, transparent 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.6) 100% ); background-image: linear-gradient(to bottom, transparent 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.6) 100% ); z-index:-1; } .main-body h2:after{ content: " "; position: absolute; top: 0; left: 0; width: 40px; height: 40px; background-image: -webkit-gradient(linear, left top, right top, from( rgba(255, 255, 255, 0.0)), color-stop(0.20, rgba(255, 255, 255, 0.0)), color-stop(0.20, rgba(255, 255, 255, 0.1)), color-stop(0.40, rgba(255, 255, 255, 0.1)), color-stop(0.40, rgba(255, 255, 255, 0.3)), color-stop(0.60, rgba(255, 255, 255, 0.3)), color-stop(0.60, rgba(255, 255, 255, 0.5)), color-stop(0.80, rgba(255, 255, 255, 0.5)), color-stop(0.80, rgba(255, 255, 255, 0.6)), to( rgba(255, 255, 255, 0.6)) ); background-image: -webkit-linear-gradient(left, transparent 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.6) 100% ); background-image: -moz-linear-gradient(left, transparent 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.6) 100% ); background-image: -o-linear-gradient(left, transparent 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.6) 100% ); background-image: linear-gradient(to right, transparent 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.6) 100% ); z-index:-1; } |
㉙左バー＆上下破線
|
1 2 3 4 5 6 7 8 9 10 |
.main-body h2{ position:relative; padding:9px; padding-left:15px; font-weight: bold; font-size: 18px; background-color: #ccc; border: 1px dashed #499d48; border-left: 5px solid #499d48; } |
㉚メタル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
.main-body h2{ position: relative; margin: 0 10px; padding: 10px 10px 10px 30px; font: bold 22px/1.2 Arial, Helvetica, sans-serif; color: #666; background: #ccc; border-top: #ccc solid 1px; border-right: #999 solid 1px; border-bottom: #999 solid 1px; border-left: #ccc solid 1px; text-shadow: 1px 1px 0 rgba(255,255,255,1); box-shadow: 0 0 0 1px rgba(255,255,255,0.5) inset; background-image: -webkit-gradient(linear, left top, left bottom, from( rgba(220, 220, 220, 1.0)), color-stop(0.25, rgba(240, 240, 240, 1.0)), color-stop(0.30, rgba(235, 235, 235, 1.0)), color-stop(0.36, rgba(240, 240, 240, 1.0)), color-stop(0.50, rgba(235, 235, 235, 1.0)), color-stop(0.80, rgba(215, 215, 215, 1.0)), to( rgba(210, 210, 210, 1.0)) ); background-image: -webkit-linear-gradient(top, rgba(220, 220, 220, 1.0), rgba(240, 240, 240, 1.0) 25%, rgba(235, 235, 235, 1.0) 30%, rgba(240, 240, 240, 1.0) 36%, rgba(235, 235, 235, 1.0) 50%, rgba(215, 215, 215, 1.0) 80%, rgba(210, 210, 210, 1.0) ); background-image: -moz-linear-gradient(top, rgba(220, 220, 220, 1.0), rgba(240, 240, 240, 1.0) 25%, rgba(235, 235, 235, 1.0) 30%, rgba(240, 240, 240, 1.0) 36%, rgba(235, 235, 235, 1.0) 50%, rgba(215, 215, 215, 1.0) 80%, rgba(210, 210, 210, 1.0) ); background-image: -o-linear-gradient(top, rgba(220, 220, 220, 1.0), rgba(240, 240, 240, 1.0) 25%, rgba(235, 235, 235, 1.0) 30%, rgba(240, 240, 240, 1.0) 36%, rgba(235, 235, 235, 1.0) 50%, rgba(215, 215, 215, 1.0) 80%, rgba(210, 210, 210, 1.0) ); background-image: linear-gradient(to bottom, rgba(220, 220, 220, 1.0), rgba(240, 240, 240, 1.0) 25%, rgba(235, 235, 235, 1.0) 30%, rgba(240, 240, 240, 1.0) 36%, rgba(235, 235, 235, 1.0) 50%, rgba(215, 215, 215, 1.0) 80%, rgba(210, 210, 210, 1.0) ); } .main-body h2: before{ content: " "; position: absolute; top: 0; left: 15px; width: 0; height: 100%; border-left: #ccc solid 1px; } .main-body h2: after{ content: " "; position: absolute; top: 0; left: 16px; width: 0; height: 100%; border-right: #eee solid 1px; } |
まとめ
今回は「賢威7」で使用できる見出し（hタグ）デザインを30種類紹介しました。
ぜひ参考にしてみてくださいね！
タグ：賢威