暮らしのハンドノート

2018年6月19日2018年6月19日

無料のHTML・CSSテンプレートをWordPress化する方法No.4(必須ダグとループ処理)

OS:windws10 64bit
ブラウザ:Google Chrome Windows 版（10/8.1/8/7 64-bit）
MAMP:4.0.1
Atom:1.27.2

WordPress必須タグを挿入する

wordpressのテンプレートを作成するときに必ず入れないといけないとされている必須のタグが3つあります。

タグ	用途
<?php body_class(); ?>	<body>タグの中に入れる
<?php wp_head(); ?>	<head></head>タグの中に入れる
<?php wp_footer(); ?>	フッター内であればどこでもOK

header.phpの<body>タグを編集する

bodyタグを入れればクラス属性として吐き出されますので、

特定のテンプレートやページだけにスタイルを適応することができます。

body_classは、他にもページの情報を確認したい時にも役に立つタグです。

bodyタグはhtmlが記述してある<body>タグ中に挿入するタグです。

それでは実際にタグを挿入しましょう

15行目の<body>タグの中に　<?php body_class(); ?>　を挿入します。

before <body>

After <body <?php body_class(); ?> >

※このページにだけCSSを適応させたい時は、

例・・・　.home(セレクタ名){(このペーシだけのルール)}

上記のような感じでCSSを反映させることができます。

header.phpの</head>タグを編集する

<head>と<footer>はwordpressのコアやプラグインと密接な関係があり、

ある特定のcssファイルやjsファイルを読み込むのに使ったり、何かの動作をするのタイミングとして使われたり、メタタグを吐き出すのに使われていますので<head><footer>がなければwordpressはうまく動作されないといわれてます。

それでは、14行目の</head>の直前に　<?php wp_head(); ?>　を挿入しましょう

挿入後は以下の画像のようになります。

footer.phpのどこかにタグを挿入する

次に　<?php wp_footer(); ?>　を以下のように<body>～</body>の間に入れて保存してみましょう。

すると以下のようにwordpressの管理バーがでてきて、wordpressらしくなりましたね。

ループ処理

wordpressの記事の全てはデータベースに保存されていて、テンプレート内ではデーターベースから読み込まれた記事を展開してから出力します。

その際データベースから記事を取得するのがループ処理です。

page/php index.phpなどほとんどのテンプレートに必要です。

以下のコードはwordpressの基本となるループのコードで

WordPress Codex 日本語版にあります。

<?php
         if(have_posts()){
                 while(have_posts()){
                       the_post();
?>
//ここにhtmlの記事が書いてあります
//
<?php
                }//end while
         }//end if
?>

<?php

if(have_posts()){

while(have_posts()){

the_post();

//ここにhtmlの記事が書いてあります

<?php

}//end while

}//end if

index.phpにループを記述する

それでは、index.phpにループ処理を記述をしましょう。

Atomを開いてindex.phpを開きましょう!

まずindex.php内のhtmlを探します。

htmlの上に

<?php
         if(have_posts()){
                 while(have_posts()){
                       the_post();
?>

<?php

if(have_posts()){

while(have_posts()){

the_post();

htmlの下に

<?php
                }//end while
         }//end if
?>

<?php

}//end while

}//end if

を挿入します。

挿入後のサンプルは以下の通りです。

次にhtmlタグをテンプレートタグに置き換えていきます。

テンプレートタグのコードはこちらを参考にしてください。

まず<h2>製作者より</h2>のところはタイトルになりますので以下のように書き換えます。

<h2><?php the_title(); ?></h2>

次に11行目の<h3>から19行目の</p>タグまでは記事の中のマークアップになりますので全て削除しwordpress本文を吐き出すテンプレートタグに書き換えます。

タグは以下のタグです。

<?php the_content(); ?>

それでは、保存してリロードして見てみましょう!!

以下の画像のように新着情報・サービス・アクセスなどをクリックしたときに始めの段階で、ダミーの内容で記入した文字が出力されていればOKです。

次回は、ウィジェットとカスタムメニューに対応させていきたいと思います。

役に立ったら共有してね

2018年6月18日2018年6月18日

無料のHTML・CSSテンプレートをWordPress化する方法No.3(パスの書き換え)

