5月24日　授業内容②(wordpress概要,「.htaccessファイル」を使った自動振り分け、jQueryのtouchイベント)

htaccessとは？

wordpress概要
f:id:paris1204:20160524160319p:plain
http://yachin29.hatenablog.com/entry/2015/05/07/010930yachin29.hatenablog.com

★.htaccessファイル」を使った自動振り分け
yachin29.hatenablog.com

下記のサイトにスマホでアクセスすると自動的にスマートフォンのサイトに切り替わる
※ヤジーが薦めるこれだけは読んでおけ！な9冊 PC版

http://yachin29.hatenablog.com/entry/2015/04/15/162050yachin29.hatenablog.com

①htaccess.txt（macでtxtファイルだと不可視になるがきちんと表示されていればok）
今回のフォルダの中の構成
f:id:paris1204:20160524181331p:plain
f:id:paris1204:20160524181340p:plain

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]//()の中にあるものは自動的にspに切り替わる
RewriteCond %{QUERY_STRING} !mode=pc　　//pc表示にもできる用にする
RewriteRule ^$ /pc/sp/ [R,L]　　//最上階層(サーバー側)から見てspがどこにあるかを考える

Header set Vary User-Agent
</IfModule>

②★順にしたがってスマホ用とpc用に追記する
f:id:paris1204:20160524184103p:plain

③サーバーにアップロードをする

④サーバー側のhtaccess.txtの名前を.htaccessに書き換える

⑤フレンドリーテストに合格すればOK

アップロードしたサイト
pc用　　　
ドレミファ音楽教室(PC用)

スマホ用
スマートフォン専用サイト

pc用記述

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Josefin+Sans' rel='stylesheet' type='text/css'>
<link rel="alternate" media="only screen and (max-width: 767px)" href="http://yellow1204.webcrow.jp/pc/sp/"><!--768px(ipadminiのサイズ)より小さいサイズならsp用に切り替わるという意味-->
<title>ドレミファ音楽教室(PC用)</title>
</head>

<body>

<header>



<div class="header">
<h1>ドレミファ音楽教室</h1>

<div id="tel">
<h2>お問い合わせ・お申し込み</h2>

<p>01-4321-7890</p>
</div>

</div><!--.header-->


<nav>
<ul>
<li><a href="index.html">教室について</a></li>
<li><a href="#">大人のコース</a></li>
<li><a href="#">子どものコース</a></li>
<li><a href="#">体験クラス</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>


</header>


<div id="container">
<section>

<h1 class="piano">音楽の楽しさをみなさんに伝えたい</h1>

<section>
<div id="wrapper">
<section>
<div id="content">
<h1>お知らせ</h1>


<div class="kiji">
<a href="#">
<img src="img/home-news-1.jpg" alt="#"><p><span>今月の体験クラスの情報を掲載しました。</span>先着順でお申し込み受付中ですのでお早めにどうぞ。</p>
</a>
</div>



<div class="kiji">
<a href="#">
<img src="img/home-news-2.jpg" alt="#"><p>「大人のためのやりなおしピアノ」開講しました。子どもの頃は習っていたけれど今はすっかり……という方におすすめです。</p>
</a>
</div>



<div class="kiji">
<a href="#">
<img src="img/home-news-3.jpg" alt="#"><p>ドレミファ音楽教室が4周年を迎えました。これからもどうぞよろしくお願いいたします！</p>
</a>
</div>


</div><!--#content-->
</section>


<div id="article">

<a href="#">
<div>
<article class="one">
<p>子どもがよろこぶ！お菓子が登場する曲特集</p>
</article>
</div>
</a>

<a href="#">
<div>
<article class="two">
<p>ピアノを習うのは何才からがベスト？</p>
</article>
</div>
</a>


<a href="#">
<div>
<article class="three">
<p>大きな音が出せない！練習場所のなやみ</p>
</article>
</div>
</a>

</div><!--#article-->


</div><!--#wrapper-->
</section>
</section>
<footer>
<ul>
<li><a href="index.html">教室について</a></li>
<li><a href="#">大人のコース</a></li>
<li><a href="#">子どものコース</a></li>
<li><a href="#">体験クラス</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>

<p><small>©copyright DoReMiFa Music School, all rights reserved.</small></p>
</footer>

</div><!--#container-->
</body>
</html>

