ブログに使えるマステの柄みたいな見出し【Cocoonカスタマイズ】

見出しで個性を出す

WordPressで運営するブログに必要なものはまず「テーマ」。それから内容に沿ったレイアウトやデザインです。その中でも簡単に個性が出せるのが見出しです。今回はマスキングテープみたいな見出しのCSSを紹介したいと思います。

マスキングテープとは？

マスキングテープはもともと、カラースプレーやエアーブラシを使うときに色をつけたくないところを保護するために使われていたものでした。カモ井加工紙が展開する「mt」の定着により、最近は各文具メーカーがこぞってマスキングテープを販売しています。

貼るだけじゃなく、デコレーションとしても使える柄も増えています。マスキングテープの良さは剥がすときも面が痛みにくいのが特徴。

文字の色とバランスを取る

今回のマステ（マスキングテープの略称）みたいな見出しは、柄がしっかり出るので、見出しの柄に使う色は文字の色より「薄くor明るく」するのが基本です。補色を使ってもいいんですが、目が疲れるのでオススメしません。

サンプルコード見本帳

まず見出しのCSSを初期化します。このブログのテーマ「Cocoon」だと、見出しが1~6まであります。テーマによって見出しの数も違うので、初期化する前は見出しの数をあらかじめ確認しておいてください。

/*見出し初期化*/ 
.article h1, 
.article h2, 
.article h3, 
.article h4, 
.article h5, 
.article h6{  
padding: 0; 
margin: 0; 
font-size: medium; 
border-collapse: separate; 
border-spacing: 0; 
border-top: none; 
border-right: none; 
border-bottom: none; 
border-left: none; 
line-height: normal; 
position:relative; 
}

では、コピペでどうぞ。ペーストするときは、変えたい見出しのセレクタを必ず変えてくだい。

斜めのゴールドストライプ

ゴールドも色々なニュアンスがありますが、一番使いやすいトーンのものにしてみました。

.article1 { 
font-size:20px; /*フォントのサイズは指定しなくてもOK*/ 
color: #333333; 
text-align: center; 
padding: 0.25em; 
border-top: solid 2px #fff; 
border-bottom: solid 2px #fff; 
background: -webkit-repeating-linear-gradient(-45deg, #fff, #fff 3px,#CE9B01 3px, #CE9B01 17px); 
background: repeating-linear-gradient(-45deg, #fff, #fff 3px,#CE9B01 3px, #CE9B01 17px); 
}

紙っぽい白の透かし模様

見出しっぽい面が出ないので分かりにくいんですが、背景っぽい見出しにしたいときに。

.article2{ 
font-size:20px;/*フォントのサイズは指定しなくてもOK*/ 
color: #333333; 
text-align: 
center; 
padding: 0.25em; 
border-top: solid 2px #FFFAFA; 
border-bottom: solid 2px #FFFAFA; 
background: -webkit-repeating-linear-gradient(-45deg, #FFFAFA, #FFFAFA 3px,#fff 3px, #fff 7px); 
background: repeating-linear-gradient(-45deg, #FFFAFA, #FFFAFA 3px,#fff 3px, #fff 7px); 
}

ピンクの斜めストライプ

結構主張があります。もっと柔らかいピンクでもいいですね。

.sample-article3{ 
font-size:20px; 
color: #333333; 
text-align: center; 
padding: 0.25em; 
border-top: solid 2px #FFFAFA; 
border-bottom: solid 2px #FFFAFA; 
background: -webkit-repeating-linear-gradient(-45deg, #FC68B6, #FC68B6 10px,#fff 10px, #fff 20px); 
background: repeating-linear-gradient(-45deg, #FC68B6, #FC68B6 10px,#fff 10px, #fff 20px); 
}

定番ボーダー柄

ボーダー柄にするなら明るい色、もしくはアーストーンを指定してください。

.article4{ 
font-size:20px; 
color: #333333; 
text-align: center; 
padding: 0.25em; 
border-top: solid 2px #FFFAFA; 
border-bottom: solid 2px #FFFAFA; 
background: -webkit-repeating-linear-gradient(-180deg, #C8BDAA, #C8BDAA 6px,#FFF 6px, #FFF　12px); 
background: repeating-linear-gradient(-180deg, #C8BDAA, #C8BDAA 6px,#FFF 6px, #FFF 12px); 
}

ここで紹介した見出しをコピー。色だけ変えたい！ときは…

background

で指定されている色の値を変更するだけでOK。

PCとモバイルのサイズを微調整！

PCでは文字のサイズを20pxに指定しているので、変更を加えない限り、指定した値がそのまま全ディスプレイに反映されてしまいます。なので、必要に応じて文字のサイズを変更しましょう。

また、紹介した見出しはテキストがセンターに配置されているので、スマホで見る場合だと読みづらくなることもあります。センターではなく、左から文章が始まるように変更します。

@media screen and (max-width: 480px) {
 /*見出しモバイル用調整*/ .article h2 { font-size:18px; text-align: left; } }

これで作業は終わりです。見出しのCSSを変えずに上のコードを自由に使うなら、プラグイン「AddQuickTag」を使うと便利ですよ。ロゴ作るの面倒臭い、でも人と少し差をつけたいときに見出しのバリエーションを用意するとサイトの雰囲気が簡単に整います。コピペでサクッとやってみてください。