タイトルの意味がわからないんですけど、となる方も
いらっしゃると思いますが、
スマートフォンで(下の写真はiPhone)
このブログのショートカットをホーム画面に追加して頂くと
こんな感じになるように設定してみました。
 |
| いえ〜〜〜い |
(決してホーム画面への追加を強要してるわけではございません。)
(多分)
ちなみに、iPhoneでの流れとしては
(アンドロイド等はわからない・・申し訳ない・・)
①ホーム画面に追加したいページをsafariなんかで開いた状態で
②上の写真の赤丸部分をタップした後出てくる下の画面。
③上の画像の赤丸をタップすると・・下の画面になり、「追加」を押すと
④できたー！
 |
| だから何とか言わないで下さい。 |
以下、ホームページやブログ等をお持ちの方へ向けた
アイコンの設定方法の説明となりますので
興味の無い方はすっ飛ばして下さいね。
ちなみにこちらのサイト(『iをありがとう』) を参考にさせて頂きました。
まず、ウェブクリップアイコンを作成する。
まずは、アイコンを作るところから始まります。
私はPhotoshopで作ったのですが、以下の形式で作成しました。
サイズ: 144 x 144ピクセル ※iOS7は 152x152ピクセルが最適らしいです。
フォーマット: PNGファイル
ちなみに作った画像はこちら。
 |
| 分かり易くするため枠線付けてます。実際は付いてないです。 |
サイズですが、その他のサイズ(160x160だとか120x120)で作成しても
適宜リサイズされるようです。
ちなみにiPhoneとiPadで実際反映されるサイズは異なるようで、
更にAndroidとかになるとまた違った表示がされるようです・・
設定パターンその①: <head>内で設定する
ファイル名: 任意のファイル名.png
にしておいて、サーバーの任意の位置にアップロード。
(例えばroot直下でもいいし、[img]フォルダ内に入れててもOK)
そして、反映させたいページのhtmlファイルの<head></head>内に以下の記述。
<head> <link rel="apple-touch-icon" href="アイコンファイルまでのパス/アイコン名.png"/> </head>これで、上の記述があるページは反映されます。
※ちなみにiOSの旧バージョン(フラットデザイン前)だと
光沢が勝手にかかってしまうので、それを避ける為には以下のコードで記述。
<head> <link rel="apple-touch-icon-precomposed" href="アイコンファイルまでのパス/アイコン名.png"/> </head>
こちらの方法だと、各htmlファイルに上記を記述しなければなりません。
設定パターンその②
アイコンファイル名を
apple-touch-icon.png
もしくは
apple-touch-icon-precomposed.png (光沢ナシ)
にして、
サーバーのrootディレクトリに置く。(index.htmlと同じところですね。)
この方法では、各htmlファイルの<head>内に①の時のように
記述しなくても、
これだけで勝手に拾ってくれるそうです。
(ただし、ブログサービス等を使用している場合では厳しいですね。)
※現在(2014年5月)では分かりませんが、Androidではこの方法は
反映されない模様です。
以上、恐ろしく適当なTipsでした。
0 件のコメント:
コメントを投稿