OS:windws10 64bit
ブラウザ:Google Chrome Windows 版（10/8.1/8/7 64-bit）
MAMP:4.0.1
Atom:1.27.2

パスの書き換え

サイト内リンクの書き換え

/insex.htmlのようになっているのを

http;//〇〇.com/about/

のようなフルパスに記述し直す必要があります。赤文字の部分を吐き出すために以下のようなwordpressのコマンドを使います。

<?php bloginfo(‘url’); ?>

※ドメインルートに展開している場合など書き直し不要な場合があります。

header.phpにタグを挿入する

Atomでheader.phpを開きます。

19行目にある<a href=”index.html“>はサイト内リンクですので、index.htmlの文字を削除して<?php echo home_url(); ?>を挿入します。

<a href=”<?php echo home_url(); ?>”>　になります。

次に26行目の

<a href=”index.html“><img src=”<?php echo get_template_directory_uri();?>/images/btn_access.gif” alt=”お問い合わせ” class=”rollover” /></a>

はまず、index.htmlを削除し<?php echo home_url(); ?>/contact/

を挿入してください。固定ペーシのパーマリンクで設定したスラッグが入ります。

33行目の<a href=”index.html“>ホーム</a>

はindex.htmlを削除して<?php echo home_url(); ?>を挿入します

34行目の<a href=”sample.html“>新着情報</a>は

お問い合わせのときと同じように、スラッグが入りますので

となります。

35行目の<a href=”index.html“>サービス・設備</a>

のスラッグはservise-facilityで設定してますので

<a href=”<?php echo home_url(); ?>/servise-facility/”>サービス・設備</a>

となります。

36行目の<a href=”index.html“>客室・料金</a>

のスラッグはroom-priceで設定していますので

<a href=”<?php echo home_url(); ?>/room-price/”>客室・料金</a>

となります。

37行目の<a href=”index.html“>料理</a>

のスラッグはfoodで設定していますので

となります。

38行目の<a href=”index.html“>アクセス</a>

のスラッグはaccessで設定していますので

<a href=”<?php echo home_url(); ?>/access/>アクセス</a>

となります。

最終的には以下の画像のようになります。

index.phpにタグを挿入する

前回同様、以下のindex.htmlを削除し　<?php echo home_url();?>　を挿入します。

4行目<a href=”index.html“>HOME</a>　は

<a href=”<?php echo home_url(); ?>”>HOME</a>　となります。

13行目<a href=”index.html“>» インデックスページに戻る</a>　は

<a href=”<?php echo home_url(); ?>”>» インデックスページに戻る</a>　となります。

sidebar.phpにタグを挿入する

今度は、sidebar.phpの書き換えをしていきます。

書き替えをするのはaタグ内のindex.htmlを削除し以下のコードにスラッグを付与して書き換えましょう。

<?php echo home_url(); ?>/スラッグ/

以下の画像は書き換え前の画像です。

今回書き換えるのは以下のコードです。

5行目　<a href=”index.html“>インターネット</a>　スラッグは　internet
6行目　<a href=”index.html“>温泉</a>　　　　　　スラッグは　hot-spring
7行目　<a href=”index.html“>ラウンジ</a>　　　　スラッグは　lounge
13行目　<a href=”index.html“>マッサージ</a>　　スラッグは massage
14行目　<a href=”index.html“>エステ</a> スラッグは　 beauty

書き替え後のサンプルは以下の画像のようになります。

次回はwordpressで必須なダグとループ処理について解説します。

役に立ったら共有してね

2018年6月17日2018年6月17日

無料のHTML・CSSテンプレートをWordPress化する方法No.2(パーツ化・インクルード)

OS:windws10 64bit
ブラウザ:Google Chrome Windows 版（10/8.1/8/7 64-bit）
MAMP:4.0.1
Atom:1.27.2

今回は、wordpressとして機能するためにパーツ化してインクルードしていきます。

TOPページの作成

top.phpをwordpressから認識してもらえるように固定ページを作り、カスタムテンプレートを関連付けます。

Atomでフォルダを開く時は前回MAMPとAtomで作成した時のフォルダで

D\MAMP\htdocs\wordprss\wp-content\themes\mythemeになります。

Cドライブに作成した方はドライブをCに変更してください。

MAMPを起動してAtomを開きtop.phpを編集状態にします。

