e.b.i.f
  • Photo-Biyori
  • about
  • bookmarks
  • skip to menu ↓

2008/03/13 (Thu)

フォトログを(ちょっとだけ)iPhone対応にしてみた

せっかく我が家にiPhoneがやってきたので、テストがてらちょっとだけ遊んでみた。cssでサイトのレイアウトを振り分ける、というところまでは面倒なのでしてないけど、
1. サイトの表示幅の変更
2. ウェブクリップ用のアイコン作成
という簡単なふたつをフォトログに導入。以下メモ代わり。iPod TouchのSafariも対応。

1. サイトの表示幅の変更

iPhoneのデフォルト表示幅は980ピクセル。この幅が画面幅になって表示される。私のフォトログは幅が450ピクセルなので、iPhoneで見ると画面の半分ほどにちょこんと表示される。これをiPhone用のメタタグを使って、450ピクセルが表示幅になるように変更。(サイトのheadタグ内に挿入)

<meta name="viewport" content="width = 450" />

r0010855.jpg←こんな感じ。
ポラロイド署名運動のバナーの表示がちょっとおかしいけど、気にしない、気にしない… 

2. ウェブクリップ用のアイコン作成

前回のアップデートで可能になったiPhoneの機能の一つが、サイトのブックマークをフロントのアイコンに追加するウェブクリップブックマーク。私のサイトをブックマークしてフロントに置いてくれる人がいるとは思えませんが、お仕事用のテストということで。(笑)

手順は簡単で、57×57ピクセルのアイコン用のPNG画像を “apple-touch-icon.png” という名前でサイトのルートディレクトリーにアップロードするだけ。Favicon(ファビコン)と同じ要領です。
ファイル名を指定する場合はサイト、またはページのheadタグ内に

<link rel="apple-touch-icon" href="/xx.png" /> 

と指定。
r0010856.jpg←こんな感じ。
アイカタに無理矢理ブックマークしてもらう。アイコンのつやつや感はiPhoneがつけてくれます。

その他のiPhone/iPod Touch用の詳しい情報は↓
Apple Web Apps Dev Center – Designing Content
日本語のページ、前はあったんだけどなくなっちゃったみたいです。

TAG: apple iphone web-dev
CAT: web+tech | TIME: 1:15 PM
Tweet
Click here to cancel reply.

Spam Protection by WP-SpamFree



Prev/Next Posts

旧式フィルム
WP Plugin: iWPhone

In Same Category

iPhoneがやってきた。
サーバお引っ越し

Recent Posts

  • サイトのお引越し
  • Posterous to WordPress
  • One Down.
  • February Resolution
  • DeliciousのブックマークをWordPressに移行する

Recent Comments

  • Franck C. on PB3: Questions, Feedbacks and Ideas
  • Kumitey on PB3: Questions, Feedbacks and Ideas
  • ganmo on PB3: Questions, Feedbacks and Ideas
  • Download and Installation « Photo-Biyori on PB2: How to Use Widgets in Photo-Biyori 2.0
  • Lindsay on PB3: Questions, Feedbacks and Ideas
  • Salih Deveci on PB3: Questions, Feedbacks and Ideas


Category

  • +doing+ Feed for all posts filed under +doing+ (49)
  • +feeling+thinking+ Feed for all posts filed under +feeling+thinking+ (26)
  • +listening+ Feed for all posts filed under +listening+ (5)
  • +reading+ Feed for all posts filed under +reading+ (9)
  • +watching+ Feed for all posts filed under +watching+ (41)
  • biboroku Feed for all posts filed under biboroku (11)
  • cameras Feed for all posts filed under cameras (31)
  • design+goods Feed for all posts filed under design+goods (31)
  • ebif Feed for all posts filed under ebif (10)
  • photography+art Feed for all posts filed under photography+art (16)
  • photography+me Feed for all posts filed under photography+me (40)
  • tsubuyaki Feed for all posts filed under tsubuyaki (58)
  • web+tech Feed for all posts filed under web+tech (20)
  • wordpress Feed for all posts filed under wordpress (34)
  • wp+photo-biyori Feed for all posts filed under wp+photo-biyori (13)

Search

Monthly Archives

  • 2011:
    01 02 03 04 05 06 07 08 09 10 11 12
  • 2010:
    01 02 03 04 05 06 07 08 09 10 11 12
  • 2009:
    01 02 03 04 05 06 07 08 09 10 11 12
  • 2008:
    01 02 03 04 05 06 07 08 09 10 11 12
  • 2007:
    01 02 03 04 05 06 07 08 09 10 11 12
  • 2006:
    01 02 03 04 05 06 07 08 09 10 11 12