オリジナル性高い！見出しの背景に画像を使う方法

ブログの見出しに画像を設定してオリジナリティのあるブログを作ってみませんか？

Googleで『見出し　オシャレ』で検索すると” CSSをコピペするだけでオシャレな見出し “を作ることができるサイトがたくさん出てきます。

サルワカさん(@saruwakakun)のサイト『サルワカ（https://saruwakakun.com/）』はブログを書く人であれば一度は見たことがあるサイトではないでしょうか？

今回は更にオリジナリティを求める人向けに『画像を見出しの背景に使う方法』を解説します。

オリジナル性が出しやすいようにCSSのカスタマイズ方法も載せておきます。

ブログデザインはいつも迷いますが自分らしいオシャレなものにしたいですね♪

この記事の目次

サンプルはこんな感じ！
コピペOK！背景に画像を設定するCSS
1. CSSはこちら！
2. CSSの中身を改変したい方は
まとめ

サンプルはこんな感じ！

見出しの背景に画像を設定したサンプルをご紹介します。

ちょっと私のセンスは…ですのであなたのセンスに期待します！

青空の背景

パステルブロックの背景

当サイトの背景

コピペOK！背景に画像を設定するCSS

CCSコードをコピペしてちょっと改変すればオリジナルの見出しを作ることができます。

CSSが苦手な方に向けてCSS改変の方法も解説します。

WordPressテーマ『cocoon』の例を示します。
CSSのコードはテーマエディターか追加CSSに貼り付けます。
▽テーマエディターの場所

　外観＞テーマエディター

▽追加CSSの場所

　外観＞カスタマイズ＞追加CSS

CSSはこちら！

下のCSSコードの中で『ここに画像のURLを入れます』の部分に画像のURLを入れましょう。

画像のURLとはWordpressのメディアに保存されている画像のURLです。

メディア＞メディアライブラリ内の画像＞ファイルのURLをコピーしましょう。

▽見出しに画像を設定するCSSはこちらから！

/*見出しに画像を設定するCSS*/
.article h2{
　 background:url(ここに画像のURLを入れます) no-repeat;
 　background-size: 33%;
 　padding: 0.5em 0em 0.5em 0.5em;
 　margin: 2em 0em 2em 0em;
}
@media (max-width: 834px) {
 　.article h2{
 　background-size: 60%;
 　padding: 0.4em 0em 0.4em 0.6em;	
 　margin: 3em 0em 2em 0em; 
 }
}

CSSの中身を改変したい方は

画像の縦×横のサイズによっては見出しのタイトルと画像の位置関係が上手くいかず納得いかない仕上がりになる時もあります。

そんな時はCSSのコードを書き換えてみましょう。

初心者でも簡単にできるコードの書き換えです！

▽CSSの改変ポイント！
　先ほどコピペしたCSSの内、★1～5の部分をそれぞれコードを書き換えることで見た目の調整が可能です。

/*見出しに画像を設定するCSS*/
.article h2{　[★1]
　 background:url(ここに画像のURLを入れます) no-repeat;　[★2]
 　background-size: 33%;　[★3]
 　padding: 0.5em 0em 0.5em 0.5em; [★4]
 　margin: 2em 0em 2em 0em;　[★5]
}
@media (max-width: 834px) {　←スマホ対応のCSS
 　.article h2{　[★1]
 　background-size: 60%;　[★3]
 　padding: 0.4em 0em 0.4em 0.6em;　[★4]
 　margin: 3em 0em 2em 0em;　[★5]
　 }
}

★1：article h2