次に一行目から以下のように入力して保存します。

保存する時は、ショートカットキーの　ctrl＋S　が便利です。

<?php 
/*
Template Name: TOPページ用テンプレート
*/
?>

<?php

Template Name: TOPページ用テンプレート

次にアドレスバーに　localhost/wordpress/wp-admin　と入力すると

wordpressのログイン画面に移りますので

ユーザー名とパスワードを入力しログインします。

固定ページの作成と表示設定

Topページ用テンプレートを選択して固定ページを作成する

次にダッシュボードの　固定ページ→新規追加をクリックし以下のように固定ページの属性でテンプレートが選択できるようになっていればOKです。

固定ページのタイトルにトップページと入力しパーマリンクをtopにして公開します。

次にworpress管理画面の設定→表示設定を以下のように設定して保存します。

ホームページの表示:固定ページ

ホームページ:トップページ

にして変更をクリックします。

次に以下の固定ページの作成をします。

記事の内容はとりあえずダミーでOKですので表示されたときに分かりやすいように入力しておきましょう!

ページ名	スラッグ
新着情報	news
サービス・設備	servise-facility
客室・料金	room-price
料理	food
アクセス	access
会社情報	company
採用情報	recruit
お問い合わせ	contact
プライバシー・ポリシー	privacy-policy

※スラッグとは「ページ名（URL）」の最後の部分を好きな文字列に指定できる機能のことです。

最終的にこんな感じになります。

デフォルトのテンプレートを選択して固定ページを作成する

次にサイドバーエリアの固定ページの作成します。

サイドバーに表示するテンプレートは、デフォルトを選択して以下のように作成します。

ページ名	スラッグ
インターネット	internet
温泉	servise-facility
ラウンジ	lounge
マッサージ	massage
エステ	beauty

トップページを各phpにパーツ化する

次にtopページをヘッダー・サイドバー・フッターに分けますので、atomのmytheme内に以下のファイルを作成します。

・header.php

・footer.php

・sidebar.php

atomのmythemeで右クリック→新規ファイルの順にクリックすると以下のように入力できますので、上記3つのファイルを作ります。

ヘッダーをパーツ化する

次にAtomでtop.phpとheader.phpを開きます

以下のように左右に表示させます。

ヘッダー部分をパーツ化するので、top.phpの中からヘッダーの部分を切り出しheader.phpの中に移動させます。

移動させるのはtop.php

6行目の

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

から

45行目の<!– /menu –>迄です。

次にtop.phpからヘッダー部分を取り除いたのでヘッダー部分を読み込むのに以下のコードを切り取った部分に記述して ctrl＋s キーで保存します。

<?php get_header(); ?>

1	<?php get_header(); ?>

記述した後は以下の画像のようにコードを記述することにより

top.phpに記述したheaderをheader.phpから呼び込めるようになります。

フッターをパーツ化する

次は、top.phpからfooter.phpに移動しますので

左はtop.phpを開いたままで、右はfooter.phpを右側に開きます。

移動するのは、

132行目の<div id=”footer”>

から最後までです。

検索するときのショートカットキーは　ctrl＋F　です。

次にtop.phpからフッター部分を取り除いたのでフッター部分を読み込むのに以下のコードを切り取った部分(最終行)に記述して ctrl＋s キーで保存します。

<?php get_footer(); ?>

1	<?php get_footer(); ?>

サイドバーをパーツ化する

次は、top.phpからsidebar.phpに移動しますので

左はtop.phpを開いたままで、右はsidebar.phpを右側に開きます。

移動するのは、

111行目の<div id=”footer”>

から

127行目の</div>までです。

次にtop.phpからサイドバー部分を取り除いたのでサイドバー部分を読み込むのに以下のコードを切り取った部分に記述して ctrl＋s キーで保存します。

<?php get_sidebar(); ?>

1	<?php get_sidebar(); ?>

index.php内のタグをインクルードタグに変更する

次は、index.phpのファイルの中身をインクルードタグに変更してきます。

前回同様index.phpのヘッダー・フッター・サイドバー部分をwordpress用のコードに変更します。

ヘッダーをインクルードタグに変更する

Atomでindex.phpを開きます。

前回同様ヘッダーに当たる部分を今回は削除します。

削除するのは

