この記事では、はてなブログの記事タイトルに背景画像を追加するテクニックを紹介します。画像に角度をつけたり、さまざまなフィルターを組み合わせてオリジナルなデザインを実現しましょう。
デモページ
基本のCSSコード
ブログタイトル用
はてなブログの「ブログ名」のHTMLは、以下のような構造になっています。ここにあるidblog-title-contentとidtitleを利用してCSSコードで疑似要素（after・before）を追加し、背景画像を配置します。
<div id="blog-title-content"> <h1 id="title"> <a href="ブログのアドレス"> ブログの名前 </a> </h1> </div>
コードが開きます
div#blog-title-content {
position: relative;
margin-top: -50px;
overflow: hidden;
width: 100vw;
left: 50%;
transform: translateX(-50%);
height: 50vh
}
/* 疑似要素を追加 */
h1#title::before {
content: '';
top: 0;
left: 50%;
position: absolute;
background-size: cover;
filter: brightness(1) blur(0px) hue-rotate(0deg) invert(0%) saturate(100%) sepia(0%);
transform: translateX(-50%);
width: 100%;
height: 100%;
background-image: url(画像のアドレス);
background-position: 0% 65%;
background-repeat: no-repeat
}
コードの解説
- 「div#blog-title-content」の部分
width: 100vw:
要素をブラウザの横幅いっぱいに拡げます。
- 「h1#title::before」（before要素）の部分
filter: brightness(1) blur(0px) hue-rotate(0deg) invert(0%) saturate(100%) sepia(0%):
「filter」プロパティは”ぼかし”や色変化などのグラフィック効果を要素に適用します。主に画像、背景、境界の描画を調整するために使用されます。※指定はすべてデフォルト値となっています。background-image: url(画像のアドレス):
背景に設置する画像のURLを指定します。background-position: 0% 65%:
設置した背景画像の位置（Position）を指定します。左側は横位置、右側は縦位置のパーセンテージです。
記事タイトル用
はてなブログの「記事タイトル」のHTMLは、以下のような構造になっています。ここにあるclassentry-titleとclassentry-title-link.bookmarkを利用してCSSコードで疑似要素（after・before）を追加し、背景画像を配置します。
<h1 class="entry-title"> <a href="記事タイトルのアドレス" class="entry-title-link bookmark"> 記事タイトル </a> </h1>
コードが開きます
h1.entry-title {
position: relative;
overflow: hidden;
padding-top: 50vh; /* 要素をブラウザの縦幅半分に拡げる */
margin: 30px auto 50px
}
/* 疑似要素を追加 */
h1.entry-title::after {
content: '';
background-image: url(画像のアドレス);
background-size: cover;
background-position: 50% 35%;
background-repeat: no-repeat;
position: absolute;
filter: blur(2px) brightness(.8); /* ”ぼかし”と明度のグラフィック効果 */
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 0
}
コードの解説
- 「h1.entry-title」の部分
padding-top: 50vh:
要素をブラウザの縦幅半分に拡げます。（100vhで縦幅いっぱい）
- 「h1.entry-title::after」（after要素）の部分
filter: blur(2px) brightness(.8):
「filter」プロパティで背景画像に”ぼかし”と明度のグラフィック効果を適用しています。
アレンジ
イメージをCSSスタイルで変化させることで、オリジナルの画像は加工せずにそのままでバリエーションが増やせるメリットがあります。
画像に角度を付ける
コードが開きます
h1.entry-title {
width: 484px;
height: 314px;
overflow: hidden
}
h1.entry-title::after {
content: '';
position: relative;
display: block;
width: 500px;
height: 345px;
margin: 35px auto 70px;
transform: rotate(-5deg); /* 要素を回転 */
z-index: 2;
background-image: url(画像のアドレス);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat
}
コードの解説
- 「h1.entry-title」の部分
overflow: hidden:
「width・height」で外枠の役割を与え、はみ出た部分をoverflow: hiddenで切り取ります。
- 「h1.entry-title::after」（after要素）の部分
transform: rotate(-5deg):
要素を回転させます。（360degで一周）
filterプロパティ
ぼかし
h1.entry-title { width: 484px; height: 314px; overflow: hidden } h1.entry-title::after { /* 中略 */ filter: blur(5px) }
- 「h1.entry-title」の部分
overflow: hidden:
「width・height」で外枠の役割を与え、輪郭のぼかしをoverflow: hidden`で切り取ります。
- 「h1.entry-title::after」（after要素）の部分
filter: blur(5px):
要素をピクセルの値分ぼかします。
明度
h1.entry-title::after { /* 中略 */ filter: brightness(.5) }
-
filter: brightness(.5):
要素の明るさを指定します。（1が標準値）
セピア
h1.entry-title::after { /* 中略 */ filter: sepia(.9) }
-
filter: sepia(.9):
要素のセピア値を0~100%で指定します。
色相
h1.entry-title::after { /* 中略 */ filter: hue-rotate(180deg) }
-
filter: hue-rotate(180deg):
要素の色相を度数（deg）で指定します。
彩度
h1.entry-title::after { /* 中略 */ filter: saturate(4) }
-
filter: saturate(4):
要素の彩度を指定します。（1が標準値）
反転
h1.entry-title::after { /* 中略 */ filter: invert(1) }
-
filter: invert(.3):
要素の色相・明度・彩度を反転します。（0~100%で指定。0が標準値）
組み合わせ
h1.entry-title { width: 484px; height: 314px; overflow: hidden } h1.entry-title::after { /* 中略 */ filter: blur(3px) brightness(.7) }
おわりに
今回の記事では、はてなブログのタイトルに背景画像を追加する方法について詳しく解説しました。読者に印象を残すオシャレなタイトルに仕上げる一助となれば幸いです。
すてきな画像でブログを彩りましょう~♬
