【ワードプレス】『見出しを装飾』をCSSカスタマイズ

見出しの知識が必要です
CSSの知識が必要です

正直、見出し装飾のコピペCSSコード集なんてのは【見出し CSS】と検索すれば星の数ほど関連記事が出てきます。

可愛い系、かっこいい系、シンプル系、もう何でも揃います。

しかしたった2行で記事を終えるワケには行きません。本気で乗り気じゃありませんが、適当に10個ぐらい作りたいと思います。

使い方は簡単【ダッシュボード】【左メニュー】【外観】【カスタマイズ】【追加CSS】に【以下のCSSコード】を貼り付けるだけ。『h2』の部分は任意の見出しを指定してください。

後から誰が触ってもカスタマイズしやすいように文字色は白・黒しか使いません。その他は全て原色(black、red、blue、yellow等)で指定します。もちろんカラーコード(#000000等)でも指定可能なので好きな色に変えてください。

数字の部分もいじくれば雰囲気が変わります。失敗したら上書きコピペすれば元通りなので色々やってみてください。

その辺にいくらでもサンプルコードが転がっているので英文コードを覚える必要は・・・少しありますが、全神経集中する必要はありません。

よく使う物は勝手に覚えます。理想に近いコードを拾って適当にいじる方が早いです。じゃ、作ってきます。

 

よっしゃ!とりあえずパパッとライスで作りました。

数えてみたら9個だったので面倒くさいから自前のヤツを足してノルマクリアです。やっと見出し地獄から解放されます。コピーするなりいじくりまくるなり好きにしてください。

 

手作りサンプル集

 

/*キモいストライプ*/
.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』だらけです。

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

 

地球外から丸窓へのアクセス方法