スマホ用
html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>スマートフォン専用サイト</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><!--user-scalable=noを使うと拡大・縮小ができなくなる--
スマホサイトだけの固定値にできる>
<meta name="format-detection" content="telephone=no, email=no"><!--電話番号、メールにリンクが勝手に付くのを防ぐ-->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="css/style.css">
<link rel="canonical" href="http://yellow1204.webcrow.jp/pc/"><!--pcのフォルダの入り口をリンクとして記載する-->
</head>

<body>
<header class="global-header">
<h1 class="page-heading">エモトカホリ</h1>
<nav class="nav-page">
<p class="nav-page-left">
<a href="http://yellow1204.webcrow.jp/pc/?mode=pc">PCサイトへ</a><!--?mode=pc"を記載することでスマホでpc版を見たい時にスマホ用に戻るのを防ぐ記述-->
</p>
</nav>
</header>

<section class="block" id="box">
<h1 class="block-heading">エモトカホリのポートフォリオサイト</h1>
<p><img src="img/logo.png"　alt="#" class="img-illust"></p>
<p class="introduction">
エモトカホリのポートフォリオサイトです。<br />
動物や植物を中心にしたイラストを書いています。
</p>
</section>

<section class="block">
<h1 class="block-heading">イラスト集</h1>
<p class="comment">エモトカホリの作品集です。絵をクリックするとイラストのページに移動します。</p>
<nav class="nav-portfolio">
<ul>
<li><a href="flying-penguin.html" title="群れをなして空を飛ぶペンギンたちのイラスト" ><img src="img/thumbnail_flying-penguin.png" alt="群れをなして空を飛ぶペンギンたちのイラスト"></a></li>
   <li><a href="#" title="コトリ"><img src="img/thumbnail_love-bluebird.png" alt="恋する二人を見守る小鳥がハート型に赤い糸を咥えているのイラスト"></a></li>
   <li><a href="#" title="ゾウ"><img src="img/thumbnail_dreaming-elephant.png" alt="クジャクの上に乗って空を飛ぶことを夢見るゾウのイラスト"></a></li>
   <li><a href="#" title="クマ"><img src="img/thumbnail_star-bear.png" alt="星を虫取りアミでたくさん捕まえているクマのイラスト"></a></li>
   <li><a href="#" title="イヌ"><img src="img/thumbnail_present-dog.png" alt="プレゼントの箱を体につけたイヌのイラスト"></a></li>
   <li><a href="#" title="ネコ"><img src="img/thumbnail_flying-cat.png" alt="色とりどりの風船を持って空を飛ぶネコのイラスト"></a></li>
   <li><a href="#" title="ウサギ"><img src="img/thumbnail_rabbit.png" alt="花に恋するウサギ"></a></li>
   <li><a href="#" title="カメ"><img src="img/thumbnail_tortoise.png" alt="森で長生きしているカメ"></a></li>
  </ul>
 </nav>
 <p class="comment">
こちらで紹介している作品以外の作品もありますので、ご覧になりたい方は<a href="mailto:mail@exsample.com?subject=【エモトカホリの他の作品について】">メールでお問い合わせください。</a>
 </p>
</section>

<footer>
<nav class="nav-about">
<ul>
<li><a href="#">エモトカホリの紹介</a></li>
<li><a href="#">イラストの販売について</a></li>
<li><a href="#">仕事のご依頼・お問い合わせ</a></li>
<li><a href="#">PCサイトはこちら</a></li>
</ul>
 </nav>
 <p class="copyright"><small>Copyright&copy;2014 Emoto Kahori</small></p>
</footer>
</body>
</html>

css

@charset "utf-8";
/*=================================================
 * ブラウザのデフォルトのスタイルをリセットする
 * ================================================= */

html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p,
header, section, article, aside, hgroup, footer, figure, figcaption, nav {
 margin: 0;
 padding: 0;
 font-size: 100%;
}

body {
 line-height: 1.0;
 -webkit-text-size-adjust: none;/*<!--safariとchrome用の記述(ios7ぐらいで自動的に文字のサイズが変更されるのを防ぐ)-->*/
}

article,aside,canvas,details,figcaption,figure,
footer,header,menu,nav,section,summary { 
 display:block;
}

img {
 border: 0;
 vertical-align: bottom;
}

ul, ol {
 list-style: none;
}

table {
 border-spacing: 0;
 empty-cells: show;
}

/*=================================================
 * サイト全体の基本スタイル
 * ================================================= */

