スマホサイトの公開方法

 
トップページ はじめに 作成実績 スマホテンプレート ネットで収入を得る
 
 

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

 

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


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

なお、具体的な手順については、「動画で覚える無料ホームページ制作講座」のサイトで、 動画で解説しているので、確認してみてください。 このサイトでお伝えしている手順どおりにやれば、スマホサイトのデータをレンタルサーバにアップして、インターネット上に公開することができます。


ただ、「スマホサイトを作りたい」という人は、「すでにホームページ(パソコンサイト)を持っている」という場合が多いですよね。 そして、「現在、公開しているホームページ(パソコンサイト)のスマホサイト版として、スマホサイトを公開したい」という人が、ほとんどだと思います。

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


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

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

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




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

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


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

同じように、パソコンサイトのプロフィールのページのファイル名が、「profile.html」だった場合、スマホサイトのプロフィールのページのファイル名も、「profile.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">


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


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


スマホサイトのHTMLファイルには、すべて、上記の「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">


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


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


パソコンサイトのHTMLファイルには、すべて、上記の「alternate」タグを入れてあげる必要がある、ということです。 ドメイン名については、すべて一緒になりますが、ファイル名は、それぞれのHTMLファイルに合わせて、変更してあげる必要があるので、注意してくださいね。




【手順4】.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」ファイルに追加してあげることで、 パソコンを使ってホームページに訪れた人には、パソコンサイトを表示させて、 スマホを使ってホームページに訪れた人には、スマホサイトが表示させる、ということができます。

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




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

パソコンサイトとスマホサイトの連携ができているかどうかは、下記URLから、テストを行うことができます。

https://search.google.com/search-console/mobile-friendly?utm_source=mft&utm_medium=redirect&utm_campaign=mft-redirect&hl=JA


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


また、パソコンを使ってホームページにアクセスしたら、パソコンサイトが表示されて、スマホを使ってホームページにアクセスしたら、スマホサイトが表示されることを確認してみてください。

アクセスをした端末によって、表示されるホームページが自動的に切り替わっていれば、作業に問題はありません。




 

 
ホームページの作り方
 
動画で覚える無料ホームページ制作講座
 
ホームページの作り方を、動画で見ながら覚えることができる 無料の講座 です。

インターネットを使ったサイドビジネスで収入を得るためには、 「ホームページを自分で作れること」 が必要になるので、このサイトが役に立ちます。
 
 
HPテンプレート
 
自分で更新できる最短ホームページテンプレート
 
初心者が、簡単にホームページを作るための 「ホームページテンプレート」 です。

なお、スマホテンプレートがセットになっているプランもあります。
 
収入を得る最短コース
 
会員制サイドビジネス講座
 
インターネットを使って、 月20万円の収入を得るために、 必要な知識と技術 を身につけることができる、会員制のサイドビジネス講座です。

これが、インターネットを使ったサイドビジネスで、 収入を得るための最短コース になります。
 
当サイトの運営者
 
インターネット副業 運営者プロフィール
 
 
NPO法人 推薦状
 
NPO法人からの推薦
 
NPO法人「起業とキャリア支援センター」様からの推薦を受けて、運営しています。