スポンサーサイト

このブログは移転しています。このエントリをEvernoteなどにファイリングされる場合は移転先のものをお使いください。ただし移転に際して一部エントリは削除しています、ご了承ください。
▶︎▶︎ このエントリの移転先に ((移動)) する
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Webクリップアイコンを設置する

このブログは移転しています。このエントリをEvernoteなどにファイリングされる場合は移転先のものをお使いください。ただし移転に際して一部エントリは削除しています、ご了承ください。
▶︎▶︎ このエントリの移転先に ((移動)) する

iPhone/iPod touch用に自サイトのWebクリップアイコンを設置する

アイコン

iPhone/iPod touchのSafariでブックマークの登録先をホーム画面上にするよう指示すると、ホーム画面には「Webクリップアイコン」として登録される。これはMac OS X上で言うところのWebインターネットロケーションファイル(右図、拡張子=webloc)と役目は同じだ。

webclipicon081224.jpg

特に何の仕組みも施されていないWebページをiPhone/iPod touch上で登録する場合、このアイコンのデザインは右図のようにWebクリップ(ページのスクリーンショット)が適用されるようになっている。これでも十分かもしれないが、できればファビコンのようなオリジナルのアイコンが表示された方がページを作っている方も利用する方も楽しいだろう。

というわけで以下、このオリジナルのWebクリップアイコンの作り方とその設置方法。

以下、説明の都合上FC2などのブログサービスなどでWebクリップアイコンを設置する場合の手順を先に記し、本来の設置方法は文末に記しておく。

  1. 57ピクセル四方のPNG画像を用意する
    touch_icon_basesample.jpg
    ※角を丸めたりする必要は無い
    ※情報量は少ない方がクール
  2. ファイル名を「apple-touch-icon.png」としておく
  3. blogの管理画面等から上記ファイルをアップロードする
    例)FC2の場合は[管理画面>ツール>ファイルのアップロード]
  4. アップロードした画像のフルパスをメモしておく
    例)FC2の場合はアップロード完了後に赤太字でフルパスが出ているはず
    http://blog-imgs-18.fc2.com/k/j/x/kjx130/apple-touch-icon.pngなど
  5. HTML編集画面を開く
    例)FC2の場合は[管理画面>環境設定>テンプレートの設定]
    (注)HEAD領域の修正が認められていないサービスには設置できません
  6. <head>~</head>内に以下の記述を加える
    <link rel="apple-touch-icon" href="先ほどメモしたフルパス" />
  7. 変更を保存する
IMG_0001_2.png

細かく書いたので複雑に見えるかもしれないが、所定の画像をアップロードしてHTML編集で1行書き足すだけの事だ。実際にやってみれば画像を作るのが一番面倒に感じるくらい簡単な作業なので、興味のある人は物怖じせず試してみてほしい。

ちなみに、本来のやり方は上記手順1~2で作成したファイルをサイトのルートディレクトリ上にアップロードするだけだ(link relの記述は不要)。これが可能なWebサービスを利用している人はそれなりの知識がある方だと思うので、ルートディレクトリが何なのかという説明は省かせて頂く。

ちゃんと出来ていれば右のように表示される(右下にあるのが拙ブログのWebクリップアイコン)。

AdSense

Ads

Blog Search

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。