1行目の

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

から

40行目の<!– /menu –>迄です。

次に以下のコードを切り取った場所(1行目)に以下のコードを記述して保存します。

<?php get_header(); ?>

1	<?php get_header(); ?>

フッターをインクルードタグに変更する

次はフッターに当たる部分を削除します。

削除するのは、

37行目の<div id=”footer”>

から最後までです。

次に削除した場所に以下のコードを記述して保存します。

<?php get_footer(); ?>

1	<?php get_footer(); ?>

サイドバーをインクルードタグに変更する

次はサイドバーに当たる部分を削除します。

削除するのは、

16行目の<div id=”sub”>

から

32行目の<div id=”sub”>

までです。

次に削除した場所に以下のコードを記述して保存します。

<?php get_sidebar(); ?>

1	<?php get_sidebar(); ?>

次回は、パスの書き換えをします。

役に立ったら共有してね

2018年6月15日2018年6月15日

無料のHTML・CSSテンプレートをWordPress化する方法No.1

WordPressにテーマを認識させる素材ををダウンロードする

まず、商用OKの無料のフォルダをダウンロードして解凍しておきます。

商用OKですが、一部を抜粋すると、

アダルトサイト
法律に反するサイト
モラルに反するサイト

などのサイトにはご利用できません。必ず、利用規約も必ず読んでくださいね。

今回ダロンロードするのは、No.14です。

今回カスタマイズするのに使用するデザインのサイト名とURLは下記のとおりです。

サイト名：CoolWebWindow
URL：http://www.coolwebwindow.com

現在WordPress&サーバーをお持ちでない方は、無料で使用できるMANPをインストールして編集に使ってみましょう。

MAMPをWindws10にイントールしてサーバーにアクセスする方法

テキストエディタには、Atomを使用します。

Atomの公式ページからダウンロードして、必要であれば、日本語化したりして使ってみましょう。

まず、ダウンロードしたpub014のフォルダを解凍します。

それでは、まず、WordPressが認識できるかどうか試しにサーバーにupロードしましょう。

・Xサーバーのファイルマネージャーからログインして【ドメイン名】→【public_html】→【wp-content】→【themes】の順にアクセスします。

・MAMPの方は、【MAMP】→【htdocs】→【wordpress】→【wp-content】→【themes】の順にアクセスします。

以下の説明以降UPロードと記載した時、MAMPの方は上記の手順でフォルダやファイル移動したり作成したりしてください。

ファイルの作成などはATOMを使うと便利です。

Atomを開いて【ファイル】→【フォルダを開く】→【MAMPをインストールしたドライブ】→【MAMP】→【htdocs】→【wordpress】→【wp-content】→【themes】の順です。

以下の画像は、フォルダを作成した後の画像ですが手順としては

①任意のテーマを入力します。私はmythemeとしました。

②フォルダ作成をクリックします。

すると以下の画像のようにフォルダが作成されます。

次に【mytheme】の中に

【style.css】と【index.php】のファルを作成します。

次にstyle.cssとindex.phpのをファイル編集をします。

まず、style.cssにチェックを入れ編集をクリックします。

※MAMPの方はAtomを使って以下の画像のようにファイルを作ります。

すると以下のようにか編集画面が表示されます。

※保存する時ファイル名の文字コードはUTF-8に必ずしておいてください。

次に以下のstyle.cssに以下のコードをコピペして記述してください。

/*
Theme Name: テーマの名前
Theme URI: http://テーマのURL/
Description: テーマの説明
Author: 作った人の名前
Author URI: 作った人のURL
Version: バージョン
License: ライセンス
License URI: ライセンスのURL
*/

Theme Name: テーマの名前

Theme URI: http://テーマのURL/

Description: テーマの説明

Author: 作った人の名前

Author URI: 作った人のURL

Version: バージョン

License: ライセンス

License URI: ライセンスのURL

