写真サイトをスマートフォンに最適化しました。


追記:2015.01.03

このサイトはレスポンシブWebブデザインに変更しました。現在はtumblrを使ってのスマートフォン対応はしておりません。

1_PC表示
10 feet photogalleryという、フライフィッシングの釣果や、フィールドの風景を紹介する写真サイトを運営しています。

当ブログはWordPressで構築ていますが、この写真サイトはCMSとしての機能により特化しているMovable Typeで構築しています。テーマはcremaさん作成ものを使わせてもらってます。

このテーマ、とっても気に入っていますが、iPhone等スマートフォンからの閲覧にはあまり適していません。

そこでコンテンツをtumblrに移植し、スマートフォンでの表示により適したテーマ、Clear 02 by partiを適用しました。

トップページはこんな感じです。

2_tumblrサイト1

写真をタップすると、個別のヘージが表示されます。

3_tumblrサイト2

テーマの初期設定では文字が小さ過ぎますので、少しHTMLをさわりました。


/* ---------------------------------------------------- Photo ------------------ */
.photo {
text-align: center;
margin: 25px auto 125px auto;
}
.photo img {
max-width: 100%;
height: auto;
}
.photo .caption {
width: 600px;
margin: 25px auto 100px auto;
line-height: 1.6em;
text-align: left;
font-size: 3em; /* 写真の説明 24px */
}

(text-alignleftに変更し、font-size: 3em; /* 写真の説明 24px */を追記。)

ダブルタップすると、画面の幅一杯に拡大されます。

(再度ダブルタップすると、元の表示サイズに戻ります。)

3.5_tumblrサイト2.5

tumblrのアプリをインストールしている場合は、右上の「Open in app」ボタンをタップすると、

4_tumblrサイト3

アプリが起動し、この様な表示になります。左下の共有ボタンをタップすると、Twitterやfacebbok、Mailアプリ等に送る事が出来ます。

5_tumblrアプリ表示

そしてPCサイトトップページへのスマートフォンからのアクセスは、このtumblrのサイトに飛ぶようにしました。

4_スマホサイトへ移動

OKをタップすれば、tumblrのサイトが表示され、キャンセルをタップすれば、PCサイトが表示されます。

このようなサイトの振り分けは、「実践!iPhone&Androidサイト制作ガイド」を参考に、下のようなコードをPCサイトに記述しました。参考といってもサンプルコードからURLとサイト名を書き換えただけです。

<script type="text/javascript>
// iPhoneまたは、Androidの場合は振り分けを判断
if (document.referrer.indexOf('10feetphotogallery.tumblr.com') == -1&&  ((navigator.userAgent.indexOf('iPhone') >0&& navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod')>0 || navigator.userAgent.indexOf('Android')>0)) {
    if(confirm('10 feet photogalleryへようこそ。€nこのサイトにはスマートフォン用のサイトがあります。€n表示しますか?')) {
        location.href = 'http://10feetphotogallery.tumblr.com/';
    }
}
</script>
また、ページ下部に表示される PC | スマートフォン のPCをタップする事により、PCサイトのトップページに戻れるようにしました。

(HTMLに追記)

7_tumblrサイト4

スマホからのアクセスは、本来ならば個別ベージへのアクセスもtumblrのサイトに飛べるようにしたかった所ですが、現状トップページへのアクセスがあった時のみの対応です。→個別ページへのアクセスに関しても、同様にスマホ用のページに飛べるようにしました。(8/18追記)

そもそもtumblrのサイトには「モバイルレイアウト」が用意されています。

しかしPCサイトのデザインを出来るだけ踏襲したかったので、あえて「モバイルレイアウト」をオフにして、上記の方法を採りました。

Sponsored Links

2 Comments

Add a Comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください