Nobutake Dogen.com

WordPress オリジナルテーマ作り 第3話

第3話「cssで見た目を変える」

前回、見た目を変えるって事で締めたんですけど、まず記事を増やしておこうと思います。
何にでも準備は必要だ。

適当でいいです。ただ、機能の確認を後ほどするので、moreタグ(続きを読む)も入れておきましょう。

タイトル:テスト投稿マン
本文:本文が入るマン。(続きを読む)
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。

とかでいいです。なんでもいいです。

あと、見た目を変えるための準備も必要です。
「index.php」を変えます。
細かくはそれぞれの部分の説明で再度行っていきますね。
ひとまず「index.php」を下のように修正してください。
フッターも入れましたが、とりあえず気にしないでください。

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<meta name="description" content="ディスクリプション">
	<meta name="keywords" content="キーワード">
	<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" media="screen">
	<title>タイトル</title>	
</head>

<body>
	<div id="header">
		<h1>
			<?php bloginfo('name'); ?>
			<!-- サイトのタイトル -->
		</h1>
		<p class="catch_copy">
			<?php bloginfo('description'); ?>
			<!-- キャッチフレーズ -->
		</p>
	</div>

	<div id="container">
		<?php if(have_posts()): while(have_posts()): the_post(); ?>
		<!-- ループ開始 -->
		<div class="post">
			<h2>
				<?php the_title(); ?>
				<!-- 記事タイトルを表示 -->
			</h2>
			<div class="post_info">
				<span class="post_date">
					<?php echo get_the_date(); ?>
					<!-- 投稿日時を表示 -->
				</span>
				<span class="post_category">
					<?php the_category(', '); ?>
					<!-- カテゴリーを表示 -->
				</span>
			</div>
			<?php the_content(続きを読む); ?>
			<!-- 記事本文を表示 -->
		</div>
		<?php endwhile; endif; ?>
		<!-- ループ終了 -->
	</div>
	<div id="footer">
		<p>©コピーライトマン</p>
	</div>
</body>

</html>

<html>〜</html>の中に<head>〜</head>と<body>〜</body>が入っています。
<head>〜</head>にはヘッダー情報(タイトルやキーワードやディスクリプションやCSSの指定)が書かれています。
<body>〜</body>には文章の本体が書かれます。

head部分

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<meta name="description" content="ディスクリプション">
	<meta name="keywords" content="キーワード">
	<link href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" rel="stylesheet" type="text/css"/>
	<title>タイトル</title>
</head>

まずは1番上から</head>まではこのようになってます。
「ディスクリプション」「キーワード」「タイトル」へそれぞれHPにあったものを入れてください。
8行目の
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" media="screen">
で、style.cssを読み込みに行っています。

body部分

<body>
	<div id="header">
		<h1>
			<?php bloginfo('name'); ?>
			<!-- サイトのタイトル -->
		</h1>
		<p class="catch_copy">
			<?php bloginfo('description'); ?>
			<!-- キャッチフレーズ -->
		</p>
	</div>

	<div id="container">
		<?php if(have_posts()): while(have_posts()): the_post(); ?>
		<!-- ループ開始 -->
		<div class="post">
			<h2>
				<?php the_title(); ?>
				<!-- 記事タイトルを表示 -->
			</h2>
			<div class="post_info">
				<span class="post_date">
					<?php echo get_the_date(); ?>
					<!-- 投稿日時を表示 -->
				</span>
				<span class="post_category">
					<?php the_category(', '); ?>
					<!-- カテゴリーを表示 -->
				</span>
			</div>
			<?php the_content(続きを読む); ?>
			<!-- 記事本文を表示 -->
		</div>
		<?php endwhile; endif; ?>
		<!-- ループ終了 -->
	</div>
	<div id="footer">
		<p class="copy_right">©コピーライトマン</p>
	</div>
</body>

<body>〜</body>の中はこんな感じにしてみました。
それぞれにタグやクラスをつけていますが、とりあえず、こんな感じかな?って軽い気持ちでやっちゃっています。
今後、デザイン変更や機能を追加するたびにここら辺は変わっていく恐れがあります。
こういうのも、仕様書やラフを最初に作らない弊害ですね。

記事タイトルの部分(<h2>)にクラスをつけておくべきかどうかは悩みますね。とりあえず、無しで行くことにしました。

ここまでで一度HPを確認してみましょう。

タイトル文字が大きくなったりして、ちょっとそれっぽくなりますね。
タグをつけるだけでこんな感じになります。タグは偉大だ。
※見ているブラウザなどの環境によっては見た目が結構違うかもしれません。ちなみに上のキャプチャーはChromeです。

style.css

ここから先は好みの問題ですよね。そうですよね。
「style.css」も下のものに置き換えてください。

/*
Theme Name:Super Oshare
Author:dooooogen!
*/

@charset "UTF-8";
* {
	margin: 0px;
	padding: 0px;
}
body {
	background: #fff;
	font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, " メイリオ", Meiryo, Osaka, " MS Pゴシック", MS PGothic, " sans-serif";
	font-size: 16px;
	color: #333;
}
p {
	margin-bottom: 1em;
}
a {
	color: #0084d0;
	text-decoration: none;
}
a:hover {
	color: #ccc;
}
#header {
	border-top: 8px solid #111;
	text-align: center;
}
#header h1 {
	font-size: 24px;
	margin: 30px auto 10px;
	display: block;
	width: 10em;
	font-weight: normal;
}
#header p.catch_copy {
	color: #888;
}
#container {
	max-width: 960px;
	margin: 0 auto;
	padding: 16px;
}
.post {
	margin-bottom: 40px;
}
.post_info {
	text-align: right;
}
h2 {
	font-weight: normal;
	font-size: 32px;
	border-bottom: 1px solid #ccc;
	padding-bottom: 16px;
	margin-bottom: 16px;
}
#footer {
	max-width: 960px;
	margin: 0 auto;
	padding: 16px;
	text-align: center;
	border-top: 1px solid #ccc;
	font-size: 16px;
}

とりあえずシンプルにしました。
ここまでうまくできていれば、こんな感じです。

あくまで好みの問題でフォントサイズの大きなテキストはことごとく「font-weight: normal;」にしています。

さて、ここまで作っておいて今更なんですけど、やっぱりメニューを設置して「About」ページとか作っておいた方がいいですよね。
ということで、次回はメニュー設置の前の準備をします。
インクルードとかいうやつです。

目次

スポンサーリンク

Web Design | 2017年1月5日