index.phpにはダウンロードしてきたsample.htmlのファイルの中身を今回は使用しますので以下のコードをindex.phpとして記述してください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="css/common.css" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<title>あなたのサイト名などお書きください</title>
</head>
<body>
<div id="top">
   <div id="headWrap">
      <div id="header">
         <h1><a href="index.html"><img src="images/logo.gif" alt="" /></a></h1>
         <div id="pr">
            <p>サイトの説明文やキーワードを入れてください。SEO対策にもなります。</p>
         </div>
         <div id="gnavi">
            <ul>
               <li>お電話からのご予約は<br /><span class="tel">0120-000-000</span></li>
               <li><a href="index.html"><img src="images/btn_access.gif" alt="お問い合わせ" class="rollover" /></a></li>
            </ul>
         </div>
      </div><!-- /#header -->
   </div><!-- /#headWrap -->
   <div id="menu">
      <ul>
         <li class="home"><a href="index.html">ホーム</a></li>
         <li><a href="sample.html">新着情報</a></li>
         <li><a href="index.html">サービス・設備</a></li>
         <li><a href="index.html">客室・料金</a></li>
         <li><a href="index.html">料理</a></li>
         <li><a href="index.html">アクセス</a></li>
      </ul>
   </div><!-- /#menu -->
   <div id="contents">
      <div id="topicPath">
         <a href="index.html">HOME</a> > サンプルページ
      </div><!-- /#topicPath -->
      <div id="main">
         <h2>制作者より</h2>
         <h3>テンプレートについて</h3>
         <p>
            このページはアイキャッチ画像がないタイプになります。
         </p>
         <p>
            <a href="index.html">&raquo; インデックスページに戻る</a>
         </p>
      </div><!-- /#main -->
      <div id="sub">
         <div class="section">
            <h2>サービス</h2>
            <ul>
               <li><a href="index.html">インターネット</a></li>
               <li><a href="index.html">温泉</a></li>
               <li><a href="index.html">ラウンジ</a></li>
            </ul>
         </div><!-- /.section -->
         <div class="section">
            <h2>ビューティ</h2>
            <ul>
               <li><a href="index.html">マッサージ</a></li>
               <li><a href="index.html">エステ</a></li>
            </ul>
         </div><!-- /.section -->
      </div><!-- /#sub -->
      <div id="pageTop">
         <a href="#top">ページのトップへ戻る</a>
      </div><!-- /#pageTop -->
   </div><!-- /#contents -->
   <div id="footer">
      <div id="footMenu">
         <ul>
            <li><a href="index.html">会社概要</a></li>
            <li><a href="index.html">採用情報</a></li>
            <li><a href="index.html">お問い合わせ</a></li>
            <li><a href="index.html">プライバシーポリシー</a></li>
         </ul>
      </div><!-- /#footerMenu -->
      <div class="copyright">Copyright &copy; 2011 YOUR SITE NAME All Rights Reserved.</div>
   </div><!-- /#footer -->
</div><!-- /#top -->
</body>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>あなたのサイト名などお書きください</title>

</head>

<body>

<p>サイトの説明文やキーワードを入れてください。SEO対策にもなります。</p>

</div>

<ul>

<li>お電話からのご予約は<br /><span class="tel">0120-000-000</span></li>

</ul>

</div>

</div>

</div>

<ul>

</ul>

</div>

<a href="index.html">HOME</a> > サンプルページ

</div>

<h2>制作者より</h2>

<h3>テンプレートについて</h3>

<p>

このページはアイキャッチ画像がないタイプになります。

</p>

<p>

<a href="index.html">» インデックスページに戻る</a>

</p>

</div>

<ul>

<li><a href="index.html">インターネット</a></li>

</ul>

</div>

<h2>ビューティ</h2>

<ul>

<li><a href="index.html">マッサージ</a></li>

</ul>

</div>

</div>

<a href="#top">ページのトップへ戻る</a>

</div>

</div>

<ul>

<li><a href="index.html">お問い合わせ</a></li>

<li><a href="index.html">プライバシーポリシー</a></li>

</ul>

</div>

</div>

</div>

</body>

wordpressの管理画面から外観→テーマをクリックすると以下の画像のようにテーマとして認識されますので一旦有効化しておきます。

画像を表示したい時はscreenshot.pngとして画像をテーマの中に置くことにより自動的に認識されるようになります。

