創作サイトの携帯電話・スマートフォンなどのモバイル対応方法（中級者編）｜創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作（SOHO）【I'll be NET】

一般的なホームページのモバイル対応では、下記の３つの方法のいずれかを行っています。

レスポンシブデザイン
ユーザーエージェントによるデザイン切り替え
携帯用の別サイトの作成

また、前回の記事（創作サイトの携帯電話・スマートフォンなどのモバイル対応方法（初心者編））で、HTML・CSS・JavaScript・PHPの知識がない方でもできるモバイル対応の方法をご紹介しました。
今回は、無料の範囲内で、HTML・CSS・JavaScriptの知識（ソースを変更する程度で結構です）がある方が出来る、創作サイト（同人サイト）でモバイル対応を行う際にオススメの方法を紹介します。

携帯電話（ガラケー）用のサイトを作成する

手っ取り早く創作サイトを携帯電話（ガラパゴス携帯・フィーチャーフォン）でも閲覧可能にするには、携帯サイトを用意するのがいいかもしれません。
その際、携帯サイトのみを利用しPCからの閲覧も携帯サイトを推奨するのか、PCサイトとは別に携帯サイトを作成するのかは自由です。

携帯サイトとPCサイトと２つ管理するとなると、作品を発表する際は２つのサイトに同じ内容を更新しなければならないため、面倒だと感じることも多いと思います。
かといって、携帯サイトだけを管理しPCサイトを用意しなければ良いかというと、携帯サイトをパソコンやスマートフォンから閲覧することに不便さ・抵抗を感じる人がいることも事実ですので、避けたほうが良いと思います。

携帯電話向けのサイトを制作するには、下記のような様々な制約があります。

ファイルサイズに制限がある
スタイルシート利用不可
JavaScript利用不可
文字コードはSHIFT-JIS推奨

これらの制約をクリアするサイトを制作するには、携帯用の無料ホームページ作成サービスを利用するのが便利です。

無料携帯サイト作成サービスを利用する

携帯サイトを自分で作成するには、上にご紹介したとおり幾つかの制限があります。
携帯用の無料ホームページ作成サービスでは、メールアドレスを利用して登録すると、ガラケー・スマートフォン対応のサイトを制作することができます。

使用できるサービスによってサービス内容に違いがありますので、規約の確認が必要です。

サーバー名	リゼ	エムペ	ナノ
アダルト	×	△	△
子ページ	100まで	50まで	制限無
検索避け	○	○	○
HEADタグ編集	○	○	○
アクセス制限	○	×	○
最大容量	5MB	20MB	100MB
広告	有	有	有

無料ホームページ作成サービスを利用した携帯サイトの作り方

無料ホームページ作成サービスを利用して携帯サイトを作成する方法は簡単です。

会員登録をする
デザインを選択する
コンテンツを選択する
内容を登録する

携帯電話（ガラパゴス携帯・フィーチャーフォン）でも登録できるように、内容の登録は非常に簡単になっています。

参考URL

PCサイトにアクセスした携帯電話の閲覧者を携帯サイトへ自動的に転送する

PCサイトにアクセスした携帯電話からの閲覧者をUA（ユーザーエージェント）から判断し、別のサイトへ転送するには、PCサイト側で.htaccessを利用します。
UAからサイトを転送するための.htaccessは、下記URLで生成できます。

CMAN｜htaccessによるリダイレクト（スマホ,携帯,OS,ブラウザ）

PC用サイトをスマートフォン・タブレットにも対応する

創作サイトを携帯電話（ガラパゴス携帯・フィーチャーフォン）へ対応する方法としては、携帯サイトを用意するのが良いとご説明しましたが、スマートフォン・タブレットに対してはどうでしょうか。

一般的に、スマートフォン・タブレットへの対応方法としては、

