WordPress自作テーマ用HTML・CSSテンプレート（カスタマイズ例と、WordPressで使う準備）

wordpress-template
Update Web制作メモ >

前回作成したHTMLをもとにした、HTMLとCSSのカスタマイズ例を書いてみました。PHPコードでの書き直しをはじめる前までの手順メモです。とっても長々と書いてしまったので、最後にかんたんなまとめと全部のファイルを載せています。

大まかな流れ

今回のおおまかな流れを記します。

  • ベースとなるHTMLファイルに、クラスなどを追記する（カスタマイズしやすくするため）
  • CSSを修正する（HTMLに追記したクラスなどを使って）
  • ローカルでWordPressを使う環境を整える
  • WordPressテーマとして使うための準備（HTML・CSSを少し修正する）
  • ローカルのWordPressのテーマフォルダ内にアップロードする
  • ブラウザで表示させてみる

HTML・CSSのカスタマイズ例（クラスなどの追記）

前回作成したHTMLファイルには、ブログの構成に必要な最小限の要素だけを書きました。

もう少しカスタマイズしやすくするために、クラスやidをつけたりdivやspanで囲ったりしていきます。

index.html

まず、前回作成したindex.htmlのコードと構造（階層）を画像であらわしてみました。別ウィンドウで開きますので、拡大してみてください。

hierarchy-of-index

これを以下のように書きなおしました。

修正したindex.htmlのコードと構造（階層）を画像であらわしてみたものです。別ウィンドウで開きますので、拡大してみてください。

hierarchy-of-index03

やったことのメモです。

  • クラスやidが無くてもカスタマイズに支障はないかなあという箇所には、なにも追加していません。上の画像で「クラス無し」と書いているところです。
    もちろん全部の要素にクラスを書いてもいいのだと思います。今回はできる限りシンプルに。
  • 後ほどPHPコードに書きかえることによって、自動でクラスがつく箇所があります。上の画像で「クラスあとで」と書いているところなどです。
  • 「クラス追加」と書いた箇所には、クラスやidを追加しました。
  • 新たにdivやspanで囲った箇所がありますので、前のHTMLと階層がちょっと変わっています。
    これについても、もっとdivを使ったほうがカスタマイズしやすいのかもしれませんが…今回はできる限りシンプルに。
  • WordPressの現在のデフォルトテーマ「Twenty Thirteen」を参照してクラス名を決めました。自分のわかりやすいクラス名で良いかと。

single.html

同様にsingle.htmlも書き直しました。

single.htmlは個別記事を表示するページですので、index.html（トップページ）とは以下のあたりが異なります。

  • ぱんくずリストがあります。クラスを追加しました。
  • 記事タイトルは<h1>にしています（index.htmlではh2）。
  • 関連記事の表示があります。記事の下にもあるので、ここには無くてもいいかも。
    <div>で囲わず、<ul>にクラスを追加しました。
  • 「続きを読む」は無くなります。
  • シェアボタンがあります。
  • 関連記事の表示があります。こちらにはサムネイルも表示させています。記事タイトルにクラスを追加しました。
  • ページャー（1 2 3 … ）の代わりに、前後記事へのページャーがあります。divで囲い、クラスを追加しました。記事タイトルにもクラスを。

page.html

続いて、page.htmlを書き直しました。

  • page.htmlのコード：
    • 



	
    10251
    

	


    
	
    10251
    
	

    


    Home  > ページタイトル
    


    
	
    
	
    
		
    
			
    ページタイトル
    
		
    

		
    お問い合わせフォームとか、
    
		
    サイトマップとか、
    
		
    プロフィールとかとかを載せるページ

固定ページを表示するpage.htmlは、single.htmlから要らないものを削って作成するイメージです。single.htmlと異なる箇所をを挙げてみます。

  • 日付やカテゴリー名などは表示させていません。
  • 画像（アイキャッチ表示）もありません。
  • 関連記事、シェアボタン、ページャーもありません。

archive.html

最後にarchive.htmlを書き直しました。

カテゴリーやタグ、日付別に記事一覧を表示させるページですので、ほとんどindex.phpと同じです。異なるのは以下の箇所くらいです。

  • ぱんくずリストがあります。
  • 何のページかを表示するタイトルがあります。