先ほど、style.cssファイルを作った同じ階層に今度は【top.php】というファイルを作りダウンロードしたindex.tmlのファイルの中身をそのまま記述します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="css/common.css" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<title>あなたのサイト名などお書きください</title>
</head>
<body>
<div id="top">
   <div id="headWrap">
      <div id="header">
         <h1><a href="index.html"><img src="images/logo.gif" alt="" /></a></h1>
         <div id="pr">
            <p>サイトの説明文やキーワードを入れてください。SEO対策にもなります。</p>
         </div>
         <div id="gnavi">
            <ul>
               <li>お電話からのご予約は<br /><span class="tel">0120-000-000</span></li>
               <li><a href="index.html"><img src="images/btn_access.gif" alt="お問い合わせ" class="rollover" /></a></li>
            </ul>
         </div>
      </div><!-- /#header -->
   </div><!-- /#headWrap -->
   <div id="menu">
      <ul>
         <li class="home"><a href="index.html">ホーム</a></li>
         <li><a href="sample.html">新着情報</a></li>
         <li><a href="index.html">サービス・設備</a></li>
         <li><a href="index.html">客室・料金</a></li>
         <li><a href="index.html">料理</a></li>
         <li><a href="index.html">アクセス</a></li>
      </ul>
   </div><!-- /#menu -->
   <div id="icatch"><img src="images/icatch.jpg" alt="" /></div>
   <div id="contents">
      <div id="main">
         <h2>制作者より</h2>
         <h3>テンプレートについて</h3>
         <p>
            ホテルなどのサービス業に最適なCSSデザインテンプレートです。
         </p>
         <p>
            Webページを制作するにあたって、いろいろなサイトを参考に見たりするのですが、｢開放感｣をイメージしているホテルのサイトが多いと感じました。デザイン的に言えば、ヘッダー背景やメニューバーを画面全体に表示することで、開放感を表現しています。そのあたりも参考にしました。
         </p>
         <p>
            また、リゾートホテルや旅行向けホテルはリッチ感を出すために、どんな配色でも｢深い｣色を使っているのが特徴的だと思いました。
         </p>
         <p>
            完全幅固定タイプです。<br />
            全体的な横幅は787px、メインコンテンツ部分547px（余白除く）、サブコンテンツ部分200px（余白除く）です。サブコンテンツ部分はメニューやバナー等を配置することを想定し、幅を広く取りました。<br />
         </p>
         <p>
            <a href="sample.html">&raquo; イメージ画像を削除したタイプのサンプルはこちらから。</a>
         </p>
         <h3>画像について</h3>
         <p>
            画像はCoolWebWindow作です。色の変更などの編集も可能です。ご自由にお使いください。
         </p>
         <h3>ページ上部への戻りリンクについて</h3>
         <p>
            ページ上部への戻りは、JavaScriptを用いて、なめらかにスクロールしながら移動するようにしております。
         </p>
         <h3>画像のロールオーバーについて</h3>
         <p>
            ヘッダーの「お問い合わせ」のボタンは、JavaScriptにてロールオーバーをしてます。ロールオーバーをしたい画像がありましたら、imgタグに「.rollover」というクラスを指定してください。また、ロールオーバー用の画像は、ロールオーバーしない画像名に「_on」を付けた名前にしてください。
         </p>
         <h3>カスタマイズについて</h3>
         <p>
            カスタマイズはご自由になさってください。<br />
            制限はありません。
         </p>
         <p>
            その他、不具合などございましたら<br />
            <a href="http://www.coolwebwindow.com/" target="_blank">CoolWebWindow</a>にお知らせください。<br />
         </p>
         <h2>サンプルタグについて</h2>
         <p>
            以下、サンプルタグになります。ご利用の際は参考にしてみてください。
         </p>
         <h2>INFORMATION</h2>
         <dl class="information">
            <dt><span>2009-04-28</span></dt>
            <dd>
               <div>
                  ○○新聞に取材を受けました。<br />
               </div>
            </dd>
            <dt><span>2009-04-24</span></dt>
            <dd>
               <div>
                  休業のお知らせ。誠に勝手ながら5月2日から6日まで長期休暇日とさせていただきます。ご了承ください。
               </div>
            </dd>
         </dl>
         <h2>タグサンプル</h2>
         <h3>h3タグ</h3>
         <h4>h4タグ</h4>
         <h5>h5タグ</h5>
         <h6>h6タグ</h6>
         <p>
            <em>強調（em）</em>
            <strong>より強い強調（strong）</strong>
            <ins>追加（ins）</ins>
            <del>削除（del）</del>
            <br />
            <a href="#">テキストアンカー</a>
         </p>
         <h3>リスト</h3>
         <h4>普通のリスト</h4>
         <ul>
            <li>普通のリスト1</li>
            <li>普通のリスト2</li>
            <li>普通のリスト3</li>
         </ul>
         <h4>番号付きリスト</h4>
         <ol>
            <li>番号付きリスト1</li>
            <li>番号付きリスト2</li>
            <li>番号付きリスト3<br />li要素の中はブロックレベルのタグを使用することが出来ます。例えば、&lt;p&gt;タグも記述することが出来ます。<br /></li>
         </ol>
         <h4>定義リスト</h4>
         <dl>
            <dt>定義リスト1</dt>
            <dd>定義した用語の説明</dd>
            <dt>定義リスト2</dt>
            <dd>定義した用語の説明</dd>
            <dt>定義リスト3</dt>
            <dd>定義した用語の説明<br />dd要素の中はブロックレベルのタグを使用することが出来ます。例えば、&lt;p&gt;タグも記述することが出来ます。しかし、dt要素にはインライン要素しか記述することができません。</dd>
         </dl>
         <h3>テーブル</h3>
         <table summary="">
            <tr><th>見出し1</th><th>見出し2</th><th>見出し3</th><th>見出し4</th><th>見出し5</th></tr>
            <tr><td>セル1</td><td>セル2</td><td>セル3</td><td>セル4</td><td>セル5</td></tr>
            <tr><td>セル1</td><td>セル2</td><td>セル3</td><td>セル4</td><td>セル5</td></tr>
            <tr><td>セル1</td><td>セル2</td><td>セル3</td><td>セル4</td><td>セル5</td></tr>
         </table>
      </div><!-- /#main -->
      <div id="sub">
         <div class="section">
            <h2>サービス</h2>
            <ul>
               <li><a href="index.html">インターネット</a></li>
               <li><a href="index.html">温泉</a></li>
               <li><a href="index.html">ラウンジ</a></li>
            </ul>
         </div><!-- /.section -->
         <div class="section">
            <h2>ビューティ</h2>
            <ul>
               <li><a href="index.html">マッサージ</a></li>
               <li><a href="index.html">エステ</a></li>
            </ul>
         </div><!-- /.section -->
      </div><!-- /#sub -->
      <div id="pageTop">
         <a href="#top">ページのトップへ戻る</a>
      </div><!-- /#pageTop -->
   </div><!-- /#contents -->
   <div id="footer">
      <div id="footMenu">
         <ul>
            <li><a href="index.html">会社概要</a></li>
            <li><a href="index.html">採用情報</a></li>
            <li><a href="index.html">お問い合わせ</a></li>
            <li><a href="index.html">プライバシーポリシー</a></li>
         </ul>
      </div><!-- /#footerMenu -->
      <div class="copyright">Copyright &copy; 2011 YOUR SITE NAME All Rights Reserved.</div>
   </div><!-- /#footer -->
