★ Let's become a Web Designer! 【プロフィール】 【商品一覧】 【よくある質問】 【お問い合わせ】
 

パソコンサイトとスマホサイトの連携

 
ホーム はじめに 講座の効果 作成実績 受講者の声 パーツ集 作成ソフトの選び方 作成ソフトの比較 初心者用の講座
 
 
 
 
 
 
  トップページ > 無料スマホサイト作成講座 > スマホサイトの公開する方法
 

スマホサイトをインターネット上に公開する方法

作成したスマホサイトのデータを、インターネット上に公開する方法は、「パソコンサイト(ホームページ)をインターネット上に公開する方法」と一緒です。

具体的には、レンタルサーバを借りて、ドメインを取得して、FFFTPソフトを使って、スマホサイトのデータを、レンタルサーバにアップするという形ですね。

スマホサイトをインターネット上にアップする方法


なお、具体的な手順については、ホームページのファイルをアップする方法 ~ FFFTPソフトの設定方法 ~ のページで、解説しているので、確認してみてください。

この手順どおりにやれば、スマホサイトのデータをレンタルサーバにアップして、インターネット上に公開することができます。


ただ、「スマホサイトを作りたい!」という人は、「すでにホームページ(パソコンサイト)を持っている」という場合が、ほとんどだと思います。

そこで、ここでは、「すでにホームページを持っている人が、そのホームページの「スマホ版」として、スマホサイトをインターネット上に公開する手順」をお伝えします。


この方法を行えば、訪問者が使っている端末(パソコンやスマホ)によって、表示されるホームページを切り替えることもできますよ。

たとえば、パソコンを使ってホームページに訪れた人には、パソコンサイトを表示させて、スマホを使ってホームページに訪れた人には、スマホサイトが表示される、、、という形ですね。

この方法は、とても便利な方法であるため、ぜひ実施してみてくださいね!




【手順1】パソコンサイトとスマホサイトの
「HTMLファイルのファイル名」を、一致させておくこと

すでにホームページを持っている人が、そのホームページの「スマホ版」として、スマホサイトをインターネット上に公開するには、 まず、パソコンサイトとスマホサイトの、ホームページを表示させているファイル(HTMLファイル)のファイル名を、一致させてあげる必要があります。

パソコンサイトとスマホサイトのファイル名は、一緒にすること


具体的には、パソコンサイトの「トップページ」のファイル名が、「index.html」だった場合、スマホサイトのトップページのファイル名も、「index.html」にするという形です。

同じように、パソコンサイトの「プロフィール」のページのファイル名が、「page1.html」だった場合、スマホサイトのプロフィールのページのファイル名も、「page1.html」にするという形ですね。


パソコンサイトとスマホサイトを連携させるには、まず、パソコンサイトとスマホサイトの「HTMLファイルのファイル名」を一致させるようにすることが、必要になります。


 

スマホサイトのデータを入れる「フォルダ名」について

 

スマホサイトのデータは、「sp」という名前のフォルダで管理するのが一般的です。 たとえば、パソコンサイトのURLが、「http://torebook.jp/」だとしたら、スマホサイトのURLは、「http://torebook.jp/sp/」になるという形ですね。

このように、「sp」というフォルダを作って、その「sp」のフォルダの中に、スマホサイトのデータを管理します。 そして、フォルダを分けることで、パソコンサイトのHTMLファイルと、スマホサイトのHTMLファイルの名前を一緒にすることができる、ということですね。




【手順2】スマホサイトのHTMLファイルのヘッダー部分に、「canonical」タグを入れる

パソコンサイトとスマホサイトを連携させるためには、スマホサイトのHTMLファイルのヘッダー部分に、「canonical」タグを入れてあげます。

具体的には、下記の赤くなっている1行を入れてあげます。


<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="keywords" content="ホームページ,制作,サンプル">
<meta name="description" content="無料ホームページ制作講座のために作成したサンプルサイトです。">
<link href="http://ドメイン名/index.html" rel="canonical">
<title>ホームページ制作</title>
<link rel="stylesheet" href="style.css" type="text/css">
<base target="_top">
</head>


なお、上記の赤くなっている一行の「ドメイン名」と「ファイル名(index.html)」は、必ず変更してください。 具体的には、ホームページのドメイン名が「torebook.jp」だった場合には、下記のような記述になります。


<link href="http://torebook.jp/index.html" rel="canonical">


また、たとえば、page1.html ファイルに、「canonical」タグを入れる場合は、
下記のような記述になります。


<link href="http://torebook.jp/page1.html" rel="canonical">


スマホサイトのHTMLファイルには、すべて、上記の「canonical」タグを入れてあげる必要がある、ということです。

そして、スマホサイトに、この「canonical」タグを入れてあげることで、「このページと同じ内容が書かれたパソコンサイトのページがありますよ!」ということを、検索エンジンに知らせることができるようになります。