ここまでのまとめ（サンプルも）

前回は、クラス名などは無しのごくシンプルなHTMLを作成しました。

そして今回、ベースとなるHTMLにクラス名を追記したり、一部をdivなどで囲ったりして、もうちょっとカスタマイズしやすく修正しました（見た目はほぼ変わっていません）。

修正前後のindex.htmlの構造の比較です。

  • 最初のindex.html

    • hierarchy-of-index

  • 修正したindex.html

    • hierarchy-of-index03

CSSテンプレート（サンプルも）

上で書き加えたクラスなどを使った、カスタマイズの一例です。

  • style.cssのコード：
    • a{
	color: cadetblue;/*ページ全体のリンク文字色*/
	text-decoration: none;/*リンクの下線を消す*/
}

body{
	background: #e9e8e3;/*ページ全体の背景色*/
}

.site-header{
	background: #3a3a3a;/*ヘッダー背景色*/
	margin-bottom: 1em;/*ヘッダー下の余白*/
}

.site-title a{
	color: #e9e8e3;/*ブログタイトルの色*/
}


#main{
	width: 60em;/*左右カラムを包んでいるところの幅*/
	margin: 0 auto;/*ページの中央に表示*/
}

nav div/*あとでクラスに変更*/{
	width: 60em;/*ナビゲーションメニューの幅。#main（左右カラムを包んでいるところ）と同じ幅*/
	margin: 0 auto;/*ページの中央に表示*/
}

nav div ul{
	list-style: none;/*ナビゲーションメニューの箇条書きのてんてんを消す*/
}

nav div li{
	display: inline-block;/*ナビゲーションメニューを横並びにする*/
	margin-right: 1em;/*各メニュー間の余白*/
}

nav div li a{
	color: #e9e8e3;
}

.bread{
	width: 60em;/*ぱんくずリストの幅。#main（左右カラムを包んでいるところ）と同じ幅*/
	margin: 0 auto 2em;/*ページの中央に表示。ぱんくず下に余白。*/
}

.content{
	float: left;/*メインコンテンツ部分を左寄せにする*/
	width: 38em;/*左カラムの幅*/
}

article{
	background: white;/*記事の背景色*/
	margin-bottom: 3em;/*記事下の余白*/
	padding: 1em;/*記事の内側の余白*/
}

article header img{
	margin: 1em 0;/*記事のサムネイル上下の余白*/
}

.entry-meta{
	background: #d1d0cc;/*記事の日付・カテゴリー・タグの背景色*/
}

.categories-links{
	/*あとで*/
}

.tags-links{
	/*あとで*/
}


.related-top{
	background: #e9e8e3;/*関連記事（上）の背景色*/
}

.share{
	list-style: none;/*シェアボタンの箇条書きのてんてんを消す*/
}

.share li{
	display: inline;
}

.related-bottom{
	background: #e9e8e3;/*関連記事（下）の背景色*/
	list-style: none;/*関連記事（下）の箇条書きのてんてんを消す*/
}

.related-bottom img{
	width:200px;/*関連記事サムネイルのサイズ。ほんとはCSSで調整せず、PHPで出し分ける。あとで。*/
	height: auto;
}

.related-bottom .title{
	margin-bottom:1em;/*関連記事（下）のタイトル下の余白*/
}


.nav-links{
	background: #3a3a3a;/*ページャーの背景色*/
	color: #e9e8e3;/*ページャーの文字色*/
}


.single-nav-links dl{
	background: #3a3a3a;/*前後記事へのページャーの背景色*/
	color: #e9e8e3;/*前後記事へのページャーの文字色*/
}

.single-nav-links img{
	width:100px;/*前後記事へのページャーのサムネイルサイズ。ほんとはCSSで調整せず、PHPで出し分ける。あとで。*/
	height: auto;
}

.single-nav-links dl{
	width: 46%;/*前の記事、次の記事の幅*/
}

.single-nav-links dl:nth-child(1){
	float: left;/*前の記事は左寄せ*/
}

.single-nav-links dl:nth-child(2){
	float: right;/*次の記事は右寄せ*/
}

