WordPress オリジナルテーマを作る〜ヘッダー〜

投稿日：2017年7月5日

今回から実際にサイトをつくっていこうと思います。
サイトのデザインがないので、今このブログを表示しているSTINGER8と同じデザインになるように作っていきたいと思います。

headerを作る

今回から数回にわけてindex.htmlファイルを作っていきます。
以下は全体の構造です。

<!DOCTYPE html>
<html lang="ja">
<head>
	<title>Webデザイナーを目指す人のブログ</title>
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
	<header>
		ヘッダー
	</header>
	<div id="main">
		<div id="top-content">
			コンテンツ
		</div>
		<div id="side">
			サイドバー
		</div>
	</div>
	<footer>
		フッター
	</footer>
</body>
</html>

この中で今日はパソコンで開いた時のヘッダーを作っていきたいと思います。
作るのにかかった時間は20分程度。
ちょっとかかりすぎですね。

デモサイト

<!-- html -->
<header>
	<div class="container">
		<h1><a href="">Webデザイナーを目指す人のブログ</a></h1>
		<h2>Webサイト作成時に勉強したことの備忘録</h2>
		<nav>
			<ul>
				<li>サイト構築</li>
				<li>デザイン</li>
				<li>ツール</li>
			</ul>
		</nav>
	</div>
</header>

<!-- css -->
@charset "UTF-8";

body {
	background-color: #f2f2f2;
	color: #333;
}

h1 {
	font-size: 22px;
	font-weight: 600;
	padding: 15px 0 10px;
}

h1 {
	font-size: 13px;
}

a {
	text-decoration: none;
}

a:visited {
	color: #333;
}

.container {
	max-width: 1040px;
	margin: 0 auto;
	padding-left: 15px;
	padding-right: 15px;
}

/* header */
header nav {
	border-top: 1px solid #E0DEDE;
	border-bottom: 1px solid #E0DEDE;
	margin-top: 15px;
}

header ul li {
	display: inline-block;
	border-right: 1px solid #E0DEDE;
	width: 160px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	font-size: 13px;
}

header ul li:last-child {
	border-right: none;
}

header ul li:last-child {
	border-right-width: none;
}

h1を指定している部分が違ったり、要素を包むdivの数だったり、実際のSTINGER8のソースとは違う部分もちらほらあります。

これが今後どのような影響を与えるかはわからないんですが、
実際にこういう風に困ったよとか出てきたらそこをピックアップしてお伝えしていきます。

明日はこのヘッダーをレスポンシブにしていく作業をしたいと思います。
へば！