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

ブログ収益化
スポンサーリンク

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

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

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

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

オリジナル性が出しやすいように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

  • 見出しの対象を決めるコードです。
  • h2,h3,h4,h5,h6に変更してそれぞれ設定できます。

★2:no-repeat

  • 画像をそのまま1枚使うコードです。
  • 画像を繰り返して表示させたい場合は以下の記述を追記しましょう。
    background:url(ここに画像のURLを入れます)no-repeat;
    background-repeat: repeat;

★3:background-size

  • 画像のサイズを変えられます。
  • デフォルトは33%としていますが画像サイズに合わせて数字を変えてみましょう。

★4:padding

  • 要素の周りの空間のサイズを決めます。
  • padding: 0em[] 0em[] 0em[] 0em[];
  • 上下左右に数字を入れて見出しの位置を整えましょう。

★5:margin

  • paddingの周りの空間のサイズを決めます。
  • margin: 0em[] 0em[] 0em[] 0em[];
  • 上下左右に数字を入れて見出しの位置を整えましょう。

▽Paddingとmargin
 1.padding:要素の周囲
 2.margin:paddingの周囲
 3.border:paddingの四隅

まとめ

見出しはサイトやブログを読みやすくするための重要な要素であるとともに、あなたのサイトをユーザーに認知してもらう上で大切な働きをします。

インターネット上には様々なソースコードが公開されていますが、画像を背景に使うことで唯一無二の見出しを作ることができます。

あなたのサイトにオリジナリティを求めるのであれば見出しも工夫してみましょう!

コメント

タイトルとURLをコピーしました