.single-nav-links .title{
	margin-bottom:1em;/*前後記事ページャーのタイトル下の余白*/
}

aside{
	float: right;/*サイドバーを右寄せにする*/
	width: 20em;/*右カラムの幅*/
	margin-left: 2em;/*左右カラム間の余白*/
}

aside section{
	background: white;/*サイドバーウィジェット下の背景色*/
	margin-bottom: 2em;/*サイドバーウィジェット下の余白*/
}

aside section h3{
	color: #e9e8e3;/*サイドバー見出しの文字色*/
	background: #3a3a3a;/*サイドバー見出しの背景色*/
}

footer{
	background: #3a3a3a;/*フッターの背景色*/
	padding: 1em 0;/*フッター内側上下の余白*/
	margin-top: 2em;/*フッター上の余白*/
}


/*左右カラムを包んでいるところ（#main）と、single.html内のページャー（.single-nav-links）につけたクラス。floatを解除する。*/
.clearfix:after{
	content: "";
	clear: both;
	display: table;
}

このCSSを、4つのHTMLファイルに適用させてみます。

あとはごりごりとカスタマイズして、お好みのデザインを完成させるのみです。

CSSのリセット・ノーマライズ

さて、上のサンプルでは、見出し（記事タイトルなど）が大きなフォントで表示されていたり、リスト（<ul>）の左側や、ヘッダー上などにバランスの悪い余白がつくられたりしています。これはブラウザのデフォルトスタイルによるものです。ブラウザが親切に、ここは見出しだから大きく表示しよう！とか、ここはリストだから一文字下げよう！とかしてくれているわけです。

このデフォルトスタイルはブラウザによって設定が異なるので（つまり見た目が結構異なるので）、このままだとデザインが崩れてしまう可能性があります。

その違いをなくすためにおこなうのが、CSSのリセットあるいはノーマライズです。

以下の記事にてとっても詳しく解説されています！

[CSS]CSSリセットとは異なる、Normalize.cssの特徴や使い方などの解説 -About normalize.css | コリス
なぜリセットではなく Normalize.css を使うのか

リセット（Twenty Twelve）

WordPressの一つ前のデフォルトテーマ「Twenty Twelve」ではCSSのリセットがおこなわれています。

Twenty Twelveのstyle.css

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}

/*中略*/

ol,
ul {
	list-style: none;
}
/*以下省略*/

このように、あらゆる要素の余白（marginやpadding）を0にしたり、フォントサイズを統一したり、文書全体の行間を統一したり、リストの箇条書きのてんてんを無くしたり…ブラウザのデフォルトスタイルをリセットしています。

ナビゲーションメニューやシェアボタン、関連記事など、<ul>でマークアップしていても、左側の余白やてんてんが要らない箇所が多いですものね。

でもこれだと全ての<ul>が箇条書き（の見た目）ではなくなってしまいます。

そこで、記事内の<ul>部分については改めて以下のように指定するわけです。

.entry-content ul/*記事内のリスト部分*/{
	margin: 0 0 24px;/*余白をつくったり*/
	margin: 0 0 1.714285714rem;
	line-height: 1.714285714;/*行間を広くしたり*/
}

.entry-content ul{
	list-style: disc outside;/*箇条書きのてんてんを表示させたり*/
}

.entry-content li{
	margin: 0 0 0 36px;
	margin: 0 0 0 2.571428571rem;
}

ノーマライズ（Twenty Thirteen）

これに対して、WordPressの現在のテーマ「Twenty Thirteen」ではノーマライズCSSという手法をとっています。ブラウザのデフォルトスタイルを全部リセットしてしまうのではなく、有用なスタイルは活用しようっていう考え方のようです。

<ul>の部分を比較すると…「Twenty Thirteen」のstyle.cssには<ul>の余白を0にする、などの記述はありません。せっかくブラウザがリストを読みやすく表示してくれるのだからそのまま活用しようっていうことでしょうか。

そして、箇条書きのてんてんが無いほうがいい箇所に対して、こんな記述があります。

Twenty Thirteenのstyle.css

nav ul,
nav ol /*ナビゲーションメニューでは、*/{
	list-style: none;/*てんてん無し！*/
	list-style-image: none;
}

