前回までの記事
「index.php を作成する – [1]」
「index.php を作成する – [2]」
「header.php / footer.php を作成する」
「sidebar.php を作成する」
で、style.css、index.php、header.php、footer.php、sidebar.php を作成しました。
ですが、これではまだ「単にページが表示されているだけ」と言ってもよい
程度の内容で、まだまだやらなくてはいけないことが山積みです。
今回はヘッダー領域にヘッダー画像やブログタイトル、ブログ説明文を
表示できるようにし、カスタムヘッダー (管理画面で変更できるヘッダー)
として利用できるようにします。
ヘッダー領域は header.php に記述してあります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?></title>
<meta name="viewport" content="width=1024, maximum-scale=1, user-scalable=yes">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="container">
<div id="header">header</div>
<div id="wrapper">
<div id="side-left">
<?php get_sidebar('left'); ?>
</div>
<div id="main">
ヘッダー領域を表示 (しようと) している箇所をハイライト表示しています。
これを以下のように修正します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?></title>
<meta name="viewport" content="width=1024, maximum-scale=1, user-scalable=yes">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="container">
<div id="header">
<div id="header-image">
<?php if (get_header_image()) : ?>
<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
<?php endif; ?>
</div>
<div id="header-text">
<p class="sitename"><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></p>
<h1 class="descr"><?php bloginfo('description'); ?></h1>
</div>
</div>
<div id="wrapper">
<div id="side-left">
<?php get_sidebar('left'); ?>
</div>
<div id="main">
まず、14・18行目でヘッダー画像を表示するブロックを
div タグで括って用意しています。
15行目から17行目の if (get_header_image()) で囲まれたブロックは、
ヘッダー用画像が存在した場合のみ処理するブロックであることを示しています。
本来、get_header_image 関数は、ヘッダー用イメージのURLを取得する
関数ですが、ヘッダー画像の指定がなかった場合は空文字列になるので、
bool (真偽) で判定すると、ヘッダー画像URLありの場合は true に、
ヘッダー画像URLなしの場合は false になることを利用しています。
さて、実際にヘッダー画像を出力している部分が 16行目になります。
header_image 関数は、get_header_image 関数同様、
ヘッダー用イメージのURLを取得しますが、出力まで行ってくれます。
get_custom_header()->width、get_custom_header()->height は
それぞれ、カスタムヘッダー画像の横幅、縦高を取得します。
get_custom_header 関数で指定した画像クラスのプロパティを
echo で出力しているのです。
次は、ブログタイトルとブログ説明文の表示部分です。
19・22行目でブログタイトルとブログ説明文を
表示するブロックを div タグで括って用意しています。
20行目でブログタイトルを、21行目でブログ説明文を表示しています。
home_url 関数は、ブログのホームURLを取得しますので、
アンカーのリンク先URL として echo で出力しています。
bloginfo 関数は 「index.php を作成する – [1]」 でも説明していますが、
パラメータで指定した内容に応じてサイト情報を出力します。
bloginfo(‘name’) はブログタイトルを、
bloginfo(‘description’) はブログ説明文を出力してくれます。
ここまでで、ヘッダー画像やブログタイトル、ブログ説明文を表示するための
HTML ベースの組み込みは終わりました。
各 HTML 要素に class 属性を与えてありますので、style.css に
それに相当するスタイルを追記します。
/*-----------------------------
header
------------------------------*/
/* ヘッダ画像上にヘッダ文字列を重ねて表示 */
#header {
position: relative;
height: 150px;
overflow: hidden;
}
#header #header-image {
position: relative;
margin: 0px;
padding: 0px;
}
#header #header-text {
position: relative;
top: -160px;
left: 15px;
margin: 0px;
padding: 0px;
}
/* ブログタイトル */
#header #header-text .sitename {
color: #ffffff;
font-size: 30px;
line-height: 30px;
margin-bottom: 10px;
}
#header #header-text .sitename a {
color: #464646;
font-weight: bold;
text-decoration: none;
}
/* ブログ紹介文 */
#header #header-text .descr {
color: #464646;
font-size: 12px;
font-weight: normal;
line-height: 20px;
margin-bottom: 0px;
}
ここで、#header、#header-image、#header-text のスタイルに注目してください。
WordPress 3.8 や 3.9 のデフォルトテーマである TwentyFourteen でも
そうなんですが、一般のよくあるテーマでは、
ヘッダー画像の下にブログタイトルやブログ説明文が表示されます。
これでは面白みがないし、ありきたりなので、
ヘッダー画像の上に重ねてブログタイトルやブログ説明文を表示するよう
小細工工夫しています。
それでは、ここで指定している CSS プロパティ を解説します。
position プロパティは、ボックスの配置位置の基準が、
相対位置か絶対位置かを指定します。
( position プロパティの詳細は HTMLクイックリファレンス：position－スタイルシートリファレンス 参照 )
relative は、相対位置で配置する指定となります。
position プロパティを relative で指定した場合、top や left で指定した位置は、
本来表示されるべき位置から 「どれぐらいずらして表示するか」 といった
指定になります。
ヘッダー画像の上にブログタイトルやブログ説明文を重ねて表示したいので、
ブログタイトルやブログ説明文を表示するボックス #header-text を
本来表示する位置から上に相対的にずらすためにこのプロパティを指定しています。
そして、実際にずらす幅を「top: -160px」と「left: 15px」で指定して、
#header-text に表示される内容を #header-image の上に重ねて
やっているわけです。
でも、それであれば、「position: relative」 を指定するのは、#header-text だけで
いいはずです。なぜ #header や #header-image まで指定するのでしょう？
実は、「position: relative」 には罠があります。
「position: relative」 では、そのボックス自身の表示位置はずらしてくれても、
本来表示すべき位置に空いたスペースを自動的に埋めてはくれず、
後に続く要素との間に隙間ができてしまうのです。
上記の場合、#header-text だけに 「position: relative」 を指定すると、
その後に、#header-text の高さ分だけ不恰好な隙間ができるのです。
これを解消するために、親ボックスである #header にも
「position: relative」 を指定し、
「height: 150px」 でヘッダー画像を表示できる高さを固定的に与え、
その高さからはみ出した部分を「overflow: hidden」 で非表示にして
後続の要素が上に詰めて表示されるよう調整しているのです。
( overflow プロパティの詳細は HTMLクイックリファレンス：overflow－スタイルシートリファレンス 参照 )
#header-image については、親ボックスである #header、
HTML記述位置的にこれより下にある #header-text も relative ですので、
同様に relative としておかないと表示がおかしくなりかねませんね。
#header-text に 「overflow: hidden」 を指定してはみ出した部分を
切り捨てればいいと思うかもしれませんが、はみ出した部分を
切り捨てるためには、どこまでがはみ出していないのかを
はっきりさせるために、height で高さを明示的に指定してやる必要があります。
#header-text に表示するブログタイトルやブログ説明文が長くなった場合、
行の折り返しが出て高さが固定的にならない可能性が出てきます。
ですので、親である #header に高さの固定やはみ出しの切り捨てを任せ、
#header-text には、表示される内容によって、高さの自由度を与える必要が
あったのです。
如何でしたでしょうか？ 理解できましたでしょうか？
今回記述したヘッダー画像やブログタイトル、ブログ説明文を
管理画面で変更できるカスタムヘッダーとして利用するためには
function.php を作成し、これに仕込みをしてやる必要もあります。
ちょっと長くなったので、これはまた次回・・・
SmartStyle