前回ヘッダー部分を作成しました。その部分のデザイン変更を行うため、スタイルシートの呼び出しの記述をしましょう。
スタイルシート呼び出し
</title>
<!– スタイルシート呼び出し –>
<link href=”<?php echo get_stylesheet_uri(); ?>” rel=”stylesheet” type=”text/css”>
</head>
現在有効にしているテーマのスタイルシートの場所を呼び出せます。
style.cssの編集
Tags: black, one-column, two-columns, custom-header, custom-menu
*/
/* ————— ヘッダー ————— */
div#header{
background-color: #66ccff;
padding-top; 40px;
padding-bottom: 100px;
}
dev#header h1{
font-size: 2em;
margin: 0 20px;
}
dev#header h1 a{
text-decoration: none;
}
dev#header h2{
font-size: 1em;
margin: 10px 20px 0
}
記述後、きちんと適用されているか確認しましょう。
ここまでの各ファイル記述
index.php
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”<?php bloginfo(‘charset’); ?>”>
<title>
<?php bloginfo(‘name’); ?>
</title>
<!– スタイルシート呼び出し –>
<link href=”<?php echo get_stylesheet_uri(); ?>” rel=”stylesheet” type=”text/css”>
</head>
<body>
<!– ヘッダー部分 –>
<div id=”header”>
<h1>
<a href=”<?php bloginfo(‘url’); ?>”>
<?php bloginfo(‘name’); ?></a>
</h1>
<h2>
<?php bloginfo(‘description’); ?>
</h2>
</div>
</body>
</html>
style.css
/*
Theme Name: sample
Theme URI: http://www.hogehoge.com
Author: oreore
Author URI: http://www.hogehogeblog.com
Description: iketerudesyo
Version: 1.0
Tags: black, one-column, two-columns, custom-header, custom-menu
*/
/* ————— ヘッダー ————— */
div#header{
background-color: #66ccff;
padding-top; 40px;
padding-bottom: 100px;
}
dev#header h1{
font-size: 2em;
margin: 0 20px;
}
dev#header h1 a{
text-decoration: none;
}
dev#header h2{
font-size: 1em;
margin: 10px 20px 0
}