« 電子書籍って意外と簡単に作れるよ | トップページ | jQueryのドロップダウンメニュー入れた »

2016/03/31

スマホ専用ページを今頃作り始めた

電子書籍「簡単!本格的!電子書籍の作り方: 縦書きEPUB3対応 Kindle版」をAmazonで販売後、追加や修正など書きためていくホームページを更新しているのですが、はじめてスマホ専用ページも作ってみました。

ぼくが管理するホームページは無駄に数が多く、スマホ対応ページも作らずほぼ放置状態。
そもそもスマホユーザーになったのが去年の夏で、それも使用するのは電子書籍チェックくらいという体たらく。
スマホを使う場面なんてほとんどないのですよね。(^^ゞ

それが今回電子書籍をAmazonで販売し始め、更に追加修正ページを作っていると、電子書籍をスマホで見てそこから追加修正ページに飛ぶ人もいるだろうし・・・、などと思いはじめ。
やっぱりスマホ専用ページは必要ですよね。

というわけで、作りました。
スマホ専用ページ。

ひとまずPC用のページは作っていたので、レンタルサーバーのPC用「index.html」が入っているディレクトリに「.htaccess」ファイルを設置。
参考にしたのは以下のページ。

.htaccessファイルの書き方と設置方法 [ホームページ作成] All About

PC版とスマートフォン版サイトを自動振り分けする方法 [ホームページ作成] All About

上記ページを参考に、とりあえずPC用トップページにアクセスがあった時、ユーザーエージェント名の中に「iPhone」、「Android」 + 「Mobile」、「Windows Phone」のいずれかが含まれていた場合、スマホ専用ディレクトリに飛ばすという設定にしました。
意外と簡単に設置終了。

「簡単!本格的!電子書籍の作り方」追加修正公式HP

リンク先はPC用トップページになっていますが、スマホでアクセスした場合はスマホ専用トップページに飛びます。(たぶん)
iPadやタブレットはスマホより表示画面が広いので、PC用ページのまま。

スマホ専用ページはどこから手を付けたらよいかもよくわかっていないので、ひとまずjQueryというヤツのテンプレートを紹介している下記ページを参考にしました。

30分でスマホサイト作成 | 勝手にスマホサイトまとめ

なのですが、何故かjQueryっぽい部分は外して普通のホームページ的表示に変えました。
たぶん、自分で理解している範囲で作りたかったんだと思います。

ところで、手許にあるHTML/CSSの参考書が古いままであり、今どきのHTML5/CSS3について何も知らないことに今さらながら気づき。
急遽HTML5/CSS3の参考を注文し、昨日到着。
さて、これからぼちぼちと勉強していきましょう。

ひとまず追加修正ページを、自前でjQueryなんかも取り入れながら作成し、メインHPの「町の按摩さん.com」内のすべてのページにスマホ専用ページを設置するのが目標。

|

« 電子書籍って意外と簡単に作れるよ | トップページ | jQueryのドロップダウンメニュー入れた »

パソコン・インターネット」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/30768/63419733

この記事へのトラックバック一覧です: スマホ専用ページを今頃作り始めた:

« 電子書籍って意外と簡単に作れるよ | トップページ | jQueryのドロップダウンメニュー入れた »