ブログ初心者『ブログで見出しの先頭にオシャレな画像を入れて装飾したいです。でもHTMLやCSSの書き方はまったくわかりません。。やり方を教えてください。』

こんな疑問にお答えします。

この記事でわかること
  • 見出しの先頭を画像で装飾する方法
  • 見出しの背景カラーを変更する方法
  • 見出しの余白サイズを調整する方法
  • 画像の背景を透明にする方法

見出しの先頭を画像で装飾する方法

記事を書く上で、見出しは内容の区切りという大きな役割を持ち、ユーザーの目に留まるのも見出しだったりします。

つまり、この見出しを装飾してより華やかにすることで、ユーザーに記事への興味を抱かせ、飽きて離脱してしまう可能性を下げることが狙えます。

ここでは、この見出しの先頭に画像を挿入することで、見出しを装飾していく方法をご紹介します。

まずは以下の画像をご覧ください。単純なHTMLとCSSで見出しの先頭に画像を挿入してみました。すごい簡単に作っているので、初心者の方もすぐできるかと。

画像はフリー素材を使っていますが、見出しの先頭に画像が入ると、かなり魅力的に感じませんか?

見出しの先頭に画像を表示するHTMLとCSSは次のとおりです。実際には見出し背景カラーの設定、背景画像の位置調整などを行っています。

See the Pen
MNYyrz
by takajin092 (@takajin092)
on CodePen.

この記事では、こんな感じで見出しの先頭に画像を表示する方法を解説していきます。

背景画像の表示:background-image

見出しのような要素の背景に画像を表示するのは、background-imageを使います。CSSでは次のように記述します。

h2{background-image: url(画像のあるパス);}

それでは、上記のbackground-imageだけを使って見出し先頭に画像を表示してみます。すると、次のような表示となります。

See the Pen
pMvyaO
by takajin092 (@takajin092)
on CodePen.

背景画像が見出しの中で繰り返し表示されていることがわかります。

background-imageは要素の背景に画像を表示するものですが、デフォルトだとこのように繰り返し表示されてしまうのです。

では、どうしたら見出しの先頭に1度だけ表示できるのか。。

それを実現するのが、background-repeatによる方法です。

画像の繰り返し表示のコントロール:background-repeat

background-imageで設定した画像は、何も指定しないと要素の領域内で繰り返し表示されます。この繰り返しをコントロールするにはbackground-repeatを使います。

background-repeatは次の値をとります。

repeat 画像を繰り返して表示する
repeat-x 横方向のみ繰り返して表示する
repeat-y 縦方向のみ繰り返して表示する
no-repeat 画像を繰り返さず1回だけ表示する

 

今回やりたいことは、見出しの先頭に1度だけ画像を表示したいので、background-repeatには値:no-repeatを指定すれば良いことがわかります。

具体的には次のように記述します。

background-repeat: no-repeat;

これらを設定した上で実行した結果が以下となります。

See the Pen
gVbreR
by takajin092 (@takajin092)
on CodePen.

これで先頭に1度だけ背景画像を表示することができました。

見出しに表示した画像の位置を調整する:background-position

次は背景画像の表示位置を指定する方法をご紹介します。

今の状態だと、見出し領域の左上を起点として画像が表示されています。なので、たとえば見出しの中央のラインが背景画像の中央に来るように表示したい場合などは画像の位置を調整してあげる必要があります。

背景画像の位置調整にはbackground-positionを使用します。background-positionに設定できる値とその説明を以下に示します。

top 要素の上辺に表示
bottom 要素の下辺に表示
left 要素の左辺に表示
right 要素の右辺に表示
center 要素の中央に表示
数値(+単位) 数値分移動した位置に表示

 

ここでいう要素とは、見出し領域のことです。background-positionは次のように記述します。

background-position: left center;

上のように値を2つ指定した場合、1つ目の値が水平位置を、2つ目の値が垂直位置を指します。

それでは、background-positionを指定した上で、もう一度実行結果を見てみましょう。

See the Pen
ZgYWxw
by takajin092 (@takajin092)
on CodePen.

先ほどの結果と比較してみてください。小さな変化ではありますが、背景画像の表示位置(中央ライン)が見出し文字の中央にきたことがわかります。

見出しの背景カラーを変更する:background-color

これだけでも十分華やいできましたが、好みに応じて見出しの背景カラーを設定してみると良いです。見出しの背景カラーを変更するには、background-colorを使用します。

具体的には、次のように記述します。

background-color: #87ceeb;

#から始まる数字の羅列は、色を16進数で表しているものです。原色大辞典のページで色の16進数表記を確認することができます。参考にしてみてください。

僕は試しに背景色をスカイブルー(#87ceeb)に設定してみました。以下に実行結果を示します。

見出しの余白サイズを調整する

ここまで掲載してきた結果は、すべて見出しの余白サイズを調整済みの結果でした。

見出しの余白を設定することで、十分なスペースが生まれ、見出しが見やすくなります。逆に見出しの余白を設定しないと、次のような結果となり、ちょっと狭い感じがします。

上記の結果では、見出しの余白がゼロなので、見出しの先頭に入れた画像と領域が重なってしまっています。

見出しの余白はpaddingで設定できます。次のように記述します。

padding: 15px 15px 15px 50px;

上記のようにpaddingに4つの値を指定した場合、見出し要素の上の余白→右の余白→下の余白→左の余白という順序で余白が設定されます。

余白(padding)を設定した際の実行結果はここまで掲載してきた結果をご覧ください。同時にCSSでpaddingの指定をしている箇所にご注目ください。

背景画像を透明にする方法

ここまで触れてきませんでしたが、見出しの先頭に挿入する画像自体の背景は透明に設定しておくことをおすすめします

例えば、画像の背景が白色の場合、透明化せずに見出しの先頭に表示すると、次のように違和感が出てしまいます。

見出しの背景カラーを白色に合わせれば問題ないですが、それだと殺風景ですよね。見出しの背景色は記事のテーマカラーに合わせることが多いので、できれば色付けしておきたいところ。

ということで、画像の背景色を透明化する簡単な方法をご紹介します。僕は以下のサイトを利用しています。

画像の背景を透過・透明処理します!

まず、上のリンク先にアクセスしてください。

透明化したい画像を選択した後、[画像を加工する]をクリックします。

画像が表示されるので、透明化したい背景部分をクリックします。

クリックした色と同一の色が透明化されます。ここでは白色の背景部分をクリックしました。

これで背景部分が透明化されました。[保存]をクリックして、パソコンに保存しましょう。

まとめ

ブログを華やかにするために、見出しの先頭に画像を入れて装飾する方法を解説してきました。見出しは記事の中でもとくに目立たせたい場所でもあるので、ユーザーを飽きさせない工夫は必要かと思います。あなた独自の画像を挿入して、あなただけのブログを作ってみてはいかがでしょうか。