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

2020年7月20日

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

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

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

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

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

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

/* h3見出し背景を画像に */
.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(ブラウザに寄って名称が変わっても)右クリックで「検証」を押してデベロッパーツールを開いて調べます。

/* h3見出し背景を画像に */
.partsH3-26 h3 /* 要素 */ {
color: #ffffff;　/* 文字色 */
border-color: #ddcc9b;　/*元々の見出しデザインに枠が付いているので…要らなければ消してもOK*/
background-image: url(画像URL.jpg);　/* 画像URL*/
background-repeat: no-repeat;　/* この画像は横幅1000で作っているのでリピートしない設定にしています。小さな画像を繰り返したい時はbackground-repeat: round; */
background-position:10% center;　/* この画像は横幅1000で作っているのでピッタリに表示してほしくて設定しています */
background-size:100% 100%;　/* この画像は横幅1000で作っているのでピッタリに表示してほしくて設定しています */
}

.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解説

.article h3 /* 要素 */{
border-left: 7px solid #4e8962;　/* デフォルトh3は枠線で囲まれているので左側の線と下線だけ色を変更して生かすことにした。これは左トップの線 */
border-right: none;　/* これは右の線0に */
border-top: none;　/* これは上の線0に */
border-bottom: 1px solid #4e8962;　/* 下線は色変更 */
color: #ffffff;　/* 文字色 */
background-image: url(画像url.jpg);　/* 画像url */
background-repeat: no-repeat;　/* 画像の繰り返しNOに*/
background-position:10% center;　/* 画像は領域内*/
background-size:100% 100%;　/* 画像は幅いっぱい*/
font-size: 22px;　/* デフォルトのまま見出し文字のサイズ*/
padding: 12px 20px;　/* デフォルトのままの余白*/
}

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

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

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

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

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

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

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

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

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

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

主にWordpress中心のサイト・ブログ制作＆コーダー、カスタマイザー。

2000年からHP制作を始めました。

ハウツーサイトやキュレーションサイトのライター、ブログ作成・運営のお手伝いなどをしております。

お仕事で関わった無料ブログ＆Wordpressカスタマイズ案件実績500件以上。

携わったワードプレステーマ30以上。

アナリティクスを観察するのは生活の一部。

Google Analytics個人認定資格取得(GA4)。 SEOマーケティングアドバイザー資格取得。

SEOに特化したページ作りをめざしています。

カスタマイズのご依頼は「一木堂」へ

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

いつもありがとうございます。

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

Amazonギフト券- Eメールタイプ - Amazonベーシック
金額は空白欄に適当に(15円から)書きこんで下さい。(あらかじめ入っている金額はAmazonの設定なので気になさらないでください)。

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