【ワードプレス】CSSで見出しを装飾する方法

見出し装飾のCSSコードは【見出し CSS】で検索すれば星の数ほど出てきます。可愛い系、かっこいい系、シンプル系、何でも揃います。

『自分の理想に一番ちかい物を見つける』のは簡単なんですが、それをカスタマイズして『理想の物にする』為にはCSSの知識が必要になります。とりあえず適当に10個ぐらいサンプルを作っておきますので、それをコピペして練習をしてみてください。

カスタマイズしやすいように文字色は白・黒しか使いません。その他は全て原色(black、red、blue、yellow等)で指定します。もちろんカラーコード(#000000等)でも指定可能なので好きな色に変えてください。数字の部分もいじくれば雰囲気が変わります。

リセットしたければ上書きコピペすれば元通りなので、ビビらずに色々やってみてください。いじってる間にCSSコードは勝手に覚えます。

 

/*キモいストライプ*/
.article h2 {
color:white;
text-shadow: 2px 2px 0 black,
-2px 2px 0 black,
2px -2px 0 black,
-2px -2px 0 black;
font-size:1.8em;
position: relative;
padding: 0.6em;
background: repeating-linear-gradient(-45deg, blue, yellow 4px,green 3px, red 8px);
border-radius: 7px;
}
}

 

/*黄色のグラデーション*/
.article h2{
font-size:1.8em;
position: relative;
padding: 0.1em 0.5em;
background: linear-gradient(to right, yellow, transparent);
line-height:2.5em;
color: black;
}

 

/*注目*/
.article h2{
color:black;
position: relative;
border-top: solid 2px red;
border-bottom: solid 2px red;
background: orange;
line-height: 1.4;
padding: 0.4em 0.5em;
margin: 2em 0 0.5em;
}

.article h2:after {
position: absolute;
content: ‘注目’;
background: red;
color: #fff;
left: 10px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 5px 7px 3px;
font-size: 1em;
line-height: 1;
letter-spacing: 0.05em;
}

 

/*赤ラインと文字デカ*/
.article h2{
background:white;
color:black;
font-size:1.5em;
padding-bottom:10px;
background: linear-gradient(transparent 90%, red 70%);
}
.article h2:first-letter {
background:white;
font-size: 2em;
color: red;
}

 

/*吹き出し*/
.article h2 {
border-radius: 12px 12px 12px 12px;
position: relative;
padding: 0.6em;
background: blue;
margin-bottom:50px;
}

.article h2:after {
position: absolute;
content: ”;
top: 100%;
left: 35px;
border: 15px solid transparent;
border-top: 20px solid blue;
}

 

/*縫い目*/
.article h2{
font-size:1.8em;
background: pink;
box-shadow: 0px 0px 0px 5px pink;
border: dashed 2px red;
padding: 0em 0.5em;
color: black;
}

 

/*キャンディ*/
.article h2{
color: black;
font-size: 1.8em;
line-height:50px;
padding: 10px;
background: repeating-linear-gradient(45deg, yellow, orange 10px, white 10px, pink 20px);
}

 

/*シンプル*/
.article h2{
background:white;
color:black;
padding-bottom:0.5em;
border-bottom: 2px solid black;
}

 

/*手書き赤マル*/
.article h2{
background:white;
color:black;
padding: 1em;
border: 3px solid red;
border-radius: 3em .7em 2em .7em/.7em 2em .7em 3em;
}

 

/*僕シンプルが好きなので*/
.article h2 {
position: relative;
color: white;
background: black;
line-height: 1.4;
padding: 0.8em 01em;
margin: 1em 0em 1em;
border-radius: 2px 2px 2px 2px;
}

 

/*僕シンプルが好きなので*/
.article h3 {
font-size:1.2em;
background: white;
padding: 0em 0.5em;
line-height: 2em;
border-radius: 10px 10px 10px 10px;
background: #F3E2A9;
border-left: 0px solid #FFFFFF !important;
}

 

使用時の注意点

テーマによって場所の指定が『.article h2』では反映されない場合があります。これは内部のPHPかHTMLかよく分からないけど、とにかく『見出し2の定義が違う』からです。もし反映されない場合は『h2』でやってみてください。それでも変わらないならもう『PHP』を見ないと分からないです。

あと、もしどうしても反映されないコードが有れば、語尾に『!important』を付け加えてみてください。強制的に反映させる事ができます。使いすぎたら悪いみたいな事をどっかで読みましたが、そんなこたあ知りません。僕のCSSは『!important』だらけです。

あとグラデーション装飾なんですが、スマホで見た場合に色が汚くなる事がありますので、あまり使わないほうがいいです。今更ですけど。

コメントを残す

メールアドレスが公開されることはありません。