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を以下のように書き換えます。
書き換えた箇所は「＜!– 書き換え –＞」とコメントアウトしていますので、参考にしてみてください。

<!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>

	<header>
		<div class="logo">
			<a href="index.html"><img src="img/logo.png" title="COJIN SAMPLE" alt="COJIN SAMPLE"/></a><!-- 書き換え -->
		</div><!-- end logo -->

		<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="footer clearfix">
			<ul class="social clearfix">
				<li><a href="#" class="fb" data-title="Facebook"></a></li>
				<li><a href="#" class="google" data-title="Google +"></a></li>
				<li><a href="#" class="behance" data-title="Behance"></a></li>
				<!--<li><a href="#" class="twitter" data-title="Twitter"></a></li>
				<li><a href="#" class="dribble" data-title="Dribble"></a></li>-->
				<li><a href="#" class="rss" data-title="RSS"></a></li>
			</ul><!-- end social -->

			<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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

<!DOCTYPE html>

<head>

<title>HTML+CSSページをWordPress用オリジナルテーマにする方法：COJIN SAMPLE</title>

</head>

<body>

</div>

<nav>

<ul>

<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>

<!--<li><a href="#" class="twitter" data-title="Twitter"></a></li>

</ul>

<p>Template by <a href="">Pixelhint.com</a></p>

</div>

</div >

</header>

<h1>これはサンプルです</h1>

</div>

</a>

</div>

<h1>これはサンプルです</h1>

</div>

</a>

</div>

<h1>これはサンプルです</h1>

</div>

</a>

</div>

<h1>これはサンプルです</h1>

</div>

</a>

</div>

<h1>これはサンプルです</h1>

</div>

</a>

</div>

<h1>これはサンプルです</h1>

</div>

</a>

</div>

<h1>これはサンプルです</h1>

</div>

</a>

</div>

<h1>これはサンプルです</h1>

</div>

</a>

</div>

<h1>これはサンプルです</h1>

</div>

</a>

</div>

<h1>これはサンプルです</h1>

</div>

</a>

</div>

<h1>これはサンプルです</h1>

</div>

</a>

</div>

<h1>これはサンプルです</h1>

</div>

</a>

</div>

</section>

</body>

</html>

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

続いて、CSSで見た目をデザインしていきましょう。
CSSのファイル名はstyle.cssというファイル名にします。
Magneticのcssフォルダに入っているmain.cssをstyle.cssという名前にリネームしましょう。
スタイルシートのファイル名については通常、規定はないですが、WordpressではメインとなるCSSファイルには、style.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%;
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

465

466

467

468

469

470

471

472

473

474

475

476

477

478

479

480

481

482

483

484

485

486

487

488

489

490

491

492

493

494

495

496

497

498

499

500

501

502

503

504

505

506

507

508

509

510

511

512

513

514

515

516

517

518

519

520

521

522

523

524

525

526

527

528

529

530

531

532

533

534

535

536

537

538

539

540

541

542

543

544

545

546

547

548

549

550

551

552

553

554

555

556

557

558

559

560

561

562

563

564

565

566

567

568

569

570

571

572

573

574

575

576

577

578

579

580

581

582

583

584

585

586

587

588

589

590

591

592

593

594

595

596

597

598

599

600

601

602

603

604

605

606

607

608

609

610

611

612

613

614

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%;

}

なお、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*/という部分については、今回の記事では利用しないので、省いて解説しています。）

/*書き換え*/
/*
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;
}

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;
}





/*  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%;
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

/*書き換え*/

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;

}

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;

}

