HTML
<!-- 記事タイトル(自動生成) --> <h1 class="entry-title"> <a href="https://rubirubi.hateblo.jp/entry/ウェブ開発" class="entry-title-link bookmark">記事タイトルどデカ画像/Article title and gigantic image (noindex)</a> </h1> <!-- カテゴリタグ --> <div class="tag-category" itemprop="about"> <a href="https://rubirubi.hateblo.jp/archive/category/ウェブ開発" target="_new" rel="category tag">web dev</a> </div>
CSS
/* 記事タイトル */ h1.entry-title { background-image: url(https://cdn-ak.f.st-hatena.com/images/fotolife/f/fobitows/20231028/20231028191502.jpg); background-position: 50% 0%; background-size: cover; position: relative; left: 50%; transform: translateX(-50%); margin: 30px 0; padding: 320px 50px; max-width: 1920px; width: 100vw; height: 930px; z-index: 0; } h1.entry-title::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: rgba(0, 0, 0, 31%); } h1 a.entry-title-link.bookmark { position: relative; display: block; left: 50%; transform: translate(-50%, 0); max-width: 770px; font-size: 70px; font-family: 'Marcellus'; color: #fff; text-shadow: 2px 3px 4px rgb(0, 0, 0, 85%); } a.entry-title-link.bookmark::after { content: ''; position: absolute; bottom: 50%; transform: translateY(calc(50% + 200px)); left: calc(50% - 75px); width: 150px; height: 12px; border-radius: 7px; background: rgb(143, 188, 143, 93%); box-shadow: 3px 4px 4px rgb(0, 0, 0, 50%); } /* カテゴリタグ */ div.tag-category { position: relative; bottom: 780px; left: calc(50% - 93.485px); } div.tag-category a { padding: 10px 27px; font-size: 35px; font-weight: 600; font-family: 'Marcellus', serif; color: rgb(255, 255, 0, 93%); border-radius: 35px; background: rgb(0, 0, 0, 80%); }
コードの解説
h1.entry-title
:記事タイトルのセレクタ- 背景画像 (
background-image
) が設定され、background-position
とbackground-size
を使用して背景画像の位置とサイズが調整されます。 position: relative
を使用して要素を相対位置に指定し、left: 50%; transform: translate(-50%, 0);
を使用して水平方向中央に配置しています。
- 背景画像 (
h1.entry-title::after
:記事タイトルの後に挿入される要素content
プロパティを使用してコンテンツを挿入し、半透明の背景を作成します。これにより、背景画像の明度を制御しています。position: absolute
を使用して要素を絶対位置に配置し、top
、left
、width
、height
を使用して全画面に広がる背景を設定します。z-index
プロパティが-1
に設定され、この要素が他の要素の背後に配置されます。
h1 a.entry-title-link.bookmark
:記事タイトルテキスト(aリンク)のセレクタposition: relative
を使用して要素を相対位置に指定し、left: 50%; transform: translate(-50%, 0);
を使用して水平方向中央に配置しています。max-width
でテキストの最大幅を770px
に設定。
a.entry-title-link.bookmark::after
:<a>
タグにafter要素でアンダーラインを追加- テキスト下に横幅
150px
、高さ12px
のアンダーライン。
- テキスト下に横幅
div.tag-category
およびdiv.tag-category a
:カテゴリタグのセレクタ