CSSで見出しに背景画像を付ける方法(THE・THOR (ザ・トール) 以外でもOK)

カスタマイズに熱が入るとトップの画像から枠からアイコンから目次から……色々とやりたくなるわけで、中でも見出しは誰でもいじりたくなる所。

「見出しを可愛く」の声が聞こえるので、見出しのバックに背景画像を入れるCSS覚え書き。

見出しカスタマイズ「背景を画像に」編

ここでは、当方がこのブログに使っているテーマ「THE・THOR(ザ・トール)」で試作しました。

当方はTHE・THOR(ザ・トール)のH3見出しに既成のカスタマイザーで「背景吹き出し線付」を設定しております。これ

見出し背景を画像にするCSS

.partsH3-26 h3 { color: #ffffff; border-color: #ddcc9b; background-image: url(画像URL.jpg); background-repeat: no-repeat; background-position:10% center; background-size:100% 100%;}.partsH3-26 h3::after { border-top-color: #4e8962;}

 

仕上がりはこんな感じ。(上のCSSを実際に書いちゃうとブログ中のH3が今すぐ変わっちゃうんで……)

見出しに背景画像を入れる

 

CSS解説

「.partsH3-26 h3 」は要素です。

「THE・THOR (ザ・トール) 」の場合、「背景吹き出し線付」見出しは「partsH3」なのですね。

「要素」は、いつものようにChromeやFireFox、Opera(ブラウザに寄って名称が変わっても)右クリックで「検証」を押してデベロッパーツールを開いて調べます。

見出しに背景画像を入れる

 


.partsH3-26 h3 {
color: #ffffff; 
border-color: #ddcc9b; 
background-image: url(画像URL.jpg); 
background-repeat: no-repeat; 
background-position:10% center; 
background-size:100% 100%; 
}
.partsH3-26 h3::after {
border-top-color: #4e8962; 
}

他のテーマでも見出しに背景画像を入れられます

「要素」さえ調べられれば、他のテーマでも、Wordpressじゃなくても同じことが出来ます。

例として Cocoon にあててみましょう。

見出しに背景画像を入れる「Cocoon編」

Cocoon デフォルトのh3タグは以下のようなものです。

.article h3 { border-left: 7px solid #888; border-right: 1px solid #ddd; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;    font-size: 22px; padding: 12px 20px;}

 

を改変します。

 

.article h3 { border-left: 7px solid #4e8962;    border-right: 0px solid #ddd;    border-top: 0px solid #ddd; border-bottom: 1px solid  #4e8962;color: #ffffff;background-image: url(画像URL.jpg);background-repeat: no-repeat; background-position:10% center; background-size:100% 100%;    font-size: 22px; padding: 12px 20px;}

CSS解説

見出しに背景画像を入れる「Cocoon」
.article h3 {
border-left: 7px solid #4e8962; 
border-right: none; 
border-top: none; 
border-bottom: 1px solid #4e8962; 
color: #ffffff; 
background-image: url(画像url.jpg); 
background-repeat: no-repeat; 
background-position:10% center; 
background-size:100% 100%; 
font-size: 22px; 
padding: 12px 20px; 
}

コツは元々のコードを改変すること

「コピペだけで出来るおしゃれな見出しCSS」などのページをよく見ますが、大抵のテーマは

h3 {
background-image: url(画像url.jpg);
}

だけでは改変しないです。

元々、その見出しに付いているコードをデベロッパーで調べて、なるべく詳しく書いてある部分をコピーして改変しましょう。

そうすれば、ほとんどのテーマでデザインがチェンジします。

で結局、デザイン見出しってどうなの

SEO的には何の影響もないので、自己満足上等だと思ってやれば良いのです。可愛いも綺麗も正義。

ただ、重たい画像を入れたら「サイトスピードが落ちる」という点でSEOにマイナス影響が出ます。入れたい時は極力軽くして。

サポートよろしくお願いします

 

いつもありがとうございます。この記事を気に入って下さった方、「寄付してあげてもいいよ」という方がいらっしゃったらサポートしていただけると嬉しいです。


Amazonギフト券- Eメールタイプ – Amazonベーシック


金額は空白欄に適当に(15円から)書きこんで下さい。(あらかじめ入っている金額はAmazonの設定なので気になさらないでください)。

メールのあて先は 「ageru15@gmail.com」です。

※上記のアドレスは投げ銭受け取り専用です。他のメールは受け取れない設定にしてあるのでご注意ください。

 

 

 

よろしくお願いいたします。

なお、この投げ銭システムに関する記事はこちら→『ブログに「投げ銭」システムをつける方法を考えてみたまとめ』