body {
 background-color: #D9F5F3;
 font-family:  "Hiragino Kaku Gothic ProN", Helvetica, san-serif;/*スマホ用なのでIEのMeiryoは使わない*/
 font-size: 14px;
 line-height: 1.6;
}

a {
 color: #336699;
}

/*=================================================
 * サイトのレイアウト
 * ================================================= */
.global-header {
 height: 44px;/*推奨しているボタンの大きさは縦横44px（ボタンを44pxにしないといけないわけではなく、ボタンが入っている領域をボタン1つあたり44pxにする）*/
 line-height: 44px;
 background-color: #132543;
 box-shadow: inset 0 0 7px rgba(255,255,255,.4);
 border: solid 1px #2a849d;
 background-image: -webkit-linear-gradient(bottom, #48a5bf, #7ec4d8);/*webkit用のグラデーションの書き方（下から上）*/
 background-image: linear-gradient(to top, #48a5bf, #7ec4d8);/*新しい書き方（行き先をかく）*/
}
.page-heading {
 text-align:center;
 color: #FFFFFF;
 font-size: 16px;
 text-shadow: 1px 1px 1px #000000;
}
.img-illust {
 margin: 0 auto;
 display: block;
 border: 10px solid #F5F5F0;
}
.introduction {
 margin: 15px 10px;
 padding: 5px 10px;
 background-color: #75D9D0;
 font-size: 12px;
 border-radius: 8px;
}
.block {
 padding-bottom: 20px;
}
.block-heading {
 margin: 10px;
 padding: 5px;
 border-left: 5px solid #75D9D0;
 font-size: 14px;
}
.comment {
 margin: 0 10px;
 font-size: 12px;
}
.nav-portfolio {
 margin-top: 10px;
}
.nav-portfolio img {
 margin: 5px 0;
 width: 60px;
 height: 60px;
 border-radius: 50%;  /*画像の隅を丸くする*/
 box-shadow: 0 0 3px #333333; /*影をつける*/
}
.nav-portfolio ul {
display: block;
overflow: hidden;
}
.nav-portfolio li {
 margin: 0 0 10px 16px;
 float: left;
 text-align: center;
}
.nav-portfolio a {
 display: block;
 text-decoration: none;
}
.nav-portfolio a:before {
 display: block;
 content: attr(title);  /*aタグに書かれているtitleを表示させる*/
 font-size: 12px;
 text-align: center;
 width: 60px;  /*文字がwidthを超えると省略される*/
 overflow: hidden;  /*文字が長い場合に省略される*/
 white-space: nowrap;  /*文字が長い場合に省略される*/
 text-overflow: ellipsis;   /*文字が長い場合に省略される。上の3つとセット*/;
}

.nav-about {
 margin: 10px;
}
.nav-about ul {
 border-radius: 8px;
 padding: 0;
 box-shadow: 0 0 3px #333333;
}
.nav-about li {
 border-top: 1px solid #D9F5F3;
 border-bottom: 1px solid #75D9D0;
 height: 44px;         /*テキストを上下中央に配置する*/
 line-height: 44px;   /*テキストを上下中央に配置する*/
 background-color: #ffffff;
}
.nav-about li:first-child {
 border-top-right-radius: 8px;
 border-top-left-radius: 8px;
}
.nav-about li:last-child {
 border-bottom-right-radius: 8px;
 border-bottom-left-radius: 8px;
}
.nav-about a {
 padding: 0 14px;
 display: block;
 text-decoration: none;
}
footer {
 padding: 10px 0;
 background-color: #75D9D0;
}
.copyright {
 margin: 0;
 color:  #000000;
 text-align: center;
}


/*詳細ページのスタイル*/
.nav-page {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
}
.nav-page-left {
 position: absolute;
 top: 0;
 left: 10px;
}
.nav-page a {
 padding: 6px 12px;
 border: 1px solid #75D9D0;
 background: -webkit-gradient(linear, left top, left bottom, from(#D9F5F3), color-stop(45%, #c8e4e2), color-stop(55%, #86e0e1), to(#75D9D0));  
 border-radius: 4px;
 box-shadow: 0 1px #D9F5F3;
 text-decoration: none;
}

★yachin29.hatenablog.com

f:id:paris1204:20160524192755p:plain

f:id:paris1204:20160524193123p:plain

f:id:paris1204:20160524193342p:plain