※当サイトにはプロモーションが含まれています。
今回は、CTA（Call To Action）のボタンの上にあるとクリック率があがる見出し（タイトル）のCSSを作りました。
自分は、下記のように期限を告知する際などのお知らせに使ったりします。
6月20日（木）～8月31日(土)まで
最大30%OFFセール
上記の使用例では3行ですが、行数に合わせて斜線の長さが自動で調整されるようになっています。
ただし、４行以上で使う事は想定していないのと、斜線を絶対位置で調整している為、文章が長いと斜線が見切れてしまいます。
その２点はご注意ください。
なお、このサイトで使用しているワードプレステーマの賢威でも、それ以外のサイトでも使用できるので、よかったらご参照ください。
左右に斜線が入ったタイトルのCSS
期間限定などの告知に最適な左右に斜線が入ったタイトルのHTMLとCSSです。
HTML
<div class="nya-title-container-wrap">
<div class="nya-title-container">
<div class="nya-title-with-lines">【期間限定】<br>
6月20日（木）～8月31日(土)まで<br>
最大30%OFFセール</div>
</div>
</div>CSS
.nya-title-container-wrap {
display: flex;
justify-content: center;
align-items: center;
height: auto;
margin: 0;
}
.nya-title-container {
position: relative;
text-align: center;
}
.nya-title-with-lines {
position: relative;
display: inline-block;
padding: 0 20px;
font-size: 1.2em;
text-align: center;
}
.nya-title-with-lines::before,
.nya-title-with-lines::after {
content: "";
position: absolute;
top: 50%;
width: 2px;
height: 100%;
background: black;
transform: translateY(-50%);
}
.nya-title-with-lines::before {
left: -30px;
transform: rotate(-35deg) translateY(-50%);
}
.nya-title-with-lines::after {
right: -30px;
transform: rotate(35deg) translateY(-50%);
}
/* スマートフォン用のメディアクエリ */
@media (max-width: 767px) {
.nya-title-with-lines {
font-size: 1em;
padding: 0 10px;
}
.nya-title-with-lines::before {
transform: rotate(-25deg) translateY(-50%);
}
.nya-title-with-lines::after {
transform: rotate(25deg) translateY(-50%);
}
}上記のCSSについての簡単な補足説明です。
クラス.nya-title-with-lines::beforeと.nya-title-with-lines::afterで、左右の斜線を設定しています。
斜線を太くしたい場合は、width:2px;の値を、3px、4pxとしてやれば太くなります。
クラス.nya-title-with-lines::beforeの、left: -20%;は擬似要素を親要素から20%だけ左にずらして配置しています。
つまり、数値を小さくすると、テキストと斜線の余白が狭くなります。
transform: rotate(-35deg);では、斜線の角度を設定しています。
-45degと記載すると、-45度の線が引けます。
注意点としては、線を左右対称にする場合は、.nya-title-with-lines::beforeと.nya-title-with-lines::afterの両方の値を修正してあげる必要があります。
