2015/05/31

HTML+CSSページ（レスポンシブWEBデザイン）をWordPress用オリジナルテーマにする方法vol.1

HTML+CSSページとWordPressの違い

最初にHTML+CSSで作ったページと、WordPressで作ったページでは何が違うのかを見ていきたいと思います。

HTML+CSSは静的ページ

HTML+CSSで作ったページというのは静的ページと呼ばれます。
静的つまり動かないページを静的ページと呼びます。
なぜ静的かというと、ユーザーが何かアクションを起こしたとしても、ページを表示することしかできないからです。
ページ内容を変えたい場合は、制作する側がHTML+CSSの内容を更新する必要があります。
これとは反対に動的ページと呼ばれますものがあります。
文字通り動くページのことです。
たとえば、ユーザーがネットショップなどで買い物をするときに、商品を検索ワードに入れると、対象となる商品がズラリと並びますよね。
これは、ユーザーのアクション＝リクエストに対して適切と思われる情報をサイト側が判断した結果をWEBページとして表示しているわけです。
このように、ユーザーのアクションによって、表示されるページが変わるページを動的ページと呼びます。

WordPressは動的ページ

HTML+CSSページは静的ページでしたが、WordPressは動的ページです。
つまりユーザーのリクエストによって、見せるコンテンツ内容が変化します。
この動的ページを作成するには、HTML+CSSだけでは作成することができません。
ユーザーのリクエストに対して適切な判断を下すためには、ユーザーのリクエストにWEBサイトが答えられる体制を整えておく必要があるのです。
その1つがサーバー側での処理です。
WEBサイトはレンタルサーバーなどを借りて公開しますが、そのサーバーでユーザーからのリクエストを処理させるのです。

PHPというプログラミング言語を使ってサーバーに処理させる

ではどうやってサーバーに処理させるのでしょうか。
ここで登場するのがPHPというプログラミング言語です。
PHPはサーバーでの処理を指示できるプログラミング言語で、こうした言語のことをサーバーサイドスクリプトと呼びます。
このPHPを使ってサーバー側に処理させます。
お問い合わせの入力フォームを利用したことがある方も多いと思いますが、このお問い合わせフォームの多くはPHPによって作成されています。

WordPressはPHPでできている

WordPressも、このPHPで作られています。
PHPで作られているわけですから、WordPressで作られたサイトはユーザーのリクエストによって、サーバー側で処理が行われ、リクエストに対応したページがユーザーに表示されます。
WordPressで作成されたサイトは、更新が非常にラクです。
コンテンツ内容を作成すれば、サーバー側が勝手に処理して、ページを表示してくれるようになるからです。
しかも、WordPressで記事を書けば、新しいページがどんどん作成され、該当するカテゴリーでは、自動的に古い記事の上に表示されるようになります。
たったこれだけのことですが、これらの作業をHTML+CSSだけでやろうと思うと、すべてを手作業で行う必要があるのでかなり大変です（Dreamweaverのテンプレート機能を使う場合は例外）。
イヤになります。
作業量が増えるわけですから、ミスも必然的に増えてきます。
その点、WordPressでは必要な部分だけ準備してやれば、あとは自動でページができてしまうわけですから、作業量が少なく、ミスも少なくなり、より多くの時間をコンテンツ作成に集中できるようになります。
少し前置きが長くなってしまいました。
次からは早速、HTML+CSSページをWordPress用オリジナルテーマにする方法を見て行きたいと思います。

制作の流れはHTML+CSSページの作成 → WordPress用オリジナルテーマ化

WordPress用のオリジナルテーマを作成するといっても、制作の流れはほぼ同じです。
まずはHTML+CSSページをつくてっから、そのページをもとに、PHPを使ってWordPress用オリジナルテーマにしていきます。

最終的なゴール

この記事でWordPressのオリジナルテーマとするのは以下のようなHTML+CSSになります。

HTML+CSSページをWordPress用オリジナルテーマにする方法

COJIN SAMPLE

このサンプルは、MagneticというフリーのHTML5+CSS3テンプレートをもとに作成しています。
まずは、Magneticファイル一式をダウンロードしておいてください。

オリジナルテーマにしたいサイトをデザインする

実際の制作の流れに従って見ていきます。
まずは、オリジナルテーマにしたいサイトのデザインをしましょう。
ラフやワイヤーフレームを作成してからPhotoshopやSketchなどをのソフトを使って作成するのが一般的ですが、最近では、いきなりHTML+CSSを使って作成する手法も増えているようです。
やりやすい方法でつくってください。

HTMLでマークアップする