PCサイト用のテンプレートとは別にスマートフォン・タブレット用のテンプレートを用意して、アクセスするUA(ユーザーエージェント）などによってテンプレートを切り替えて表示する
PCサイト用のスタイルシートとは別にスマートフォン・タブレット用のスタイルシートを用意して、表示するウィンドウのサイズなどによってスタイルシートを切り替えて表示する

という２つの方法が考えられます。

詳しくはホームページの携帯電話・スマートフォンなどのモバイル対応方法を御覧ください。

ブログサイトなどでは（１）を利用することが多いと思いますが、ブログサービスを利用するのではなく、HTMLのみで構成された創作サイトの場合は、（２）を利用する方が簡単だと思います。

創作サイトをレスポンシブデザインにする

上記（２）で説明したように、PC用のサイトと同じHTMLを利用し、スタイルシートのみでスマートフォン・タブレットに対応するサイトのデザインを、レスポンシブデザインと呼びます。
サイトをレスポンシブデザインにするには、

レスポンシブデザインに対応したHTMLを作成する
PC用のスタイルシート、スマートフォン・タブレット用のスタイルシートを作成する

ことが必要です。

レスポンシブデザインに適したHTML構成とは

レスポンシブデザインでサイトを作成する場合は、気をつけなければならないことがいくつかあります。

FRAMEタグを使わない

FRAMEタグは、一昔前は創作サイトでもよく利用されたタグですが、HTML5では廃止される予定です。
レスポンシブデザインでサイトを構成する場合は、FRAMEタグは利用しないで下さい。
FRAMEタグを使ったサイトのようなデザインにしたければ、スタイルシートの擬似フレームを利用しましょう。

METAタグに"viewport"を設定する

レスポンシブデザインを採用するために、METAタグにviewportを設定します。
レスポンシブデザインで表示したいHTML画面のHEADタグ内に、下記のソースを記入してください。

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
</head>

上記のようにすると、ブラウザが端末の画面幅にあわせて表示領域を調整して表示してくれるようになります。

外部スタイルシートを利用する

スタイルの設定は、HTML内には書き込まず、外部スタイルシートを利用するようにしましょう。
PC・スマホ・タブレットなど、全ての環境で利用するスタイルシート、スマホのみに利用するスタイルシートなどを分けて構成しておくと、スタイルシートをスムーズに切り替えることができます。

レスポンシブデザインに適したスタイルシート構成とは

レスポンシブデザインにサイトを適用させるために、スタイルシートを切り分けることを意識しましょう。

全体的に適用するスタイルシート
スマートフォン・タブレットのみ適用するスタイルシート

上記のように切り分けて設定すると、スタイルの切り替えが行いやすいです。

スマートフォン・タブレットのみにスタイルを適用させるには、主に下記の２つの方法があります。

メディアクエリを利用する
jQueryを利用する

上記のどちらを利用しても構いませんが、簡単なのはメディアクエリを利用する方法です。

メディアクエリを利用してスマートフォン・タブレットのみにスタイルシートを適用させる

メディアクエリとは、CSS3で利用できる機能です。
画面サイズに応じてスタイルシートを上書きすることができます。

/* デスクトップPCとスマホに適用するCSS */
body{background-color: #ccc; /* 背景灰色 */}

/* スマホ（画面横幅480px以下）だけに適用するCSS */
@media screen and ( max-width:480px )
{
    body{background-color: #000 ;/* 背景黒色 */}
}

スタイルシートに上記のように記載すると、480ピクセル以下の画面では背景色が黒で表示されます。

※メディアクエリは多くのスマートフォンブラウザで利用できますが、IE8などブラウザによってはメディアクエリを利用することができないものもあります。
　IE8でもメディアクエリを利用できるようにするには、jQueryを利用してください。
　I'll be NET｜レスポンシブなサイトをIE8に対応するために導入すべきjQueryいろいろ

jQueryを利用してスマートフォン・タブレットのみにスタイルシートを適用させる

メディアクエリを利用できない場合は、jQueryを利用してスタイルシートを切り替えることができます。

World Design Dackel｜jqueryでレスポンシブサイトへ対応。PCとスマートフォンでCSSを切り替えるプラグインjquery.switchview.jsを作った

まとめ

携帯電話やスマートフォンの普及で、創作サイトでもモバイル対応をする必要が出て参りましたが、どこまで対応するか・どのように対応するかは様々な方法があり、一概にどれが最適であると申し上げることは難しいものがあります。
携帯電話（ガラケー・フィーチャーフォン）ユーザーが少なくなってきたことを考えると、スマートフォン・タブレット向けの対応のみで十分かもしれませんが、携帯サイトが創作サイトの一翼を担ってきたという歴史があり、今なお根強い人気・支持を得ていることも事実です。

今回は無料の範囲で自力で行うことを前提としたモバイル対応方法をご紹介しました。
次回は、PHPを利用したモバイル対応方法をご紹介したいと思います。

▲ページ上部へ