</div><!-- /#top -->
</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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>あなたのサイト名などお書きください</title>

</head>

<body>

<p>サイトの説明文やキーワードを入れてください。SEO対策にもなります。</p>

</div>

<ul>

<li>お電話からのご予約は<br /><span class="tel">0120-000-000</span></li>

</ul>

</div>

</div>

</div>

<ul>

</ul>

</div>

<h2>制作者より</h2>

<h3>テンプレートについて</h3>

<p>

ホテルなどのサービス業に最適なCSSデザインテンプレートです。

</p>

<p>

Webページを制作するにあたって、いろいろなサイトを参考に見たりするのですが、｢開放感｣をイメージしているホテルのサイトが多いと感じました。デザイン的に言えば、ヘッダー背景やメニューバーを画面全体に表示することで、開放感を表現しています。そのあたりも参考にしました。

</p>

<p>

また、リゾートホテルや旅行向けホテルはリッチ感を出すために、どんな配色でも｢深い｣色を使っているのが特徴的だと思いました。

</p>

<p>

完全幅固定タイプです。<br />

全体的な横幅は787px、メインコンテンツ部分547px（余白除く）、サブコンテンツ部分200px（余白除く）です。サブコンテンツ部分はメニューやバナー等を配置することを想定し、幅を広く取りました。<br />