/* 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%;

}

スタイルシートの準備は以上で完了です。

スクリーンショットを準備する

最後に、テーマのスクリーンショットを準備します。
絶対にオリジナルテーマの画像でなければならないということありません。
下記のように、「オリジナルテーマ」とタイトルを入力しておいてもいいでしょう。
サイズは300×225pxで大丈夫です。

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

index.php、style.css、screenshot.jpgを一つのフォルダに

新規フォルダを作成し、名前をオリジナルテーマ用に変更しましょう。
index.php、style.css、screenshot.jpgがフォルダに入っていることを確認して、フォルダ名にstyle.cssファイルに記入したTheme Name: の名前をつけます。
この記事では「co-jin-sample」というフォルダ名としておきました。

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

フォルダ名に深い意味はありませんが、オリジナルテンプレートと同じあるいは似た名前にしておくとわかりやすいでしょう。
以上でオリジナルテーマのスタート準備が整いました。
次は、作ったオリジナルテーマフォルダをWordpressにアップしましょう。

オリジナルテーマが入ったフォルダをWordPressにアップする

「co-jin-sample」フォルダをWordpress内にアップします。
ファイルをアップするには、FTPソフト（ファイルをサーバーにアップ／ダウンロードするためのソフト）が必要になります。
FTPソフトをお持ちでない場合は、インストールしましょう。
無料のFTPソフトであれば、「FFFTP 」や「FileZilla」が定番です（どちらもWin向け）。
私が個人的に愛用しているMac用コーディングソフト「Coda」にはFTP機能もついていますので、新しくソフトを入れる必要はありません。
レンタルサーバーの管理画面から操作できるFTPサービスも利用できますが、ファイルを一度に操作できないなど、非常に扱いにくいので、別途FTPソフトを利用しています。

FTPソフトからサーバーにアクセスする

FTPソフトがインストールできたら、FTPソフトを使ってサーバーにアクセスします。
アクセス方法はどのソフトでもだいたい一緒で、レンタルサーバーと契約したときに付与される情報を使ってアクセスします。
私が利用しているエックスサーバーの場合、サーバ申し込み後、「サーバアカウント設定完了のお知らせ」というメールが届いているはずです。
そのメール中にFTPアカウントの記載があります。

サービスコード：******
サーバーID：xsample
パスワード：********
サーバー：sv120 サーバー　※人によって変わります。
サイトのURL：https://xsample.xsrv.jp/
FTPホスト：xsample.xsrv.jp
Mailサーバー：xsample.xsrv.jp

初期FTPアカウント設定
FTPサーバー名（ホスト名）	設定完了メールに記載されている「FTPホスト」を入力してください。例） xsample.xsrv.jp
ユーザー名（アカウント名）	設定完了メールに記載されている「サーバーID」を入力してください。例） xsample
パスワード	設定完了メールに記載されている「パスワード」を入力してください。

FTPソフトを使ってファイルをアップする

無事にレンタルサーバーとアクセスできたでしょうか。
アクセスに成功したら、WordPressをインストールしたフォルダを開きます。
当記事では「エックスサーバー内のco-jin-sample.ml/public_html」フォルダにwordpressをインストールしましたので、このpublic_htmlフォルダを開きます。
開くと以下のような構成になっており、たくさんのファイルが並んでいるのがわかります。

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

このファイル群のうち、「wp-content」フォルダを開きます。

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

「wp-content」フォルダ内に、「themes」フォルダというものがあるのを確認します。
「themes」フォルダを開いてみましょう。
開くと、さらにまたいくつかのフォルダが入っています。

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

「twentythirteen」「twentyfourteen」「twentyfifteen」とありますが、これはWordPressにデフォルトで入っている無料のテーマです。
オリジナルテーマを作らないで、コンテンツを作成した場合、最新版のWordPressだと自動的に「twentyfifteen」というテーマを使って、コンテンツが表示されるようになります。
当記事の目的は、上記以外のオリジナルテーマでコンテンツを表示したいわけですから、「themes」フォルダのなかに、先ほどフォルダ名を書き換えた「co-jin-sample」をフォルダをアップロードします。

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

こうすることによって、WordPressの管理画面から「twentythirteen」「twentyfourteen」「twentyfifteen」以外のテーマを選択できるようになります。
試しにWordPressの管理画面を見てみましょう。
https://co-jin-sample.ml/wp-admin/から、WordPressにログインします。

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