コンテンツをコピー&ペースト

いったん【プラン】画面に戻り、再び【デスクトップ】の表示に切り替えたら、デスクトップ版の【Aマスター】を開く。そこで「Ctrl(command)+A」のショートカットキーを押すと、ページ内の要素が全て選択されるので、続けて「Ctrl(command)+C」を押してコピーする。そして、再び【スマートフォン】用の【Aマスター】へと移動し、「Ctrl(command)+V」でペーストをする。

マスターページに配置しているアイコンやイラストを選択し、コピー

スマートフォンページへ移動し、ペースト

先ほどコピーした要素が、ページの中にペーストされた。しかし、当然ながら縦長のスマホ画面にはうまくフィットしていない状況。画面におさまるように適宜、ドラッグや縮小を行い、画面におさまるように手を加えていく。

うまくページにおさまるようにリサイズ

リサイズができたら、同様に他のページも作業を進める。Lightboxのスライドショーを埋め込んであるギャラリーも、メッセージフォームを配置したコンタクトページも、そのまま丸ごとコピー&ペーストでOKだ。

デスクトップ版のギャラリーページ

スマホサイトへペーストしたところ

アイコンが幅におさまるように配置を修正

更に、アイコンサイズを正方形にアレンジして完成

スマホサイトでもマスターを活用しよう

順調にコピペ作業を進めていた筆者であったが、【profile】ページへの作業中に一瞬手が止まってしまった。トップに配置されているイラストが大きすぎて、文字を入れるスペースがないのである……。

絵が邪魔で文章がレイアウトできない……

マスターの設定を変更する

シンプルな【B-マスター】に変更

プランページに戻って見てみると、【profile】のページにはどうやらデスクトップ版と同様に【A-マスター】が適用されているようだ。横長のPCスクリーンでは、左側にイラストが入ってちょうどバランスが取れていたが、スマホにはその配置は適さない。そこで、【profile】ページには【A-マスター】ではなく、イラストを取り除いた状態の【B-マスター】を適用することにした。

このようにスマートフォンサイトの構築においても、マスターページの機能を理解することでスムーズに作業ができるので、ぜひ覚えておいてほしい。なお、マスターページの基本機能については第4回でも解説している。

リンクを修正する

全てのページコンテンツがそろったら、最後の仕上げ、「リンクの修正」である。現時点では、まだリンクの設定が【デスクトップ】のままになっているため、【スマートフォン】に変更をする。この作業を忘れると、せっかくトップページはスマホ最適化ページで表示されても、リンクをクリックすると再びPC用のページに連れ戻されてしまうため、注意が必要だ。

ページ上部【ハイパーリンク】からリンク先を選び直す

【ハイパーリンク】をクリックすると、ここに以前はなかった【スマートフォン】のリンク先が自動で生成されているのが分かる。ここから該当のリンクを選び、各アイコンのリンク先を修正していく。作業が完了したら、サイトを保存し、いつもと同じようにパブリッシュしてみよう。(「パブリッシュって何だっけ……」という人は第6回をチェック!)

スマホからアクセス!

こうして、ついにスマホサイトが完成!　さっそく自身のiPhoneからアクセスしてみると、ちゃんとスマホバージョンのデザインで表示されている!ギャラリーページのスライドショー、およびコンタクトフォームも問題なく動作していることが確認できた。

また、同じURLにPCからアクセスすると、こちらはデスクトップ版のデザインで表示されている。PC/スマホ版の自動切り替えが機能していることに、テンションの上がる筆者であった。

ちなみに、実際のサイトの様子も確認していただくことができるようになっている。スマートフォン版を確認したい場合はお手持ちのスマホからアクセスしてみてほしい。

筆者のiPhoneからアクセスした様子

ギャラリーページとコンタクトフォーム

スマホ最適化に成功して気分のよくなった筆者は、またしても新たな挑戦をしてみることにした。それは、今流行の「縦スクロールサイト」を作ることである。Webサイト自体が1枚の縦長の絵巻物のように構成されており、アイコンをクリックすると、そのリンク先までビューンとスクロールされるというものである。これまた、どうやって作っているのか筆者にとっては未知の世界。でも、きっとMuseならできてしまう気がする……そんな根拠のない自信だけを頼りに、次の作業へと突入したのであった。

果たして話題の「スクロールサイト」を実装できるのだろうか。次回へと続く!