デザインが出来上がったら、HTMLでマークアップしていきましょう。
ファイル名はindex.htmlで作成します。
このindex.htmlを使って、後々オリジナルテーマにしていきます。
当記事では、Magneticのindex.htmlを利用しています。
そのindex.htmlを以下のように書き換えます。
書き換えた箇所は「＜!– 書き換え –＞」とコメントアウトしていますので、参考にしてみてください。

[html]
<!DOCTYPE html>
<html lang="ja"><!– 書き換え –>
<head>
<title>HTML+CSSページをWordPress用オリジナルテーマにする方法：COJIN SAMPLE</title> <!– 書き換え –>
<meta charset="utf-8">
<meta name="description" content="HTML+CSSページをWordPress用オリジナルテーマにする方法を解説しています。このページはそのためのサンプルです。デザインは、Magnetic（pixelhint.com）という無料のテーマをもとに作成しています。"/><!– 書き換え –>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>

<div id="menu_icon"></div>
<nav>
<ul>
<li><a href="index.html" class="selected">Home</a></li><!– 書き換え –>
<li><a href="#">Fashion</a></li><!– 書き換え –>
<li><a href="#">Advertisement</a></li><!– 書き換え –>
<li><a href="#">Landscape</a></li><!– 書き換え –>
<li><a href="#">Portraits</a></li><!– 書き換え –>
<li><a href="#">About</a></li><!– 書き換え –>
<li><a href="contact.html">Contact</a></li><!– 書き換え –>
</ul>
</nav><!– end navigation menu –>

<div class="rights">
<p>Copyright © 2015 co-jin.</p><!– 書き換え –>
<p>Template by <a href="">Pixelhint.com</a></p>
</div><!– end rights –>
</div ><!– end footer –>
</header><!– end header –>

<section class="main clearfix">
<div class="work">
<a href="inner.html">
<img src="img/work1.jpg" class="media" alt=""/>
<div class="caption">
<div class="work_title">
<h1>これはサンプルです</h1><!– 書き換え –>
</div>
</div>
</a>
</div>

<div class="work">
<a href="inner.html">
<img src="img/work2.jpg" class="media" alt=""/>
<div class="caption">
<div class="work_title">
<h1>これはサンプルです</h1><!– 書き換え –>
</div>
</div>
</a>
</div>

<div class="work">
<a href="inner.html">
<img src="img/work3.jpg" class="media" alt=""/>
<div class="caption">
<div class="work_title">
<h1>これはサンプルです</h1><!– 書き換え –>
</div>
</div>
</a>
</div>

<div class="work">
<a href="inner.html">
<img src="img/work5.jpg" class="media" alt=""/>
<div class="caption">
<div class="work_title">
<h1>これはサンプルです</h1><!– 書き換え –>
</div>
</div>
</a>
</div>

<div class="work">
<a href="inner.html">
<img src="img/work4.jpg" class="media" alt=""/>
<div class="caption">
<div class="work_title">
<h1>これはサンプルです</h1><!– 書き換え –>
</div>
</div>
</a>
</div>

<div class="work">
<a href="inner.html">
<img src="img/work6.jpg" class="media" alt=""/>
<div class="caption">
<div class="work_title">
<h1>これはサンプルです</h1><!– 書き換え –>
</div>
</div>
</a>
</div>

<div class="work">
<a href="inner.html">
<img src="img/work7.jpg" class="media" alt=""/>
<div class="caption">
<div class="work_title">
<h1>これはサンプルです</h1><!– 書き換え –>
</div>
</div>
</a>
</div>

<div class="work">
<a href="inner.html">
<img src="img/work8.jpg" class="media" alt=""/>
<div class="caption">
<div class="work_title">
<h1>これはサンプルです</h1><!– 書き換え –>
</div>
</div>
</a>
</div>

<div class="work">
<a href="inner.html">
<img src="img/work12.jpg" class="media" alt=""/>
<div class="caption">
<div class="work_title">
<h1>これはサンプルです</h1><!– 書き換え –>
</div>
</div>
</a>
</div>

<div class="work">
<a href="inner.html">
<img src="img/work11.jpg" class="media" alt=""/>
<div class="caption">
<div class="work_title">
<h1>これはサンプルです</h1><!– 書き換え –>
</div>
</div>
</a>
</div>

<div class="work">
<a href="inner.html">
<img src="img/work10.jpg" class="media" alt=""/>
<div class="caption">
<div class="work_title">
<h1>これはサンプルです</h1><!– 書き換え –>
</div>
</div>
</a>
</div>

<div class="work">
<a href="inner.html">
<img src="img/work9.jpg" class="media" alt=""/>
<div class="caption">
<div class="work_title">
<h1>これはサンプルです</h1><!– 書き換え –>
</div>
</div>
</a>
</div>