なお、ドメイン名については、すべてのページで一緒になりますが、ファイル名は、それぞれのHTMLファイルに合わせて、変更してあげる必要があるので、十分 注意してくださいね。



 

【手順3】パソコンサイトのHTMLファイルのヘッダー部分に、「alternate」タグを入れる

パソコンサイトとスマホサイトを連携させるためには、パソコンサイトのHTMLファイルのヘッダー部分に、「alternate」タグを入れてあげます。

具体的には、下記の赤くなっている1行を入れてあげます。


<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="keywords" content="ホームページ,制作,サンプル">
<meta name="description" content="無料ホームページ制作講座のために作成したサンプルサイトです。">
<link href="http://ドメイン名/sp/index.html" rel="alternate">
<title>ホームページ制作</title>
<link rel="stylesheet" href="style.css" type="text/css">
<base target="_top">
</head>


なお、上記の赤くなっている一行の「ドメイン名」と「ファイル名(index.html)」は、必ず変更してください。 具体的には、ホームページのドメイン名が「torebook.jp」だった場合には、下記のような記述になります。


<link href="http://torebook.jp/sp/index.html" rel="alternate">


また、たとえば、page1.html ファイルに、「alternate」タグを入れる場合は、
下記のような記述になります。


<link href="http://torebook.jp/sp/page1.html" rel="alternate">


パソコンサイトのHTMLファイルには、すべて、上記の「alternate」タグを入れてあげる必要がある、ということです。

そして、パソコンサイトに、この「alternate」タグを入れてあげることで、「このページと同じ内容が書かれたスマホサイトのページがありますよ!」ということを、検索エンジンに知らせることができるようになります。


なお、ドメイン名については、すべてのページで一緒になりますが、ファイル名は、それぞれのHTMLファイルに合わせて、変更してあげる必要があるので、十分 注意してくださいね。



 

【手順4】スマホサイトのデータをレンタルサーバにアップする

パソコンサイトとスマホサイトのファイルを一致させて、スマホサイトに「canonical」タグ、そして、パソコンサイトに「alternate」タグを入れたら、 あとは、スマホサイトのデータを、レンタルサーバにアップロードします。
(もちろん、修正したパソコンサイトのデータもアップしてくださいね!)


そして、スマホサイトのデータについては、パソコンサイトの index.htmlファイルと同じ場所に、 「sp」という名前のフォルダを作成して、その「sp」フォルダの中に、スマホサイトのデータをアップします。

具体的には、下記のような形です。


▼スマホサイトのアップロード方法
スマホサイトのアップロード方法


これによって、そのホームページ(パソコンサイト)の「スマホ版」として、スマホサイトをインターネット上に公開することができます。

ちなみに、URLは、ホームページのドメイン名が「torebook.jp」だった場合は、パソコンサイトのURLは「http://torebook.jp/」になりますし、スマホサイトのURLは、「http://torebook.jp/sp/」になりますよ。



 

【手順5】訪問者によって表示させるサイトを切り替えるために、
.htaccess ファイルを修正する

最後に、訪問者が使っている端末(パソコンやスマホ)によって、表示されるホームページを自動的に切り替えるようにします。

具体的には、パソコンでアクセスをしてきた人には「パソコンサイト」を表示させて、スマホでアクセスをしてきた人には「スマホサイト」を表示させる、という形です。

このような振り分けを、自動的に行うようにしてげたほうが、訪問者は助かるので、その方法をお伝えしますね!

パソコンサイトとスマホサイトの連携方法


具体的な手順(実現方法)としては、「.htaccess」ファイルに、下記の情報を追加してあげます。

この情報を、「.htaccess」ファイルに追加してあげることで、訪問者が使っている端末(パソコンやスマホ)によって、表示されるホームページを切り替えることができます。


Header set Vary User-Agent
RewriteEngine on

RewriteCond %{REQUEST_URI} !/sp/
RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|Android|Windows\ Phone)
RewriteRule ^(.*)$ sp/$1 [L]
RewriteBase /

RewriteCond %{REQUEST_URI} /sp/
RewriteCond %{HTTP_USER_AGENT} !(iPod|iPhone|Android|Windows\ Phone)
RewriteRule ^sp/(.*)$ $1 [L]
RewriteBase /


 最後に、必ず「改行」を入れてください


上記の記述を、「.htaccess」ファイルに追加してあげることで、パソコンを使ってホームページに訪れた人には「パソコンサイト」を表示させて、 スマホを使ってホームページに訪れた人には「スマホサイト」を表示させる、ということができます。


なお、「.htaccess」ファイルを置く場所(レンタルサーバにアップする場所)については、パソコンサイトの index.htmlファイルと同じ場所に、置くようにしてください。

