サイトをスマートフォン対応にしました

 今年の4月から、パユファンサイトをスマートフォン対応にしました。その手順を書いておきます。

 まず、おおまかに書きますと、
ワードプレスで作成していた「コンサート情報」「CD紹介」「DVD紹介」「テレビラジオ情報」「YouTubeまとめ」「ベルリン・フィル定期演奏会」「音楽エッセイ」「サイト運営日誌」「コンサートホールの座席表」の9ページは、有料プラグイン「Wptouch pro」を使いました。

 最初は、無料のプラグイン「wptouch」を使おうと思いましたが、色を変更したり、アクセス解析コードを入れるのが無料のものでは、面倒な感じがして、9個分の手間がかかりますので、有料プラグインを買いました。

 そして、HTMLで作成していたページは、HTMLサイト作成システム「SIRIUS」【上位版】で、スマートフォン版ページを作成しました。  

 HTMLのすべてのページを作成すると、メニュー数がものすごく多くなりますので、結局作成したのは、「パユのプロフィール」「雑誌」「管理人の自己紹介」のみです。  

 「SIRIUS」【上位版】で、スマートフォン版のみ作成する方法をまとめておきます。

 シリウスは、HTMLが分からなくても、HTMLサイトを作成できるというのが売りですので、ブログを書くのと同じような感じで、作成できます。下の画像は、パユファンサイトを作成しているところです。

パユファンサイトをシリウスで作成しているところ

パユファンサイトをシリウスで作成しているところ

 流れは、パソコン用のページと一緒に、スマートフォン用ページを作成して、「サイト生成」して、スマートフォン部分のみアップロードします。

 この画面で、トップページと、「カテゴリーページ」「エントリーページ」を作成し、私の場合には、ワードプレスで作成したページは、リンクさせる状態でメニューをつくります。

 シリウスは、一度作成してアップロードすると、流れが分かりますが、最初からいきなり自分が作成したいページをつくろうとすると、見え方などが分からないと思い、私は、まずテストとして、自分がイメージしているできあがりのものを3ページくらい、1ページ2行くらいの文章で、つくり、アップロードして、実際にスマートフォンで見てみました。

 すると、要領が分かって、本番のページが作成しやすかったです。

 下の画像は、アップロードする画面です。

アップロードの画面

アップロードの画面

 私は、パソコン用のページを、pahudfan.net/smpにつくり、スマートフォン用ページをpahudfan.net/smp/iphoneにつくっています。実際のスマートフォン用ページのURLは、pahudfan.net/smpです。

 左側のpahudfan.net/smp/iphoneの中の全てのファイルを、右側のpahudfan.net/smpにアップロードします。

 私は、最初「全てのファイル」というのがどこを指すのか分かりませんでしたが、見えている全部ということです。

 これで、スマートフォン用ページは、できあがりました。

 次に、スマートフォンでpahudfan.netにアクセスしてこられた場合には、自動的にpahudfan.net/smpにとばさなければいけません。その方法は、次の記事で書きます。