.widget ul,
.widget ol /*サイドバーウィジェット内のリストでは、*/{
	list-style-type: none;/*てんてん無し！*/
	margin: 0;
	padding: 0;
}

ここまでのまとめ（サンプルも）

CSSのリセットやノーマライズは自分にあった方法を取れば良いと思います。リセット、ノーマライズにもそれぞれ多くの書き方があるようですし。

ここでは「Twenty Thirteen」を参照して、以下の内容をstyle.cssに追記してみます。

  • style.cssのコード（追記部分）：
    • /*まずはノーマライズ*/
*
/*すべての要素に対して*/ {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;/*パディングとボーダーを幅と高さに含める ※*/
}

a:active,
a:hover/*リンクテキストにマウスをかざしたとき、押した時*/ {
	color: lightcoral;/*文字色*/
	outline: 0;
}

html {
	font-size: 100%;
	overflow-y: scroll;/*ボックスに入りきらない場合スクロールバー表示（IE）*/
	-webkit-text-size-adjust: 100%;/*iPhoneなどを横向きにしても文字拡大しない*/
	-ms-text-size-adjust: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;/*見出しでフロート解除*/
	/*なお、見出し要素の上下には適度な余白が入ります（ブラウザのデフォルトスタイル）
	いったんクリアしてからあとでカスタマイズしたければ、ここにmargin: 0;とか書くといいかも*/
}

small {
	font-size: smaller;
}

li {
	line-height: 1.8em;/*li要素の行間*/
}

nav ul,
nav ol {
	padding: 0;/*nav内のリスト（ナビゲーションメニューなど）の余白を0に*/
	margin: 0;/*nav内のリスト（ナビゲーションメニューなど）の余白を0に*/
}

img /*画像*/{
        max-width: 100%;/*スマートフォンなどでがはみ出さないように*/
	height: auto;/*スマートフォンなどで縦長にならないように*/
        -ms-interpolation-mode: bicubic;/*IE7,8できれいに*/
	border: 0;
	vertical-align: middle;
}

ins/*記事の追記などに使う要素*/{
	text-decoration: none;/*デフォルトだと下線がついたりするので、無しに*/
}

body{
	background-color:#e9e8e3;/*全体の背景色*/
	color:#3a3a3a;/*全体の文字色*/
	font-family:'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;/*フォント*/
	padding:0;/*内側の余白*/
	margin:0;/*外側の余白*/
	line-height:1.8em;/*行間*/
        word-wrap: break-word; /*単語の途中でも必要に応じて改行する*/
}

/*あとは個別にあれこれ*/
.site-header{
	padding: 1em;/*ヘッダー内側の余白*/
}

.site-title{
        margin: 0;/*ブログタイトル（h1）上下の余白を無しに*/
}

.share,
.related-bottom{
        padding: 0;/*シェアボタンと関連記事（下）の左側の余白を無しに*/
}

このCSSを、4つのHTMLファイルに適用させてみます。

すこしだけバランスが整ったかと思います（まだまだですが）。カスタマイズの一例でした。

ローカルでWordPressを使う環境を整える

Windowsでローカル環境を整えたときの記事を載せます。

XAMPPでWordPressローカル環境・PHPのテスト環境を整える手順とフォルダの場所についてのメモ | 10251
「Instant WordPress」で、ものすごく簡単にWordPressのローカル環境を構築しました！ | 10251

MacではMAMPを使いました。手順はそれほど違いありませんでした。（なお、本番環境でカスタマイズしても問題ない場合は、この手順は必要ありません。）

環境が整ったら、作成したファイルと画像をひとつのフォルダにまとめ、ローカルのwordpress→wp-content→themesフォルダの中に入れます。

wordpress-folder
wordpress-theme-folder-wp-content

WordPressテーマとして使うための準備

HTML、CSSのカスタマイズは、ある程度進めたらいったん終了するようにしています。細かな調整は、中身を実際の記事に置き換えてから（HTMLの一部をPHPコードに置き換える作業が終わってから）のほうがやりやすいように思うためです。

慣れている方なら、それなりに長い（実際の投稿に近い）テキストや画像を使用したほうが、完成形をイメージしやすくていいのかもしれませんが…。頭がごちゃごちゃしてしまうので、わたしはこんな手順でテーマづくりをしています。

