2018年6月 – ページ 2 – 暮らしのハンドノート

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日

MAMPにWordPressをインストールする(Win10)

環境:Windows10 home 64bit

MAMPにWordPressをインストールする。

MAMPにデータベースを作成する

MAMPにWordPressのデータベースを関連付けるためにMySQLを使用します。

MANPを起動してOpen start page をクリックします。

次にToolsの中にあるphpMyAdminをクリックします。

次に以下のようにdatabaseをクリックして

wordpress_testという名前のデータベースを作りCreateをクリックすると

wordPressという名前のフォルダができます。

WordPressをダウンロードする

WordPress日本語版でダウンロードします

次にダウンロードしたフォルダをディスクトップなどにすべて展開し解凍します。

MAMPにWordPressのフォルダを移動してインストールする

ダウンロードして解凍したWordPressのフォルダをドラッグアンドドロップでMAMPのフォルダに移動します。

MAMPをイントールしたドライブのMAMP→htdocs内に

Cドライブにインストールした場合・・【C\MAMP\htdocs】
Dドライブにインストールした場合・・【D\MAMP\hhdocs】

以下のようにアドレスバーにlocalhostと入力すると先ほどMAMPで作成したデータベース名【Wordpress/】が表示されるのでクリックします。

さぁ、いよいよwordpressのインストール開始です!

さあ、始めましょう!をクリックします。

以下のように

データベース名・・wordpress

ユーザー名・・root

パスワード・・root

と入力し送信ボタンをクリックします

次にインストール実行をクリックします。

次に以下の4項目を力して検索エンジンがサイトをインデックスしないようにするにチェックを入れてWordPressをインストールをクリックします。

サイトのタイトル

ユーザー名

パスワード

メールアドレス

※これは本チャンのサイトではないのでサイト名などは気にしなくていいですが、検索エンジンにインデックスされないようにしておきましょう。

次に先ほど設定したパスワードを入力してログインボタンをクリックします。

すると通常wordpressにログインするときの画面のようにログイン画面が表示されますので、ユーザー名とパスワードを入力してログインします。

お疲れさまでした。無事ログインできましたか？

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

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

MAMPは元々にMax上で簡単にWebのテストサーバーを構築することができるソフトとして有名なソフトなんですが、
Windows環境でもローカル環境にWebのテストサーバーを構築できるフリーソフトです。
これによりWordpressなどの動的ページのサイトが作れるようになります。

MAMPの特徴

Apache HTTP サーバー（Webサーバー）
PHP（プログラミング言語）
MySQL（データベース）

MAMPをイントールする

MAMPの公式ページ　にアクセスします。

①DOWNLOADをクリックします。

②もう一度DOWNLOADをクリックします。

③ダウンロードされたファイルを開くとインストールが開始されます。

④次にインストーラの画面になりますのでEnglishのままOKをクリックします(日本語の選択はありませんがインストール後に設定可能です)

⑤もう一度Nextをクリックします。

⑥I accept the agreement(私は契約に同意します)をチェックしてNextをクリックします。

⑦初期状態ではC:\MAMPとなっています。

CドライブでよければNextをクリックしてください。

⑧MAMPのままNextをクリックします。

⑨Create a desktop icon(ディスクトップにアイコンを作成する)

ディストップにMAMPのアイコンを表示する時はチェックBOXに入れたままNextをクリックします

⑩もう一度Nextをクリックします

⑪するとMAMPのインストールが始まります

⑫次にMicrosoft Visual C++2010のセットアップが始まります

⑬最後にFinishをクリックして完了です。

サーバー接続

Macではサーバーに接続が必要のようですが、Windowsでは自動でサーバーに接続します。

Stop Serversの画像で見るとわかりやすいので見比べてみてください。

下の画像はまだ接続が完了していない状態でアイコンがグレーです。

次に下のStop Serversのアイコンがグリーンになっていれば、サーバーにアクセス完了しています。

設定

MAMPを起動してPreferencesをクリックします

次にPortsのタグをクリックして以下の内容になっているか確認してください。

Apacheなど違う数値になっていたら

Set Web & MySQL ports to 80 & 3306 をクリックしてください

すると以下のようになりますのでOKボタンをクリックします。

サーバーにアクセスする

Macではサーバーにアクセスするのに Stop Serversからアクセスしてパスワードを入力すると自動で開くのですが、

Windowsでは上の画像のように Open WebStart page をクリックすると以下のように開きます。

こちらの記事もどうぞ・・

MAMPにWordPressをインストールする(Win10)

2018年6月12日2018年6月12日

Atomを日本語化して便利に使おう!オススメのプラグインも!

Atomを日本語メニューに対応にする

atom開きWelcome Giide内にあるInstall a Packageを開きます。

次にInstall a Package内のOpen Installerボタンをクリック

Settingsの中のInsrall Packagesが表示されるので、

japanese-menuと入力してPacagesをクリックするとインストールが始まります。

イントールが終わるとメニューが日本語になっています。

その他にも以下のように色々と便利なプラグインがありますので、必要に応じて使用しましょう。

①自動補完が自動表示する
php-integrator-autocomplete-plus

②ファイルパスを追加してくれる
autocomplete-paths