</p>

<p>

<a href="sample.html">» イメージ画像を削除したタイプのサンプルはこちらから。</a>

</p>

<h3>画像について</h3>

<p>

画像はCoolWebWindow作です。色の変更などの編集も可能です。ご自由にお使いください。

</p>

<h3>ページ上部への戻りリンクについて</h3>

<p>

ページ上部への戻りは、JavaScriptを用いて、なめらかにスクロールしながら移動するようにしております。

</p>

<h3>画像のロールオーバーについて</h3>

<p>

ヘッダーの「お問い合わせ」のボタンは、JavaScriptにてロールオーバーをしてます。ロールオーバーをしたい画像がありましたら、imgタグに「.rollover」というクラスを指定してください。また、ロールオーバー用の画像は、ロールオーバーしない画像名に「_on」を付けた名前にしてください。

</p>

<h3>カスタマイズについて</h3>

<p>

カスタマイズはご自由になさってください。<br />

制限はありません。

</p>

<p>

その他、不具合などございましたら<br />

<a href="http://www.coolwebwindow.com/" target="_blank">CoolWebWindow</a>にお知らせください。<br />

</p>

<h2>サンプルタグについて</h2>

<p>

以下、サンプルタグになります。ご利用の際は参考にしてみてください。

</p>

<h2>INFORMATION</h2>

<dd>

<div>

○○新聞に取材を受けました。<br />

</div>

</dd>

<dd>

<div>

休業のお知らせ。誠に勝手ながら5月2日から6日まで長期休暇日とさせていただきます。ご了承ください。

</div>

</dd>

</dl>

<h2>タグサンプル</h2>

<p>

<strong>より強い強調（strong）</strong>

<br />

<a href="#">テキストアンカー</a>

</p>

<h4>普通のリスト</h4>

<ul>

<li>普通のリスト1</li>

<li>普通のリスト2</li>

<li>普通のリスト3</li>

</ul>

<h4>番号付きリスト</h4>

<ol>

<li>番号付きリスト1</li>

<li>番号付きリスト2</li>

<li>番号付きリスト3<br />li要素の中はブロックレベルのタグを使用することが出来ます。例えば、<p>タグも記述することが出来ます。<br /></li>

</ol>

<h4>定義リスト</h4>

<dl>

<dt>定義リスト1</dt>

<dd>定義した用語の説明</dd>

<dt>定義リスト2</dt>

<dd>定義した用語の説明</dd>

<dt>定義リスト3</dt>

<dd>定義した用語の説明<br />dd要素の中はブロックレベルのタグを使用することが出来ます。例えば、<p>タグも記述することが出来ます。しかし、dt要素にはインライン要素しか記述することができません。</dd>

</dl>

</table>

</div>

<ul>

<li><a href="index.html">インターネット</a></li>

</ul>

</div>

<h2>ビューティ</h2>

<ul>

<li><a href="index.html">マッサージ</a></li>

</ul>

</div>

</div>

<a href="#top">ページのトップへ戻る</a>

</div>

</div>

<ul>

<li><a href="index.html">お問い合わせ</a></li>

<li><a href="index.html">プライバシーポリシー</a></li>

</ul>

</div>

</div>

</div>

</body>

</html>

次にダウンロードしてきたファル【pub014】の中から【CSS】・【images】・【js】のフォルダをUPロードしますのでまず、CSS・images・isのフォルダを作りその中にファイルをUPロードするか、FFFTPのソフトを使うと以下の画像のようにフォルダ毎upロードできます。

※【pub014】→【src】の順に開くとcss・images・jsのフォルダがあります。

以下の画像は、imagesとjsのフォルダはアップロード済みでcssのフォルダをアップロードする前の画像になります。

MAMPを使用されて方のatomの最終的なフォルダとファイル構成は以下の画像の通りです。

※今回は、Wordpressに認識してもらえるんだな!!という確認のためそのままサーバーを扱いましたが、次回からは、MAMPとAtomを使ってローカル環境で作業する方法をとり最後に出来上がったデータをサーバーにアップロードする方法をとりますので、MAMPとAtomが使用できるようにダウンロードしておいてくださいね。※もちろん直接サーバーにアップロードするのもOKです。

2018年6月15日2018年6月15日