ともあれこの後、作成したファイルをWordPressのテーマテンプレートとして使用するために少し準備をしておきます。

HTML

  • 4つのHTMLに書いたstyle.cssへのリンクを絶対パスに修正します。

    • この部分を、

    絶対パス（http://～）に修正します。フォルダの場所は環境によって異なるかと思いますので適宜書き換えてください。
  • 面倒でなければ、画像の部分も書き換えておくといいかもしれません。
    （でもすぐに消してPHPコードに置き換えてしまうので、ちょっとの間、画像の部分が表示されなくても良ければそのままで。）

    • 画像を使っている部分（たくさんありましたね…）を、

    このように修正します。

    ※2013.10.30：修正しました
  • 4つのHTMLファイルの拡張子を変更します。.htmlを.phpに書き換えてください。

    • wordpress-folder-php

CSS

  • style.cssの冒頭に、以下を追記します。
    • @charset "UTF-8";/*文字コード指定*/
/*
 Theme Name: テーマ名（必須です。お好きなテーマ名を。）
 Description: テーマの説明（任意）
 Theme URI: テーマのURI（任意）
 Author: テーマの作者名（任意）
 Version: テーマのバージョン（任意）
 License: テーマのライセンス（任意）
 License URI: テーマのライセンスのURI（任意）
*/

画像

  • screenshot.pngという名前の画像を、同じフォルダに入れておきます。ここではdummy.pngをコピーして使っています。

    • wordpress-folder-screenshot-png

ローカルのWordPressにログインし、ブラウザで表示させてみる

http://localhost/wordpress/wp-adminからログインし、ダッシュボードにアクセスします。

wordpress-local-dashboard

外観→テーマから、作成したテーマを有効化します。さきほど用意したscreenshot.pngはここに使用されるものです。この画像は横長なのでちょっとかっこ悪いですが…。

wordpress-general-theme

Webサイトを表示してみましょう。

http://localhost/wordpress/にアクセスします。ダッシュボード左上から「サイトを表示」させても良いです。

wordpress-site-index-php

無事にindex.phpが表示されました！

あたりまえですが、書いたHTMLがそのまま表示されています。でもほんとはここにWordPressで投稿した記事や、WordPressで設定したブログタイトルなどを表示させる必要がありますよね。そのための作業を、このあとのテーマ作成で進めていきます。

全部のまとめ（サンプルも）

今回やったことを最後にまとめます。とっても長くなってしまったので…。

※2013.10.30：一部追記しました

  • HTML：ベースとなるテンプレート（前回の）にクラスを追加するなどの修正をおこない、カスタマイズしやすくしました。
    WordPressテーマとして使うため、相対パスの部分を絶対パスに書き換え、ファイルの拡張子を.phpに修正しました。
  • CSS：修正したHTMLに合わせてかんたんにレイアウトしました。リセット（ノーマライズ）もおこないました。

    WordPressテーマとして使うため、冒頭に文字コードとテーマ名などを追記しました。
  • 画像：WordPressのダッシュボードで表示させるための、テーマのスクリーンショット用の画像を新たに用意しました。
  • WordPressをローカルで使う環境を整えました。
    HTML・CSS・画像ファイル一式をフォルダにまとめ、WordPressのテーマフォルダ内に入れました。
  • ローカルのWordPressにアクセスし、ダッシュボードと作成したindex.phpを表示させてみました。

ここまでの内容を反映させたファイルです（パスを書き換えてしまっているので、このリンクから開いてもCSSは効いていませんし、画像も表示されません）。

※2013.11.04：一部修正しました

このあとの流れ

次回以降の大まかな流れは以下のとおりです。

  • 全ページ共通の部分（ヘッダーやフッター、サイドバー）を別ファイルとして分割する
  • WordPress側の準備（タイトルを入れておいたり、記事やページをいくつか作成しておいたりする）
  • タイトルや記事、ページを表示させるため、HTMLの一部をPHPに書き換える
  • function.phpを作成する
  • CSSを微調整する
  • 本番環境にアップロードして、完成！

いよいよ本格的にWordPressテーマの作成にとりかかります！