スマホサイトのデータをアップした場所(spフォルダの中)にアップロードするのではなく、必ず、パソコンサイトのindex.htmlファイルと同じ場所に置くようにしてくださいね。

これで、パソコンサイトとスマホサイトの連携は完成です。




【確認作業】モバイルフレンドリーのテストをする

パソコンサイトとスマホサイトの連携ができているかどうかを確認するには、 ご自身のスマホで、ホームページにアクセスをして、「スマホサイト」が自動的に表示されれば、それでOKです。

アクセスをした端末によって、表示されるホームページが自動的に切り替わっていれば、作業に問題はない、ということですね。


あとは、下記のサイトで、「モバイルフレンドリー」のテストを行うこともできますよ。
あなたのウェブページはモバイル フレンドリーですか?


上記のサイトに、URLを入力して、「このページはモバイル フレンドリーです」と表示されれば、パソコンサイトとスマホサイトの連携ができているということです。

モバイルフレンドリーのテスト


これで、確認作業は完了になります。






【おすすめ外部コンテンツ】
 
会員制サイドビジネス講座
 
私がお金を稼ぐ理由 ~ お金を持ったときのメリット ~
 
インターネットで月20万円の収入を継続して稼ぐ方法
 
初心者用ホームページテンプレート
 

インターネットビジネスのすごさを認識してください
 
無料ホームページ制作講座の受講者の声
 
動画で覚える無料FX講座
 
ホームページが作れる能力は、最高の能力
 



当サイトで使用しているサンプルサイトを無料でダウンロード!

当サイトで使用しているサンプルサイトのデータを、無料でダウンロードできます。
サンプルサイトがあれば、さらにホームページの作り方が分かりやすくなりますよ!

当サイトで使用しているサンプルサイトの無料ダウンロードはこちら!



副業で月20万円の収入を、自宅の空いている時間で稼ぐための講座

インターネットを使ったサイドビジネス(副業)で、自宅にいながら、空いている時間で、月20万円の収入を得ていただくための方法 もお伝えしています。 これからは、「複数の収入源を持つこと」がとても大切なので、ぜひホームページで収入を得ていきましょう!

副業で自宅にいながら、収入を得るための講座はこちら!



 
今スタートできるサンプル
サイトを無料ダウンロード
 
サンプルサイトの無料ダウンロード
 
サイドビジネス講座
 
会員制サイドビジネス講座
 
初心者がホームページを自分で作れる能力を身につけて、 そのホームページをビジネスに活用する方法をお伝えする、会員制のサイドビジネス講座です。

この講座は、初心者がインターネットで収入を得られるようになることを目的として、運営しています。
 
 
 
HPテンプレート
 
自分で更新できる最短ホームページテンプレート
 
初心者が、簡単にホームページを作るための「ホームページテンプレート」です。

テンプレートと、たくさんのパーツ集をコピーして貼り付けるだけで、ホームページが完成する仕組みになっています。

さらに、テンプレートの使い方はすべて動画で解説しています。
 
ホームページのメリット
 
基礎講座と用語集
 無料ホームページ作り方 ホームページ基礎講座
 無料ホームページ作り方 HPでよく使う用語集
 無料ホームページ作り方 HTMLタグの書き方
 無料ホームページ作り方 スタイルシートの書き方
 
ホームページを作る前に
 
ホームページを作った後
 
インターネット副業
 
サイドビジネス・副業の始め方
 
初心者が、インターネットを使ったサイドビジネスで、自宅にいながら収入を得る方法を、すべて動画でお伝えするサイトです。

また、仕事ができるようになるノウハウや、「最高の成長法」などもお伝えしています。
 
 
メールマガジン
 無料ホームページ作り方 メールマガジンの登録
 
リンク集
 無料ホームページ作り方 当サイトへのリンク
 無料ホームページ作り方 役立つホームページ
 無料ホームページ作り方 家を購入した体験談
 無料ホームページ作り方 FX資産運用ブログ
 
会社概要
 
特定商取引に基づく表記
 
個人情報保護ポリシー
 
お問い合わせ先
 
 
NPO法人の推薦状
 
NPO法人の推薦状

 
当サイトは、NPO法人「起業とキャリア支援センター」様からの推薦を受けて、運営しています。
 
Twitter でシェアする
 
このページの内容が分かりやすいと思ったら、今すぐ Twitter でシェアしよう!
 
 
 
Facebook でシェアする
 
このサイトの内容が分かりやすいと思ったら、今すぐ Facebook でシェアしよう!
 
 
 
トップページプロフィール特定商取引法に基づく表記取り扱い商品一覧よくある質問お問い合わせ
 
 
Copyright © 動画で覚える無料ホームページ制作講座 All rights reserved.
 
by おすすめ副業ランキングサイト
^