マスキングテープ風の見出しデザイン／CSSではてなブログカスタマイズ

いつも人の見出しのデザインを拝借してばかりなので、今回はマスキング風の見出しデザインを作ったのでご紹介します。

CSSはこちらを参考にさせていただきました。

blog.minimal-green.com

こちらではマステでメモ用紙を貼ったようなボックスのCSSなどが紹介されています。

ボックスデザインではシンプルなものを使っているブログが多いですが、こういったデザインもかわいいですねぇ。

マステ風の見出しデザイン
ストライプの太さを変更する方法
見出しの角度を変更する方法

マステ風の見出しデザイン

とりあえず、3色用意してみました。

f:id:ryo_009:20180821214816p:plain

コードを表示する

h1{
  background-image: linear-gradient(-45deg, rgba(255,230,200,.4) 25%, transparent 25%, transparent 50%, rgba(255,230,200,.4) 50%, rgba(255,230,200,.4) 75%, transparent 75%, transparent 100%);/*見出しの色*/
  background-size: 20px 20px;/*線の太さ*/
  border-left:2px dotted rgba(0,0,0,.1);
  border-right:2px dotted rgba(0,0,0,.1);
  box-shadow:0 0 5px rgba(0,0,0,.2);/*見出しの影*/
  padding: 0.5em;/*文字まわりの余白*/
  color: #454545;/*文字色*/
  transform: rotate(0deg);/*見出しの角度*/ 
}

f:id:ryo_009:20180821214800p:plain

コードを表示する

h1{
  background-image: linear-gradient(-45deg, rgba(200,230,245,0.4) 25%, transparent 25%, transparent 50%, rgba(200,230,245,.4) 50%, rgba(200,230,245,.4) 75%, transparent 75%, transparent 100%);/*見出しの色*/
  background-size: 20px 20px;/*線の太さ*/
  border-left:2px dotted rgba(0,0,0,.1);
  border-right:2px dotted rgba(0,0,0,.1);
  box-shadow:0 0 5px rgba(0,0,0,.2);/*見出しの影*/
  padding: 0.5em;/*文字まわりの余白*/
  color: #454545;/*文字色*/
  transform: rotate(0deg);/*見出しの角度*/ 
}

f:id:ryo_009:20180821214810p:plain

コードを表示する

h1{
  background-image: linear-gradient(-45deg, rgba(220,245,200,.4) 25%, transparent 25%, transparent 50%, rgba(220,245,200,.4) 50%, rgba(220,245,200,.4) 75%, transparent 75%, transparent 100%);/*見出しの色*/
  background-size: 20px 20px;/*線の太さ*/
  border-left:2px dotted rgba(0,0,0,.1);
  border-right:2px dotted rgba(0,0,0,.1);
  box-shadow:0 0 5px rgba(0,0,0,.2);/*見出しの影*/
  padding: 0.5em;/*文字まわりの余白*/
  color: #454545;/*文字色*/
  transform: rotate(0deg);/*見出しの角度*/ 
}

見出しのストライプ部分の色を変えたい場合は、background-imageのマーカー部分の3か所にそれぞれ変えたい色のRGBの数値を入力することで変更することができます。

RGBの数値を確認するには、こちらのサイトがおすすめです。

www.peko-step.com

はてなブログのブログテーマ「Minimalism」では、大見出しがh3、中見出しがh4、小見出しがh5となっています。

上のCSSではh1になっているので、適宜修正をお願いします。