はてなブログを WordPress 風に！ > cms-style 記事一覧
はてなブログをどうやって当サイトのデザインにしているかを書いています。
前回 では カスタマイズ > ヘッダ > タイトル下 に何らかのコードを挿入することで表示される #top-editarea に背景を付ける方法を説明しましたので、次はそのエリアをどう活用するかになります。便宜上、ページタイトルエリアと呼びます。
01ページタイトルエリアに表示するもの
#top-editarea に背景画像をつけているわけですから、一定程度の高さをとって見せなければ意味がありません。サイトを印象づけるためにスライダーであるとか画像そのものを見せるという方法もあるかと思いますが、あいにく当サイトはアピールするほど大したサイトではありませんので（笑）、各ページに応じて次のものを表示しています。
- トップページ ____ サイトのイメージ画像など（現在はタグクラウド、別記事予定）
- 記事ページ ____ 記事タイトル（.entry-header）
- カテゴリー ____ カテゴリータイトル（#top-box）
- アーカイブ ____ アーカイヴタイトル（.archive-heading）
- 検索結果 ____ 検索ワード（.archive-heading）
ページタイトルエリアに表示する要素には、position:absolute を指定して、記事内容やカテゴリ一覧などのコンテンツ本体と分離しています。理由は、ページタイトルエリアに表示するものの背景は透明とし、コンテンツ本体の背景は白地とするためです。
たとえば記事ページの場合、具体的にこんな CSS になっています。
/* absolute の基準となる親ボックス */ #content-inner { position: relative; } .entry-header { height: 212px; top: -212px; position: absolute; width: -webkit-calc(100% - 30px) ; width: calc(100% - 30px); }
position: absolute; を使って位置を決める場合は、position: static; 以外の指定がされた親ボックスが基準になりますので、記事ページとカテゴリーページでは基準となるボックスが異なります。記事ページでは、#content-inner に position: relative; を指定していますので、.entry-header は top: -212px; となっています。アーカイブページや検索結果の場合は同様です。
カテゴリーの場合は、パンくず（#top-box）を利用していますので、特に基準を指定せず、ウィンドウ左上からとなり、top: 68px; としています。
最後の width は、コンテンツエリアに両サイド 15pxのマージンを取っていますのでそれに合わせるためです。
02ページタイトルエリアの高さ
上の CSS の height: 212px; をどうやって決めているかですが、画面サイズ 768px未満のモバイルを例にとりますと、
- #top-editarea の高さを決める（350px）
- コンテンツの下に潜り込ませる #top-editarea の高さを決める（80px）
ただし、これはデスクトップ用で、モバイルの場合はコンテンツを画面サイズ幅いっぱいにしているので意味はない - #top-editarea の高さは、350px-80px-58px（タイトルエリア高さ）= 212px となる
つまり、タイトルエリア（#blog-title）に position:absolute; を指定して #top-editarea の上にかぶせていますので、その高さを引き、下部ではコンテンツの表示位置を上に 80px ずらしているということになります。ややこしいですね。
タイトルエリアの CSS はこんな感じです。
/* blog-title */ #blog-title { position: absolute; top: 0; left: 0; background-color: rgba(24, 32, 34, 0.5); width: 100%; z-index: 9999; }
画面サイズ 768px以上のタブレットやデスクトップでは、上記の値を、520px-80px-80px（タイトルエイリア高さ）= 360px としています。ですので、背景画像をたくさんコンテンツの下に潜り込ませたい場合は２番め 80pxの値を大きくし、その分コンテンツを上に上げればいいことになります。