</section><!– end main –>

</body>
</html>
[/html]

CSSで見た目をデザインする

続いて、CSSで見た目をデザインしていきましょう。
CSSのファイル名はstyle.cssというファイル名にします。
Magneticのcssフォルダに入っているmain.cssをstyle.cssという名前にリネームしましょう。
スタイルシートのファイル名については通常、規定はないですが、WordpressではメインとなるCSSファイルには、style.cssという名前をつけておく習慣になっています。

[css]
/*

Template Author : pixelhint.com
Author Email : contact@pixelhint.com
Template Name : Magnetic

*****************************************

– Fonts
– General CSS
– Header
– Home/portfolio
– Inner page
– Map/Contact page
– Tooltip
– Responsive code

/* Fonts */
@font-face {
font-family: ‘raleway-regular’;
src: url(‘../fonts/raleway-regular.eot’);
src: url(‘../fonts/raleway-regular.eot?#iefix’) format(‘embedded-opentype’),
url(‘../fonts/raleway-regular.woff’) format(‘woff’),
url(‘../fonts/raleway-regular.ttf’) format(‘truetype’),
url(‘../fonts/raleway-regular.svg#ralewayregular’) format(‘svg’);
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: ‘raleway-bold’;
src: url(‘../fonts/raleway-bold.eot’);
src: url(‘../fonts/raleway-bold.eot?#iefix’) format(‘embedded-opentype’),
url(‘../fonts/raleway-bold.woff’) format(‘woff’),
url(‘../fonts/raleway-bold.ttf’) format(‘truetype’),
url(‘../fonts/raleway-bold.svg#ralewaybold’) format(‘svg’);
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: ‘raleway-semibold’;
src: url(‘../fonts/raleway-semibold.eot’);
src: url(‘../fonts/raleway-semibold.eot?#iefix’) format(‘embedded-opentype’),
url(‘../fonts/raleway-semibold.woff’) format(‘woff’),
url(‘../fonts/raleway-semibold.ttf’) format(‘truetype’),
url(‘../fonts/raleway-semibold.svg#ralewaysemibold’) format(‘svg’);
font-weight: normal;
font-style: normal;

}

/* General CSS*/
body{
background: #fff;
}

.wrapper{
width: 92.72727272727273%;
margin: 0 auto;
}

header ul.social li a,
.main .work a .caption,
header nav ul li a{
transition:all .1s linear;
-webkit-transition:all .1s linear;
-moz-transition:all .1s linear;
-o-transition:all .1s linear;
}

h1, h2, h3, h4, h5 ,h6{
color: #4b4848;
font-family: "raleway-regular", arial;
letter-spacing: 1px;
}

h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6 { font-weight: bolder }

.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}

.clearfix {
*zoom: 1;
}

/* Header */
@media (min-width:1100px){
header{
display: block;
position: fixed;
top: 0;
left: 0;
width: 250px;
min-height: 100%;
padding: 0 0 0 50px;
background: #ffffff;
float: left;
overflow: hidden;
z-index: 9999;
}

header .logo{
margin-top: 100px;
}

header nav ul{
display: block;
overflow: hidden;
margin-top: 100px;
list-style: none;
}

header nav ul li{
display: block;
margin-bottom: 30px;
}

header nav ul li a{
color: #454545;
font-family: "raleway-regular", arial;
font-size: 14px;
text-decoration: none;
letter-spacing: 1px;
}

header nav ul li a:hover,
header nav ul li a.selected{
color: #969595;
}

header .footer{
position: absolute;
bottom: 50px;
}

header ul.social{
list-style: none;
margin-bottom: 5px;
}

header ul.social li{
display: block;
float: left;
position: relative;
margin: 0 15px 15px 0;
}

header ul.social li a{
display: block;
width: 30px;
height: 30px;
background: url(‘../img/sm.png’) no-repeat;
background-position: 0 0;
}

header ul.social li a:hover{
background: url(‘../img/sm_hover.png’) no-repeat;
}

header ul.social li a.fb,
header ul.social li a.fb:hover{
background-position: 0 0;
}

header ul.social li a.google,
header ul.social li a.google:hover{
background-position: -31px 0;
}

header ul.social li a.behance,
header ul.social li a.behance:hover{
background-position: -62px 0;
}

header ul.social li a.twitter,
header ul.social li a.twitter:hover{
background-position: -93px 0;
}

header ul.social li a.dribble,
header ul.social li a.dribble:hover{
background-position: -124px 0;
}

header ul.social li a.rss,
header ul.social li a.rss:hover{
background-position: -155px 0;
}

header .rights p{
color: #454545;
font-family: "raleway-regular", arial;
font-size: 11px;
letter-spacing: 1px;
line-height: 18px;
}

header .rights a{
font-family: "raleway-bold", arial;
font-weight: bold;
text-decoration: none;
}
#menu_icon,
.close_menu{
display: none;
}

}

#menu_icon,
.close_menu{
float: right;
margin-right: 40px;
width: 40px;
height: 40px;
cursor: pointer;
background: url(‘../img/men_icons.png’) no-repeat;
}

#menu_icon{
background-position: 0 0;
}
.close_menu{
background-position: -41px 0!important;
}

/* Main */
.main{
width: 100%;
height: 100%;
padding-left: 300px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
z-index: 55;
background: #f6f6f6;
clear: both;
}

/* Home/portfolio */
.main .work{
display: block;
width: 33.33333333333333%;
height: auto;
float: left;
position: relative;
overflow: hidden;
}

.main .work .media{
width: 100%;
vertical-align: middle;
}

.main .work .caption{
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #ffffff;
opacity: 0;
}

.main .work a:hover .caption{
opacity: 1;
}

.work .caption .work_title{
display: block;
width: 100%;
position: absolute;
text-align: center;
top: 50%;
margin-top: -40px;
}

.main .work .caption h1{
position: relative;
display: inline-block;
max-width: 90%;
padding: 20px 0;
z-index: 77;
color: #454545;
font-family: "raleway-regular", arial;
font-size: 16px;
letter-spacing: .5px;
border-bottom: 1px solid #bfbbbb;
border-top: 1px solid #bfbbbb;
}

/* Inner Page */
.top{
width: 100%;
height: 350px;
overflow: hidden;
display: block;
position: relative;
background: url(‘../img/hero_image.jpg’) no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-position: 50% 50%;
}

.work_nav{
display: block;
width: 100%;
}

.work_nav .btn{
float: right;
}

.work_nav ul{
list-style: none;
}

.work_nav ul li{
display: block;
float: left;
margin: 0 0 1px 1px;
position: relative;
}

.work_nav a{
display: block;
width: 40px;
height: 40px;
background: url(‘../img/p_navigation.png’) no-repeat;
background-position: 0 0;
}

.work_nav a.previous{
background-position: 0 0;
}

.work_nav a.grid{
background-position: -41px 0;
}

.work_nav a.next{
background-position: -82px 0;
}

.top .title{
display: block;
width: 100%;color: #4b4848;
font-family: "raleway-bold", arial;
font-size: 26px;
font-weight: bold;
background: rgba(255, 255, 255, .7);
padding: 20px;
text-transform: uppercase;
line-height: 30px;
margin: 0!important;
overflow: hidden;

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

}

.content_header{
position: absolute;
bottom: 0;
margin: 0 auto;
left: 50%;
margin-left: -46.36363636363637%;
}

.content{
color: #4b4848;
font-family: "raleway-regular", arial;
font-size: 15px;
line-height: 22px;
padding: 60px 30px;
background: #fff;

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

.content p{
color: #4b4848;
font-family: "raleway-regular", arial;
font-size: 15px;
line-height: 24px;
margin-bottom: 60px;
}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6{
color: #4b4848;
font-family: "raleway-semibold", arial;
font-weight: bold;
line-height: 28px;
margin-bottom: 30px;

}

/* Contact page map */
#map .map_adresse{
font-family: ‘raleway-regular’, arial;
font-size: 14px;
line-height: 22px;
letter-spacing: 1px;
}

#map .map_address,
#map .map_tel{
padding: 5px;
}

#map .map_address .address,
#map .map_tel .tel{
font-family: ‘raleway-bold’, arial;
font-weight: bolder;
}

/* Tooltip */
.tooltip{
display: block;
padding: 7px 10px;
background: #454545;
color: #fff;
font-family: "raleway-regular", arial;
font-size: 12px;
position: absolute;
white-space: nowrap;
z-index: 999;
opacity: 0;
text-align: center;
letter-spacing: .5px;

}

.tooltip:after{
content: ”;
width: 0px;
height: 0px;
border-style: solid;
border-width: 3px 3px 0 3px;
border-color: #454545 transparent transparent transparent;
display: block;
text-align: center;
position: absolute;
bottom: -3px;
left: 50%;
margin-left: -3px;
}

/* Responsive code */
@media (max-width:1100px){

header{
display: block;
width: 100%;
min-height: 100px;
padding: 0;
position: relative;
}
header .logo{
margin: 40px 0 0 30px;
float: left;
}
header .footer{
display: none;
}
header #menu_icon,
header .close_menu{
float: right;
margin: 30px 30px 0 0;
}
header nav{
width: 100%;
position: absolute;
top: 100px;
left: 0;
z-index: 9999;
}

header nav ul{
list-style: none;
display: none;
position: relative;
}
header nav ul li a{
display: block;
width: 100%;
padding: 30px 0;
text-align: center;
color: #454545;
font-family: "raleway-regular", arial;
font-size: 14px;
text-decoration: none;
border-top: 1px solid #f7f5f5;
background: #fff;
}
header nav ul li a:active{
background: #f7f5f5;
}
#menu_icon,
.close_menu,
.show_menu{
display: block;
}
.show_menu{
display: block;
}

.main .work{
width: 50%;
}
.main{
width: 100%;
position: relative;
padding-left: 0;
}
#map{
margin: 0!important;
}
}

@media (max-width:550px){
.main .work{
width: 100%;
}
}
[/css]

なお、Magneticファイルのなかには、style.cssのほかに、reset.cssというファイルがあるかと思います。
すでにご存知の方もいらっしゃるかもしれませんが、よく知らないという方のために簡単に説明しておきます。

ブラウザ間のデフォルト設定の差異をなくしてくれる設定reset.css

ネットを利用するとき、さまざまなブラウザソフトを利用していると思います。
ブラウザソフトはHTMLとCSSで書かれた文書を読み込み、解析してWEBページを表示しています。
このブラウザソフトがWEBページを表示するとき、制作者がCSSで指定していない要素については、ブラウザ独自のルールに従ってWEBページを表示します。
例えば、h1要素で文書をマークアップした場合、ブラウザによって文字の大きさや太さが異なって表示されます。
これは制作者側からすると非常に都合が悪いですよね。
こちらの意図したデザインと、まったく異なるデザインでページが表示されるわけですから。
reset.cssは、そうした各ブラウザソフトによって異なる解釈を一度「リセット」して、制作者意図するスタイルを、各ブラウザに対して等しく反映させるためのスタイルなのです。
個人的には、とても利用しやすいスタイルで、制作の際にはつねに利用しています。

リセットは必ずしなければならないというわけではない

ただし、reset.cssを使って、必ずリセットしなければならないというものではありません。
最近ではブラウザのもつデフォルトのスタイルを活かしたほうが、処理も早くなるなどの理由で、normalize.cssといったスタイルも多くの人に支持されています。
配布されいてる有料・無料のテンプレートをみても、normalize.cssを使っているものをよく見かけます。
reset.cssとnormalize.css。
どちらを利用するかは、製作者の判断に任されており、自分にあったスタイルを使用するといいと思います。
しかし、使用する際には、クセを理解したうえで使用するようにしましょう。
でないと、CSSで新しいスタイルを追加するときに、意図したデザイン結果にならない場合があるので注意が必要です。
この点でいえれば、すべてを「リセット」してくれるreset.cssのほうが、個人的には便利に感じています。

WordPress用オリジナルテーマを動かすために必要なもの

HTML+CSSで作成したページをWordPress用のオリジナルテーマに書き換えていく作業に入る前に、WordPressを動かすための準備を整えます。
WordPressを動かすためには、PHPに対応したサーバーが必要になります。
ローカル環境で作成する方法もありますが、こちらの記事ではレンタルサーバーを利用して作成することをオススメします。
レンタルサーバーを利用したほうが、ローカル環境で作成してから本番環境＝レンタルサーバーで公開するよりも手間がかかりません。
というのも、ローカルと本番環境が完全に同じ条件の環境なら問題ないのですが、まったく同じにならない場合がよくあります。
ローカルではうまくいっていたのに、本番環境で公開した途端、表示がおかしい……、なんてことはよくあります。
個人で進める場合には誰に迷惑がかかるわけでもないので、いきなり本番環境で作成してみて、不測の事態に遭遇したとしても、きちんと対処できるようにしたほうがずっと効率的だし、レベルアップにもつながると思います。

レンタルサーバーはWordPressを自動でインストールできるものを選ぼう

レンタルサーバーを選ぶ基準としては、練習するだけなら格安サイトで十分でしょう。
ただし、格安サイトでもWordPressに対応したサーバーを選んでください。
なかでも便利なのが、WordPressのシステムを自動でインストールできるサーバーがオススメです。
WordPressはオリジナルテーマを動かくすためのシステムのようなファイル群があります。
これらをレンタルサーバーにインストールした上で、そのなかにオリジナルテーマを入れて、公開・運用していくという流れになります。
そこで、WordPressのインストールが必要になるわけですが、手動でできるものの、初心者には少々面倒で、時間もかかります。
そんなものに時間を取られるよりも、デザイン的な部分やコンテツ部分に時間をかけるほうがはるかに効率的です。

設置できるデータベースの上限数も考慮に入れて

WordPressはPHPで動くわけですが、MySQLというデータベースとも連動して動作しています。
このデータベースにコンテンツがストックされており、ユーザーからのリクエストによって最適なコンテンツが取り出されて、サイトに表示されます。
そのデータベースに利用されているMySQLは、レンタルサーバーの契約内容によって、上限設置数が決まっています。
基本的に、WordPressは1つのサイトに対して1つのMySQLが必要になりますから、自分が設置したいと思うサイト数とデータベースの上限数が見合っているかを考えておく必要があります。

将来的な目標も考えてレンタルサーバーを選ぶ

WordPressを自動イントールできるレンタルサーバーを選ぶということのほかに、もう一つ重要な基準があります。
作成したサイトを将来的にどうしたいのかということです。
ただの練習だけなら、特に問題はないのですが、将来、多くのアクセス集める人気サイトに育てたいという場合には話が変わってきます。
レンタルサーバーのプランには転送容量と呼ばれる条件があります。
ユーザーがサイトを見るためには、画像や動画、HTML、CSSファイルなどのサイトを構成するページデータを訪問者のパソコンに「転送」する必要があります。
この転送されるデータ量のことを「転送容量」と呼びます。
格安レンタルサーバーの場合、この転送容量が非常に低いものがあります。
1日1GBとか、月間30GBとか。
こう聞くと、とても多いように思いますが、記事がバズっていきなり多くのアクセスを集めた場合、転送容量をオーバーしてしまうと、ページがスムーズに表示されないか、最悪の場合、まったく見られない状態になります。
私自身も同じ経験をしました。
格安のレンタルサーバーを借りて、練習がてらサイトを作成したところ、ひょんなことから順調にPV数を稼げるようになりました。
まさに嬉しい誤算！
それなのに！！ページがスムーズに表示されないどころか、まったく表示されないという自体に遭遇するようになったのです。
ユーザーにとっても迷惑をかけるし、私自身も非常に悔しい思いをしました。
そうした経験を踏まえ、現在では、転送容量に余裕があるエックスサーバーを利用しています。
当ブログももちろんエックスサーバーです。
動作が安定かつ高速であるため、以前の格安レンタルサーバーに比べ、とても快適です。

そのほか、高いPHP処理能力やサーバーの安定感が抜群なので、快適な閲覧環境を提供できます。
データのバックアップ、セキュリティ対策、サポート体制も充実しているので、格安なレンタルサーバーを利用して「遅いなあ」「よく落ちるなあ」といった不満をお持ちの方には、特におすすめしたい優良レンタルサーバーです。
取引先のお客様にも多数ご利用いただいています。

それでも格安を選びたいなら、エックスサーバー系列のミニーバードがおすすめです。
ミニバードはネットオウルという会社が運営しているのですが、2013年にエックスサーバーのグループ会社となりました。
信頼感のあるエックスサーバー傘下だけあって、安定感があり、サーバーの応答性もいいようです。
ミニバード独特の支払い方法が扱いづらいという点を除けば、使いやすいサーバーといえるでしょう。

レンタルサーバーにWordPressをインストールする

レンタルサーバー選びが終わったら、早速WordPressをインストールしましょう。
私がエックスサーバーを利用している関係で、エックサーバーを使って解説したいと思います。

ドメイン設定を行う

まずは、WordPressをインストールするためのドメインを設定しましょう。
ドメインはレンタルサーバー契約後に自動的に付与される初期ドメインか、お名前.comをはじめとするドメイン業者を利用して取得したドメインを利用します。
co-jin.netの場合は、お名前.comを使って取得しましたが、今回は別のドメインで設定を行います（詳しい内容は「無料のドメインを取得してレンタルサーバーに設定する方法」をご覧ください）。
「サーバーパネル」のトップページから、「ドメイン設定」をクリックします。

HTML+CSSページをWordPress用オリジナルテーマにする方法

「ドメイン設定」画面の「ドメイン追加設定」タブをクリックします。

HTML+CSSページをWordPress用オリジナルテーマにする方法

ドメインを入力して、トップレベルドメイン（.com）などをプルダウンメニューから選択します。
入力できたら「ドメインの追加（確認）」をクリックします。

HTML+CSSページをWordPress用オリジナルテーマにする方法

内容の確認画面に移るので、問題なければ再度「ドメインの追加（確認）」をクリックします。

HTML+CSSページをWordPress用オリジナルテーマにする方法

登録内容が表示されます。

HTML+CSSページをWordPress用オリジナルテーマにする方法

サーバー内のフォルダ構成をみると、すでに登録したドメインのフォルダが形成されています。
あとは、ネット上で登録したドメインが正式に反映されているかどうかになります。
問題なければ、数十分〜数時間のうちにサーバー側でのドメイン登録が完了します。
試しに、ブラウザソフトを開いて、登録したドメインを入力してみてください。

「自動インストール」を利用してWordPressを簡単にインストールする

WordPressは通常、一式をローカルにダウンロードしてから、PHPとMySQLが使える環境のレンタルサーバーにアップロードして利用しなければなりません。
WordPress公式サイトから、WordPressの最新バージョンをダウンロードして、手動でサーバーにアップロードしてインストールするという流れです。
しかし、設定が面倒なので、レンタルサーバーで準備されている「自動インストール」などの無料ツールを利用するのがオススメです。
エックスサーバーにも「自動インストール」ツールがありますので、早速利用しましょう。
まずは、「サーバーパネル」にログインします。

HTML+CSSページをWordPress用オリジナルテーマにする方法

続いて、「ドメイン選択画面」から対象となるドメインを選びます。
すでに設定したドメインの「選択する」をクリック。

HTML+CSSページをWordPress用オリジナルテーマにする方法

「自動インストール」をクリックします。

HTML+CSSページをWordPress用オリジナルテーマにする方法

自動インストールの画面に移るので、「プログラムのインストール」というタブをクリックします。

HTML+CSSページをWordPress用オリジナルテーマにする方法

自動インストールできるCMSの一覧が表示されるので、その中から「WordPress 日本語版」の「インストール設定」をクリックします。

HTML+CSSページをWordPress用オリジナルテーマにする方法

すると、以下のような画面に切り替わるので、内容を記入していきます。

HTML+CSSページをWordPress用オリジナルテーマにする方法

インストールのURL

エックスサーバーの場合、サイトのファイルの置き場所が決まっています。
ドメイン直下にあるpublic-htmlというフォルダです。
WordPressもこのpublic-htmlにインストールする必要があります。
しかし、インストールURLのディレクトリには何も記入しません。
記入しなくても、自動でpublic-htmlにインストールされます。

ブログ名

ご自身のブログ名を記入します。
あとからでも変更できますが、最初から決めておくとラクです。

ユーザー名

ご自身の設定するユーザー名を入れます。
何も入れないと、すぐに見破られるユーザー名が設定されるので、絶対に変更するようにしましょう。
忘れないようにメモもしておきます。

パスワード

容易に推測されやすいパスワードはやめましょう。
パスワードもメモしておきます。

メールアドレス

WordPressを運用しているとWordPressからメールが届きます。
主にアップグレードに関するメールですが、確認しやすいメールアドレスを設定しておきます。

データベース

新規でサイトを作るので、「自動でデータベースを生成する」にチェックを入れます。
以上の入力が完了したら「インストール（確認）」ボタンをクリックします。
確認画面が表示されますので、内容に間違いがなければ、再度、「インストール（確認）」ボタンをクリックします。

WordPress用のユーザー名やパスワードのほか、データベース名やデータベース用のユーザー名・パスワードも表示されますので、データベースのバックアップを取る場合などに必要になりますので、しっかり控えておきます。

実際にWordPressの管理画面に入ってみる

自動インストールが完了した画面で、リンクが貼られたURLがありました。
これがWordPressの管理画面に入るためのURLになります。
控えておかなくても、
「設定ドメイン/wp-admin/」
と入力すれば、管理画面の入り口が開きますよ。
このように、WordPressは簡単に管理画面が推測できます。
ユーザー名やパスワードは慎重に設定しましょう。
それはさておき、URLにアクセスして、以下の画面が開けば、WordPressのインストールが完了ということになります。

HTML+CSSページをWordPress用オリジナルテーマにする方法

試しに、先ほど設定したユーザー名とパスワード入力しましょう。
無事にログインできたでしょうか。
ログインできると、下のような画面が開きます。

HTML+CSSページをWordPress用オリジナルテーマにする方法

お疲れ様でした。
オリジナルテーマを使用しない場合、このままWordPressの管理画面を使って、コンテンツを入力・作成できるようになります。

コンテンツ作成の仕方については、「WordPress記事作成マニュアル：クライアント向けをInDesignで作成しました（無料です。ご自由にどうぞ）」をご覧ください。

WordPress用オリジナルテーマをつくるために必要なもの

オリジナルテーマをつくるにあたって、いくつか必要なものがあります。
といっても、すでにコーティングが終了したHTMLとCSSファイうがあれば、ほぼ揃っているようなものです。
必要なものは以下のとおりです。

index.php
style.css
screenshot.png

先ほどダウンロードして書き変えたMagneticのindex.htmlとstyle.cssファイルを書き換えていきます。

index.phpを作成する

いきなりPHPという拡張子が出てきて驚かれる方もいらっしゃるでしょう。
ご心配なく。
index.htmlの拡張子を、index.phpに書き換えるだけOKです。
これだけで、サーバー側で動作するPHPのプログラムファイル名に変身しました。
（中身はHTMLなので、サーバー側で動くことはありませんが……。）

style.cssの内容を書き換える

スタイルシートは少しだけ手を加えます。
style.cssを開いて、以下のようにテーマの設定をCSSの1行目に記述します。
Theme Name: となっているところが、オリジナルテーマの名前になります。
わかりやすい名前でもいいですし、こだわりのある名前でも、何でも構いません。
また、CSSファイルの中身も少しだけ書き変えておきます。
フォントファイルや画像ファイルのパスのところで、「../fonts/raleway-regular.eot」「../img/sm.png」と「../」となっていますが、オリジナルテンプレート化する際に、ディレクトリが変わるので、この部分を削除しておきます。
書き変えた部分については「/*書き換え*/」とコメントアウトしていますので、参考にしてみてください。
注意：/*Inner page*/ と/*Map/Contact page*/という部分については、今回の記事では利用しないので、省いて解説しています。）

[css]
/*書き換え*/
/*
Theme Name: Magnetic+co-jin-sample-wp
Description: オリジナルテーマ
Author: Magnetic　contact@pixelhint.com
*/

/* Fonts */
@font-face {
font-family: ‘raleway-regular’;
src: url(‘fonts/raleway-regular.eot’);/*書き換え*/
src: url(‘fonts/raleway-regular.eot?#iefix’) format(‘embedded-opentype’),/*書き換え*/
url(‘fonts/raleway-regular.woff’) format(‘woff’),/*書き換え*/
url(‘fonts/raleway-regular.ttf’) format(‘truetype’),/*書き換え*/
url(‘fonts/raleway-regular.svg#ralewayregular’) /*書き換え*/format(‘svg’);
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: ‘raleway-bold’;
src: url(‘fonts/raleway-bold.eot’);/*書き換え*/
src: url(‘fonts/raleway-bold.eot?#iefix’) format(‘embedded-opentype’),/*書き換え*/
url(‘fonts/raleway-bold.woff’) format(‘woff’),/*書き換え*/
url(‘fonts/raleway-bold.ttf’) format(‘truetype’),/*書き換え*/
url(‘fonts/raleway-bold.svg#ralewaybold’) format(‘svg’);
font-weight: normal;/*書き換え*/
font-style: normal;

}

@font-face {
font-family: ‘raleway-semibold’;
src: url(‘fonts/raleway-semibold.eot’);/*書き換え*/
src: url(‘fonts/raleway-semibold.eot?#iefix’) format(‘embedded-opentype’),/*書き換え*/
url(‘fonts/raleway-semibold.woff’) format(‘woff’),/*書き換え*/
url(‘fonts/raleway-semibold.ttf’) format(‘truetype’),/*書き換え*/
url(‘fonts/raleway-semibold.svg#ralewaysemibold’) format(‘svg’);/*書き換え*/
font-weight: normal;
font-style: normal;

}

/* General CSS*/
body{
background: #fff;
}

.wrapper{
width: 92.72727272727273%;
margin: 0 auto;
}

header ul.social li a,
.main .work a .caption,
header nav ul li a{
transition:all .1s linear;
-webkit-transition:all .1s linear;
-moz-transition:all .1s linear;
-o-transition:all .1s linear;
}

h1, h2, h3, h4, h5 ,h6{
color: #4b4848;
font-family: "raleway-regular", arial;
letter-spacing: 1px;
}

.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}

.clearfix {
*zoom: 1;
}

header .logo{
margin-top: 100px;
}

header nav ul{
display: block;
overflow: hidden;
margin-top: 100px;
list-style: none;
}

header nav ul li{
display: block;
margin-bottom: 30px;
}

header nav ul li a{
color: #454545;
font-family: "raleway-regular", arial;
font-size: 14px;
text-decoration: none;
letter-spacing: 1px;
}

header nav ul li a:hover,
header nav ul li a.selected{
color: #969595;
}

header .footer{
position: absolute;
bottom: 50px;
}

header ul.social{
list-style: none;
margin-bottom: 5px;
}

header ul.social li{
display: block;
float: left;
position: relative;
margin: 0 15px 15px 0;
}

header ul.social li a{
display: block;
width: 30px;
height: 30px;
background: url(‘img/sm.png’) no-repeat;/*書き換え*/
background-position: 0 0;
}

header ul.social li a:hover{
background: url(‘img/sm_hover.png’) no-repeat;/*書き換え*/
}