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

f:id:ryo_009:20180821230848p:plain

 

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

 

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になっているので、適宜修正をお願いします。

 

ストライプの太さを変更する方法

ストライプ部分の線の太さはbackground-sizeで変更できます。

 

「background-size:10px 10px;」にするとこんな感じで細くなります。

f:id:ryo_009:20180821222229p:plain

 

逆にマーカー部分の数値を大きくすると太くなるので、いろいろ試して好みの太さを探してみてください。

 

見出しの角度を変更する方法

見出しの角度はtransformで変更できます。

 

「transform: rotate(-1deg)」 にするとこんな感じで斜めになります。

f:id:ryo_009:20180821222754p:plain

 

マーカー部分の数値を大きくすれば大きくするほど角度が付きます。

マイナスの数値だと右肩上がりプラスの数値だと右肩下がりになります。

 

角度をつけすぎると本文とかぶってしまうので、角度を付けたい場合は上手いこと調整してみてください。

 

以上です!

見出し以外のカスタマイズ方法についてはこちらをどうぞ。

www.crypto-ksw.com

 

はてなブログのブログテーマ「Minimalism」を使っていなくても使えるCSSもまとめているのでぜひにー。